@openmrs/rspack-config 10.0.1-pre.5364 → 10.0.1-pre.5378

package/dist/index.js

@@ -86,6 +86,7 @@ const ts_checker_rspack_plugin_1 = require("ts-checker-rspack-plugin");
 const lodash_1 = require("lodash");
 const semver_1 = require("semver");
 const rspack_1 = require("@module-federation/enhanced/rspack");
+const carbon_css_guard_1 = require("@openmrs/carbon-css-guard");
 const core_1 = __importStar(require("@rspack/core"));
 const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
 const webpack_stats_plugin_1 = require("webpack-stats-plugin");
@@ -272,14 +273,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 devServerPort = argv.port ? Number(argv.port) : undefined;
     const devServerHost = argv.host || 'localhost';
     const filename = (0, path_1.basename)(browser || main);
@@ -296,20 +303,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(core_1.CssExtractRspackPlugin.loader) } : { loader: require.resolve('style-loader') };
     const baseConfig = Object.assign(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',
@@ -333,13 +347,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: {
@@ -377,11 +391,23 @@ exports.default = (env, argv = {}) => {
                 maxAsyncRequests: 3,
                 maxInitialRequests: 1,
             },
-            minimizer: [new core_1.default.SwcJsMinimizerRspackPlugin(), new core_1.default.LightningCssMinimizerRspackPlugin()],
+            minimizer: [
+                new core_1.default.SwcJsMinimizerRspackPlugin(),
+                // `targets` is passed explicitly rather than left to the minimizer's own default
+                new core_1.default.LightningCssMinimizerRspackPlugin({
+                    minimizerOptions: { targets: browserTargets },
+                }),
+            ],
         }, exports.optimizationConfig), plugins: [
             browserslistWarnings.length > 0 && new BrowserslistWarningsPlugin(browserslistWarnings),
             new ts_checker_rspack_plugin_1.TsCheckerRspackPlugin(),
             new clean_webpack_plugin_1.CleanWebpackPlugin(),
+            isProd &&
+                new core_1.CssExtractRspackPlugin({
+                    // `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',
             }),
@@ -493,5 +519,12 @@ exports.default = (env, argv = {}) => {
             serverUrl: `http://${devServerHost}:${devServerPort}`,
         },
     })), 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/rspack-config",
-  "version": "10.0.1-pre.5364",
+  "version": "10.0.1-pre.5378",
   "license": "MPL-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -32,6 +32,7 @@
   "homepage": "https://github.com/openmrs/openmrs-esm-core#readme",
   "dependencies": {
     "@module-federation/enhanced": "2.8.1",
+    "@openmrs/carbon-css-guard": "10.0.1-pre.5378",
     "@rspack/cli": "1.7.9",
     "@rspack/core": "1.7.9",
     "@swc/core": "1.15.21",

package/src/index.ts

@@ -47,9 +47,11 @@ import { TsCheckerRspackPlugin } from 'ts-checker-rspack-plugin';
 import { isArray, merge, mergeWith } from 'lodash';
 import { inc, parse } from 'semver';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+import { CarbonCssGuardPlugin } from '@openmrs/carbon-css-guard';
 import rspack, {
   type Compiler,
   CopyRspackPlugin,
+  CssExtractRspackPlugin,
   DefinePlugin,
   type ModuleOptions,
   type RuleSetRule,
@@ -292,6 +294,10 @@ export const watchConfig: Partial<OpenmrsRspackConfig['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<OpenmrsRspackConfig['optimization']> = {};
 
@@ -301,6 +307,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 OpenmrsRspackConfig['mode'];
+  const isProd = mode === production;
   const devServerPort = argv.port ? Number(argv.port) : undefined;
   const devServerHost = argv.host || 'localhost';
   const filename = basename(browser || main);
@@ -321,20 +328,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(CssExtractRspackPlugin.loader) } : { loader: require.resolve('style-loader') };
 
   const baseConfig: OpenmrsRspackConfig = {
     // 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),
@@ -364,7 +381,7 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
         merge(
           {
             test: /\.css$/,
-            use: [require.resolve('style-loader'), cssLoader],
+            use: [styleLoader(), cssLoader()],
           },
           cssRuleConfig,
         ),
@@ -372,8 +389,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: {
@@ -426,7 +443,13 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
           maxAsyncRequests: 3,
           maxInitialRequests: 1,
         },
-        minimizer: [new rspack.SwcJsMinimizerRspackPlugin(), new rspack.LightningCssMinimizerRspackPlugin()],
+        minimizer: [
+          new rspack.SwcJsMinimizerRspackPlugin(),
+          // `targets` is passed explicitly rather than left to the minimizer's own default
+          new rspack.LightningCssMinimizerRspackPlugin({
+            minimizerOptions: { targets: browserTargets },
+          }),
+        ],
       },
       optimizationConfig,
     ),
@@ -434,6 +457,12 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
       browserslistWarnings.length > 0 && new BrowserslistWarningsPlugin(browserslistWarnings),
       new TsCheckerRspackPlugin(),
       new CleanWebpackPlugin(),
+      isProd &&
+        new CssExtractRspackPlugin({
+          // `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',
       }),
@@ -554,5 +583,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;
 };