Css sourcemaps (#1193)

* prod css sourcemap support * revert ext * client too * kyt namespace
nytimes · Jun 3, 2024 · 8add1b1 · 8add1b1
1 parent 069e71a
commit 8add1b1
Show file tree

Hide file tree

Showing 7 changed files with 733 additions and 381 deletions.
diff --git a/packages/kyt-core/package.json b/packages/kyt-core/package.json
@@ -21,9 +21,11 @@
     "@babel/runtime": "7.21.0",
     "babel-loader": "8.2.2",
     "babel-preset-kyt-core": "2.0.1",
+    "browserslist": "latest",
     "commander": "8.2.0",
     "core-js": "3.18.0",
     "css-loader": "5.2.7",
+    "css-minimizer-webpack-plugin": "1.3.0",
     "file-loader": "6.2.0",
     "filesize": "8.0.3",
     "find-babel-config": "1.2.0",
@@ -38,7 +40,6 @@
     "lodash.clonedeep": "4.5.0",
     "lodash.merge": "4.6.2",
     "mini-css-extract-plugin": "1.6.2",
-    "optimize-css-assets-webpack-plugin": "6.0.1",
     "postcss-loader": "4.2.0",
     "prop-types": "15.7.2",
     "ps-tree": "1.2.0",
@@ -55,10 +56,12 @@
     "source-map-support": "0.5.20",
     "strip-ansi": "6.0.0",
     "style-loader": "0.23.1",
+    "update-browserslist-db": "latest",
     "url-loader": "4.1.1",
     "webpack": "4.46.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "4.2.2",
+    "webpack-node-externals": "2.5.2",
     "webpackbar": "4.0.0"
   },
   "devDependencies": {

diff --git a/packages/kyt-core/src/config/externals.js b/packages/kyt-core/src/config/externals.js
diff --git a/packages/kyt-core/src/config/webpack.dev.server.js b/packages/kyt-core/src/config/webpack.dev.server.js
@@ -1,12 +1,12 @@
 // Development webpack config for server code
 
 const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
 const { serverSrcPath, serverBuildPath, clientAssetsFile, loadableAssetsFile, publicSrcPath } =
   require('kyt-utils/paths')();
 const StartServerPlugin = require('./StartServerPlugin');
 const postcssLoader = require('../utils/getPostcssLoader');
 const getPolyfill = require('./getPolyfill');
-const externals = require('./externals');
 
 const nodeArgs = ['-r', 'source-map-support/register', '--max_old_space_size=4096'];
 // Passthrough --inspect and --inspect-brk flags (with optional [host:port] value) to node
@@ -31,9 +31,10 @@ module.exports = options => {
       __filename: false,
     },
 
-    externals: externals(
-      (options.externalModulesAllowlist || []).concat([/webpack\/hot\/poll\?300/])
-    ),
+    externals: nodeExternals({
+      modulesFromFile: true,
+      allowlist: (options.externalModulesAllowlist || []).concat([/webpack\/hot\/poll\?300/]),
+    }),
 
     entry: {
       main: [

diff --git a/packages/kyt-core/src/config/webpack.prod.client.js b/packages/kyt-core/src/config/webpack.prod.client.js
@@ -1,6 +1,6 @@
 // Production webpack config for client code
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { clientSrcPath, assetsBuildPath, publicSrcPath } = require('kyt-utils/paths')();
 const { kytWebpackPlugins } = require('kyt-runtime/webpack');
 const postcssLoader = require('../utils/getPostcssLoader');
@@ -33,8 +33,9 @@ module.exports = options => ({
           {
             loader: 'css-loader',
             options: {
+              sourceMap: true,
               modules: {
-                localIdentName: '[name]-[local]--[hash:base64:5]',
+                localIdentName: 'kyt-[hash:base64:5]',
               },
             },
           },
@@ -58,15 +59,14 @@ module.exports = options => ({
       filename: '[name]-[contenthash].css',
       chunkFilename: '[name]-[contenthash].css',
     }),
-
-    new OptimizeCSSAssetsPlugin({}),
   ],
 
   optimization: {
     moduleIds: 'hashed',
     runtimeChunk: {
       name: entrypoint => `runtime~${entrypoint.name}`,
     },
+    minimizer: [new CssMinimizerPlugin()],
     splitChunks: {
       cacheGroups: {
         vendor: {

diff --git a/packages/kyt-core/src/config/webpack.prod.server.js b/packages/kyt-core/src/config/webpack.prod.server.js
@@ -1,8 +1,8 @@
 // Production webpack config for server code
 
 const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
 const { serverSrcPath, serverBuildPath, publicSrcPath } = require('kyt-utils/paths')();
-const externals = require('./externals');
 const postcssLoader = require('../utils/getPostcssLoader');
 const getPolyfill = require('./getPolyfill');
 
@@ -12,14 +12,17 @@ module.exports = options => {
 
     target: 'node',
 
-    devtool: 'cheap-module-source-map',
+    devtool: 'source-map',
 
     node: {
       __dirname: false,
       __filename: false,
     },
 
-    externals: externals(options.externalModulesAllowlist),
+    externals: nodeExternals({
+      modulesFromFile: true,
+      allowlist: options.externalModulesAllowlist || [],
+    }),
 
     entry: {
       main: [getPolyfill(options.type), `${serverSrcPath}/index.js`].filter(Boolean),
@@ -42,7 +45,7 @@ module.exports = options => {
               loader: 'css-loader',
               options: {
                 modules: {
-                  localIdentName: '[name]-[local]--[hash:base64:5]',
+                  localIdentName: 'kyt-[hash:base64:5]',
                   exportOnlyLocals: true,
                 },
               },

diff --git a/packages/kyt-core/src/utils/getPostcssLoader.js b/packages/kyt-core/src/utils/getPostcssLoader.js
@@ -18,4 +18,6 @@ if (userHasPostcssConfig) {
   postcssConfig.options = kytPostcssConfig;
 }
 
+postcssConfig.options.sourceMap = true;
+
 module.exports = postcssConfig;