fix: allow to enable Rspack experiments.css (#3068)

web-infra-dev · Jul 30, 2024 · cb548a1 · cb548a1
1 parent 253ca44
commit cb548a1
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 1 deletion.
diff --git a/e2e/cases/css/enable-experiments-css/index.test.ts b/e2e/cases/css/enable-experiments-css/index.test.ts
@@ -0,0 +1,45 @@
+import { build, proxyConsole, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest('should allow to enable Rspack experiments.css', async () => {
+  const { logs, restore } = proxyConsole();
+
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+  const files = await rsbuild.unwrapOutputJSON();
+  const content =
+    files[Object.keys(files).find((file) => file.endsWith('index.css'))!];
+
+  expect(content).toEqual('body{color:red}');
+  // should have no warnings
+  expect(logs.some((log) => log.includes('Compile Warning'))).toBeFalsy();
+
+  restore();
+});
+
+rspackOnlyTest(
+  'should allow to enable Rspack experiments.css with style-loader',
+  async () => {
+    const { logs, restore } = proxyConsole();
+
+    const rsbuild = await build({
+      cwd: __dirname,
+      rsbuildConfig: {
+        output: {
+          injectStyles: true,
+        },
+      },
+    });
+
+    const files = await rsbuild.unwrapOutputJSON();
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('index.js'))!];
+    expect(content).toContain('color: red;');
+
+    // should have no warnings
+    expect(logs.some((log) => log.includes('Compile Warning'))).toBeFalsy();
+
+    restore();
+  },
+);
diff --git a/e2e/cases/css/enable-experiments-css/rsbuild.config.ts b/e2e/cases/css/enable-experiments-css/rsbuild.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  tools: {
+    rspack: {
+      experiments: {
+        css: true,
+      },
+    },
+  },
+  output: {
+    filenameHash: false,
+  },
+});
diff --git a/e2e/cases/css/enable-experiments-css/src/index.css b/e2e/cases/css/enable-experiments-css/src/index.css
@@ -0,0 +1,3 @@
+body {
+  color: red;
+}
diff --git a/e2e/cases/css/enable-experiments-css/src/index.js b/e2e/cases/css/enable-experiments-css/src/index.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap b/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap
@@ -48,6 +48,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/mini-css-extract-plugin/dist/loader.js",
@@ -412,6 +413,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/mini-css-extract-plugin/dist/loader.js",
@@ -772,6 +774,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/dist/ignoreCssLoader.cjs",
@@ -1074,6 +1077,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/dist/ignoreCssLoader.cjs",

diff --git a/packages/core/src/plugins/css.ts b/packages/core/src/plugins/css.ts
@@ -340,7 +340,12 @@ export const pluginCss = (): RsbuildPlugin => ({
       handler: async (chain, utils) => {
         const rule = chain.module.rule(utils.CHAIN_ID.RULE.CSS);
         const { config } = utils.environment;
-        rule.test(CSS_REGEX);
+
+        rule
+          .test(CSS_REGEX)
+          // specify type to allow enabling Rspack `experiments.css`
+          .type('javascript/auto');
+
         await applyCSSRule({
           rule,
           utils,

diff --git a/packages/core/tests/__snapshots__/builder.test.ts.snap b/packages/core/tests/__snapshots__/builder.test.ts.snap
@@ -35,6 +35,7 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",

diff --git a/packages/core/tests/__snapshots__/css.test.ts.snap b/packages/core/tests/__snapshots__/css.test.ts.snap
@@ -10,6 +10,7 @@ exports[`plugin-css > should use custom cssModules rule when using output.cssMod
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -59,6 +60,7 @@ exports[`plugin-css injectStyles > should apply ignoreCssLoader when injectStyle
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/src/ignoreCssLoader.cjs",
@@ -98,6 +100,7 @@ exports[`plugin-css injectStyles > should use css-loader + style-loader when inj
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/compiled/style-loader",

diff --git a/packages/core/tests/__snapshots__/default.test.ts.snap b/packages/core/tests/__snapshots__/default.test.ts.snap
@@ -35,6 +35,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -432,6 +433,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -862,6 +864,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/packages/core/dist/ignoreCssLoader.cjs",
@@ -1193,6 +1196,7 @@ exports[`tools.rspack > should match snapshot 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",

diff --git a/packages/core/tests/__snapshots__/environments.test.ts.snap b/packages/core/tests/__snapshots__/environments.test.ts.snap
@@ -1385,6 +1385,7 @@ exports[`environment config > tools.rspack / bundlerChain can be used in environ
           },
           "sideEffects": true,
           "test": /\\\\\\.css\\$/,
+          "type": "javascript/auto",
           "use": [
             {
               "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -1729,6 +1730,7 @@ exports[`environment config > tools.rspack / bundlerChain can be used in environ
           },
           "sideEffects": true,
           "test": /\\\\\\.css\\$/,
+          "type": "javascript/auto",
           "use": [
             {
               "loader": "<ROOT>/packages/core/src/ignoreCssLoader.cjs",

diff --git a/packages/plugin-react/tests/__snapshots__/index.test.ts.snap b/packages/plugin-react/tests/__snapshots__/index.test.ts.snap
@@ -51,6 +51,7 @@ exports[`plugins/react > should work with swc-loader 1`] = `
         },
         "sideEffects": true,
         "test": /\\\\\\.css\\$/,
+        "type": "javascript/auto",
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",

diff --git a/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap b/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap
@@ -8,6 +8,7 @@ exports[`plugin-rem > should not run htmlPlugin with enableRuntime is false 1`]
     },
     "sideEffects": true,
     "test": /\\\\\\.css\\$/,
+    "type": "javascript/auto",
     "use": [
       {
         "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -73,6 +74,7 @@ exports[`plugin-rem > should run rem plugin with custom config 1`] = `
     },
     "sideEffects": true,
     "test": /\\\\\\.css\\$/,
+    "type": "javascript/auto",
     "use": [
       {
         "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
@@ -144,6 +146,7 @@ exports[`plugin-rem > should run rem plugin with default config 1`] = `
     },
     "sideEffects": true,
     "test": /\\\\\\.css\\$/,
+    "type": "javascript/auto",
     "use": [
       {
         "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",