@openmrs/webpack-config 10.0.1-pre.5373 → 10.0.1-pre.5389

package/dist/index.js

@@ -49,7 +49,10 @@ const node_1 = require("browserslist/node");
 const browserslist_config_openmrs_1 = __importDefault(require("browserslist-config-openmrs"));
 const clean_webpack_plugin_1 = require("clean-webpack-plugin");
 const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
+const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-webpack-plugin"));
 const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
+const lightningcss_1 = require("lightningcss");
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 // eslint-disable-next-line no-restricted-imports
 const lodash_1 = require("lodash");
 const semver_1 = require("semver");
@@ -59,6 +62,7 @@ const browserslistTargetHandler_1 = __importDefault(require("webpack/lib/config/
 const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
 const webpack_stats_plugin_1 = require("webpack-stats-plugin");
 const webpack_2 = require("@module-federation/enhanced/webpack");
+const carbon_css_guard_1 = require("@openmrs/carbon-css-guard");
 const production = 'production';
 // Read from our own pin rather than `@module-federation/enhanced/package.json`, which its `exports` map
 // makes unreadable. `parse` rather than `coerce`, so that loosening the pin to a range disables the skew
@@ -277,14 +281,20 @@ exports.watchConfig = {};
  * This object will be merged with the webpack optimization
  * object.
  * Make sure to modify this object and not reassign it.
+ *
+ * Arrays here merge by index rather than replacing, so a `minimizer` set on this object lands on top of
+ * the defaults entry by entry instead of taking their place. Use `overrides.optimization` to replace
+ * them outright.
  */
 exports.optimizationConfig = {};
 exports.default = (env, argv = {}) => {
+    var _a;
     const root = process.cwd();
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     const { name, version, peerDependencies, browser, main, types } = require((0, path_1.resolve)(root, 'package.json'));
     // this typing is provably incorrect, but actually works
     const mode = (argv.mode || process.env.NODE_ENV || 'development');
+    const isProd = mode === production;
     const filename = (0, path_1.basename)(browser || main);
     const outDir = (0, path_1.dirname)(browser || main);
     const srcFile = (0, path_1.resolve)(root, browser ? main : types);
@@ -299,20 +309,27 @@ exports.default = (env, argv = {}) => {
         // so this (hopefully) doesn't interfere with Webpack-specific exit codes
         process.exit(9819023573289);
     }
-    const cssLoader = {
+    // These are factories rather than shared objects because `cssRuleConfig` and `scssRuleConfig` are
+    // merged into the rules with lodash `merge`, which mutates: one shared entry would let an override
+    // aimed at the CSS rule silently leak into the SCSS rule as well.
+    const cssLoader = () => ({
         loader: require.resolve('css-loader'),
         options: {
             modules: {
                 localIdentName: `${ident}__[name]__[local]___[hash:base64:5]`,
             },
         },
-    };
+    });
+    // Production emits real `.css` assets; development keeps `style-loader` for its better HMR story.
+    // See RFC 0033. The chunk-loading runtime resolves a chunk only once its stylesheet has loaded,
+    // so nothing mounts unstyled.
+    const styleLoader = () => isProd ? { loader: require.resolve(mini_css_extract_plugin_1.default.loader) } : { loader: require.resolve('style-loader') };
     const baseConfig = Object.assign({ 
         // The only `entry` in the application is the app shell. Everything else is
         // a Webpack Module Federation "remote." This ensures that there is always
         // only one container context--i.e., if we had an entry point per module,
         // WMF could get confused and not resolve shared dependencies correctly.
-        output: {
+        entry: {}, output: {
             publicPath: 'auto',
             path: (0, path_1.resolve)(root, outDir),
             hashFunction: 'xxhash64',
@@ -335,13 +352,13 @@ exports.default = (env, argv = {}) => {
                 }, exports.scriptRuleConfig),
                 (0, lodash_1.merge)({
                     test: /\.css$/,
-                    use: [require.resolve('style-loader'), cssLoader],
+                    use: [styleLoader(), cssLoader()],
                 }, exports.cssRuleConfig),
                 (0, lodash_1.merge)({
                     test: /\.s[ac]ss$/i,
                     use: [
-                        require.resolve('style-loader'),
-                        cssLoader,
+                        styleLoader(),
+                        cssLoader(),
                         {
                             loader: require.resolve('sass-loader'),
                             options: {
@@ -380,6 +397,17 @@ exports.default = (env, argv = {}) => {
                 maxAsyncRequests: 3,
                 maxInitialRequests: 1,
             },
+            // `'...'` keeps webpack's default JS minifier; naming any minimizer would otherwise replace it.
+            // Lightning CSS so that extracted stylesheets are minified the same way `@openmrs/rspack-config`
+            // minifies them. `targets` is passed explicitly because neither bundler's default consults the
+            // module's browserslist.
+            minimizer: [
+                '...',
+                new css_minimizer_webpack_plugin_1.default({
+                    minify: css_minimizer_webpack_plugin_1.default.lightningCssMinify,
+                    minimizerOptions: { targets: (0, lightningcss_1.browserslistToTargets)((0, browserslist_1.default)(browserTargets)) },
+                }),
+            ],
         }, exports.optimizationConfig), plugins: [
             browserslistWarnings.length > 0 && new BrowserslistWarningsPlugin(browserslistWarnings),
             new fork_ts_checker_webpack_plugin_1.default({
@@ -393,6 +421,12 @@ exports.default = (env, argv = {}) => {
                 },
             }),
             new clean_webpack_plugin_1.CleanWebpackPlugin(),
+            isProd &&
+                new mini_css_extract_plugin_1.default({
+                    // `ignoreOrder` because nearly every class here is uniquely scoped by CSS Modules, so the
+                    // conflicting-order warnings this would otherwise emit across chunks are almost all noise.
+                    ignoreOrder: true,
+                }),
             new webpack_bundle_analyzer_1.BundleAnalyzerPlugin({
                 analyzerMode: env && env.analyze ? 'server' : 'disabled',
             }),
@@ -488,5 +522,12 @@ exports.default = (env, argv = {}) => {
                 'lodash.throttle': 'lodash-es/throttle',
             },
         } }, exports.overrides);
-    return (0, lodash_1.mergeWith)(baseConfig, exports.additionalConfig, mergeFunction);
+    const config = (0, lodash_1.mergeWith)(baseConfig, exports.additionalConfig, mergeFunction);
+    // Appended after the merge rather than listed above. `overrides` is spread over the config object, so
+    // an app setting `overrides.plugins` replaces the whole array — not a lodash merge, which would keep
+    // the entries — and would drop the guard without noticing. Same reasoning as the `ExternalsPlugin`
+    // block above, which avoids `externals` for the same reason.
+    // Production only: under `style-loader` there are no `.css` assets to check.
+    config.plugins = [...((_a = config.plugins) !== null && _a !== void 0 ? _a : []), ...(isProd ? [new carbon_css_guard_1.CarbonCssGuardPlugin(name)] : [])];
+    return config;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/webpack-config",
-  "version": "10.0.1-pre.5373",
+  "version": "10.0.1-pre.5389",
   "license": "MPL-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -32,14 +32,18 @@
   "homepage": "https://github.com/openmrs/openmrs-esm-core#readme",
   "dependencies": {
     "@module-federation/enhanced": "2.8.1",
+    "@openmrs/carbon-css-guard": "10.0.1-pre.5389",
     "@swc/core": "1.15.21",
     "browserslist": "4.28.9",
     "browserslist-config-openmrs": "^1.0.1",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "11.0.0",
     "css-loader": "5.2.7",
+    "css-minimizer-webpack-plugin": "7.0.2",
     "fork-ts-checker-webpack-plugin": "6.5.3",
+    "lightningcss": "1.32.0",
     "lodash": "4.17.21",
+    "mini-css-extract-plugin": "2.9.1",
     "sass-embedded": "1.89.2",
     "sass-loader": "16.0.5",
     "semver": "^7.7.3",

package/src/index.ts

@@ -43,7 +43,10 @@ import { loadQueries } from 'browserslist/node';
 import defaultBrowserslistQueries from 'browserslist-config-openmrs';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import { browserslistToTargets, type Targets } from 'lightningcss';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 // eslint-disable-next-line no-restricted-imports
 import { isArray, merge, mergeWith } from 'lodash';
 import { inc, parse } from 'semver';
@@ -62,6 +65,7 @@ import browserslistTargetHandler from 'webpack/lib/config/browserslistTargetHand
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { StatsWriterPlugin } from 'webpack-stats-plugin';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
+import { CarbonCssGuardPlugin } from '@openmrs/carbon-css-guard';
 
 type OpenmrsWebpackConfig = Omit<Partial<WebpackConfiguration>, 'module' | 'output'> & {
   module: ModuleOptions;
@@ -341,6 +345,10 @@ export const watchConfig: Partial<WebpackConfiguration['watchOptions']> = {};
  * This object will be merged with the webpack optimization
  * object.
  * Make sure to modify this object and not reassign it.
+ *
+ * Arrays here merge by index rather than replacing, so a `minimizer` set on this object lands on top of
+ * the defaults entry by entry instead of taking their place. Use `overrides.optimization` to replace
+ * them outright.
  */
 export const optimizationConfig: Partial<WebpackConfiguration['optimization']> = {};
 
@@ -350,6 +358,7 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
   const { name, version, peerDependencies, browser, main, types } = require(resolve(root, 'package.json'));
   // this typing is provably incorrect, but actually works
   const mode = (argv.mode || process.env.NODE_ENV || 'development') as WebpackConfiguration['mode'];
+  const isProd = mode === production;
   const filename = basename(browser || main);
   const outDir = dirname(browser || main);
   const srcFile = resolve(root, browser ? main : types);
@@ -368,20 +377,30 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
     process.exit(9819023573289);
   }
 
-  const cssLoader = {
+  // These are factories rather than shared objects because `cssRuleConfig` and `scssRuleConfig` are
+  // merged into the rules with lodash `merge`, which mutates: one shared entry would let an override
+  // aimed at the CSS rule silently leak into the SCSS rule as well.
+  const cssLoader = () => ({
     loader: require.resolve('css-loader'),
     options: {
       modules: {
         localIdentName: `${ident}__[name]__[local]___[hash:base64:5]`,
       },
     },
-  };
+  });
+
+  // Production emits real `.css` assets; development keeps `style-loader` for its better HMR story.
+  // See RFC 0033. The chunk-loading runtime resolves a chunk only once its stylesheet has loaded,
+  // so nothing mounts unstyled.
+  const styleLoader = () =>
+    isProd ? { loader: require.resolve(MiniCssExtractPlugin.loader) } : { loader: require.resolve('style-loader') };
 
   const baseConfig: OpenmrsWebpackConfig = {
     // The only `entry` in the application is the app shell. Everything else is
     // a Webpack Module Federation "remote." This ensures that there is always
     // only one container context--i.e., if we had an entry point per module,
     // WMF could get confused and not resolve shared dependencies correctly.
+    entry: {},
     output: {
       publicPath: 'auto',
       path: resolve(root, outDir),
@@ -410,7 +429,7 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
         merge(
           {
             test: /\.css$/,
-            use: [require.resolve('style-loader'), cssLoader],
+            use: [styleLoader(), cssLoader()],
           },
           cssRuleConfig,
         ),
@@ -418,8 +437,8 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
           {
             test: /\.s[ac]ss$/i,
             use: [
-              require.resolve('style-loader'),
-              cssLoader,
+              styleLoader(),
+              cssLoader(),
               {
                 loader: require.resolve('sass-loader'),
                 options: {
@@ -474,6 +493,17 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
           maxAsyncRequests: 3,
           maxInitialRequests: 1,
         },
+        // `'...'` keeps webpack's default JS minifier; naming any minimizer would otherwise replace it.
+        // Lightning CSS so that extracted stylesheets are minified the same way `@openmrs/rspack-config`
+        // minifies them. `targets` is passed explicitly because neither bundler's default consults the
+        // module's browserslist.
+        minimizer: [
+          '...',
+          new CssMinimizerPlugin<{ targets: Targets }>({
+            minify: CssMinimizerPlugin.lightningCssMinify,
+            minimizerOptions: { targets: browserslistToTargets(browserslist(browserTargets)) },
+          }),
+        ],
       },
       optimizationConfig,
     ),
@@ -490,6 +520,12 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
         },
       }),
       new CleanWebpackPlugin(),
+      isProd &&
+        new MiniCssExtractPlugin({
+          // `ignoreOrder` because nearly every class here is uniquely scoped by CSS Modules, so the
+          // conflicting-order warnings this would otherwise emit across chunks are almost all noise.
+          ignoreOrder: true,
+        }),
       new BundleAnalyzerPlugin({
         analyzerMode: env && env.analyze ? 'server' : 'disabled',
       }),
@@ -593,5 +629,14 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
     },
     ...overrides,
   };
-  return mergeWith(baseConfig, additionalConfig, mergeFunction);
+  const config = mergeWith(baseConfig, additionalConfig, mergeFunction);
+
+  // Appended after the merge rather than listed above. `overrides` is spread over the config object, so
+  // an app setting `overrides.plugins` replaces the whole array — not a lodash merge, which would keep
+  // the entries — and would drop the guard without noticing. Same reasoning as the `ExternalsPlugin`
+  // block above, which avoids `externals` for the same reason.
+  // Production only: under `style-loader` there are no `.css` assets to check.
+  config.plugins = [...(config.plugins ?? []), ...(isProd ? [new CarbonCssGuardPlugin(name)] : [])];
+
+  return config;
 };