fix: ensure isolation of config objects between different builds (#3111)

web-infra-dev · Aug 2, 2024 · 9c23d57 · 9c23d57
1 parent d5dcfd3
commit 9c23d57
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 23 deletions.
diff --git a/packages/core/src/plugins/css.ts b/packages/core/src/plugins/css.ts
@@ -74,11 +74,18 @@ const userPostcssrcCache = new Map<
   PostCSSOptions | Promise<PostCSSOptions>
 >();
 
+// Create a new config object,
+// ensure isolation of config objects between different builds
+const clonePostCSSConfig = (config: PostCSSOptions) => ({
+  ...config,
+  plugins: config.plugins ? [...config.plugins] : undefined,
+});
+
 async function loadUserPostcssrc(root: string): Promise<PostCSSOptions> {
   const cached = userPostcssrcCache.get(root);
 
   if (cached) {
-    return cached;
+    return clonePostCSSConfig(await cached);
   }
 
   const { default: postcssrc } = await import('postcss-load-config');
@@ -93,11 +100,10 @@ async function loadUserPostcssrc(root: string): Promise<PostCSSOptions> {
 
   userPostcssrcCache.set(root, promise);
 
-  promise.then((config: PostCSSOptions) => {
+  return promise.then((config: PostCSSOptions) => {
     userPostcssrcCache.set(root, config);
+    return clonePostCSSConfig(config);
   });
-
-  return promise;
 }
 
 const getPostcssLoaderOptions = async ({

diff --git a/packages/core/tests/__snapshots__/css.test.ts.snap b/packages/core/tests/__snapshots__/css.test.ts.snap
@@ -139,3 +139,117 @@ exports[`plugin-css injectStyles > should use css-loader + style-loader when inj
   ],
 }
 `;
+
+exports[`should ensure isolation of PostCSS config objects between different builds 1`] = `
+[
+  {
+    "resolve": {
+      "preferRelative": true,
+    },
+    "sideEffects": true,
+    "test": /\\\\\\.css\\$/,
+    "type": "javascript/auto",
+    "use": [
+      {
+        "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
+      },
+      {
+        "loader": "<ROOT>/packages/core/compiled/css-loader",
+        "options": {
+          "importLoaders": 2,
+          "modules": {
+            "auto": true,
+            "exportGlobals": false,
+            "exportLocalsConvention": "camelCase",
+            "localIdentName": "[path][name]__[local]-[hash:base64:6]",
+            "namedExport": false,
+          },
+          "sourceMap": false,
+        },
+      },
+      {
+        "loader": "builtin:lightningcss-loader",
+        "options": {
+          "targets": [
+            "chrome >= 87",
+            "edge >= 88",
+            "firefox >= 78",
+            "safari >= 14",
+          ],
+        },
+      },
+      {
+        "loader": "<ROOT>/packages/core/compiled/postcss-loader",
+        "options": {
+          "postcssOptions": {
+            "config": false,
+            "plugins": [
+              {
+                "postcssPlugin": "foo",
+              },
+            ],
+          },
+          "sourceMap": false,
+        },
+      },
+    ],
+  },
+]
+`;
+
+exports[`should ensure isolation of PostCSS config objects between different builds 2`] = `
+[
+  {
+    "resolve": {
+      "preferRelative": true,
+    },
+    "sideEffects": true,
+    "test": /\\\\\\.css\\$/,
+    "type": "javascript/auto",
+    "use": [
+      {
+        "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
+      },
+      {
+        "loader": "<ROOT>/packages/core/compiled/css-loader",
+        "options": {
+          "importLoaders": 2,
+          "modules": {
+            "auto": true,
+            "exportGlobals": false,
+            "exportLocalsConvention": "camelCase",
+            "localIdentName": "[path][name]__[local]-[hash:base64:6]",
+            "namedExport": false,
+          },
+          "sourceMap": false,
+        },
+      },
+      {
+        "loader": "builtin:lightningcss-loader",
+        "options": {
+          "targets": [
+            "chrome >= 87",
+            "edge >= 88",
+            "firefox >= 78",
+            "safari >= 14",
+          ],
+        },
+      },
+      {
+        "loader": "<ROOT>/packages/core/compiled/postcss-loader",
+        "options": {
+          "postcssOptions": {
+            "config": false,
+            "plugins": [
+              {
+                "postcssPlugin": "bar",
+              },
+            ],
+          },
+          "sourceMap": false,
+        },
+      },
+    ],
+  },
+]
+`;
diff --git a/packages/core/tests/css.test.ts b/packages/core/tests/css.test.ts
@@ -1,4 +1,4 @@
-import { createStubRsbuild } from '@scripts/test-helper';
+import { createStubRsbuild, matchRules } from '@scripts/test-helper';
 import { normalizeCssLoaderOptions, pluginCss } from '../src/plugins/css';
 
 describe('normalizeCssLoaderOptions', () => {
@@ -152,3 +152,33 @@ describe('plugin-css injectStyles', () => {
     expect(bundlerConfigs[0]).toMatchSnapshot();
   });
 });
+
+it('should ensure isolation of PostCSS config objects between different builds', async () => {
+  const rsbuild = await createStubRsbuild({
+    plugins: [pluginCss()],
+    rsbuildConfig: {
+      environments: {
+        web: {
+          tools: {
+            postcss(config) {
+              config.postcssOptions ||= {};
+              config.postcssOptions.plugins = [{ postcssPlugin: 'foo' }];
+            },
+          },
+        },
+        web2: {
+          tools: {
+            postcss(config) {
+              config.postcssOptions ||= {};
+              config.postcssOptions.plugins = [{ postcssPlugin: 'bar' }];
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const bundlerConfigs = await rsbuild.initConfigs();
+  expect(matchRules(bundlerConfigs[0], 'a.css')).toMatchSnapshot();
+  expect(matchRules(bundlerConfigs[1], 'a.css')).toMatchSnapshot();
+});
diff --git a/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap b/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap
@@ -50,12 +50,6 @@ exports[`plugin-rem > should not run htmlPlugin with enableRuntime is false 1`]
                 "Once": [Function],
                 "postcssPlugin": "postcss-pxtorem",
               },
-              {
-                "AtRule": [Function],
-                "Declaration": [Function],
-                "Once": [Function],
-                "postcssPlugin": "postcss-pxtorem",
-              },
             ],
           },
           "sourceMap": false,
@@ -116,18 +110,6 @@ exports[`plugin-rem > should run rem plugin with custom config 1`] = `
                 "Once": [Function],
                 "postcssPlugin": "postcss-pxtorem",
               },
-              {
-                "AtRule": [Function],
-                "Declaration": [Function],
-                "Once": [Function],
-                "postcssPlugin": "postcss-pxtorem",
-              },
-              {
-                "AtRule": [Function],
-                "Declaration": [Function],
-                "Once": [Function],
-                "postcssPlugin": "postcss-pxtorem",
-              },
             ],
           },
           "sourceMap": false,