feat(styled-components): use SWC Wasm plugin (#2679)

web-infra-dev · Jun 24, 2024 · b3adc3c · b3adc3c
1 parent bdab462
commit b3adc3c
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 64 deletions.
diff --git a/packages/core/tests/mergeConfig.test.ts b/packages/core/tests/mergeConfig.test.ts
@@ -180,4 +180,46 @@ describe('mergeRsbuildConfig', () => {
       },
     });
   });
+
+  it('should merge SWC plugins as expected', () => {
+    expect(
+      mergeRsbuildConfig(
+        {
+          tools: {
+            swc: {
+              jsc: {
+                experimental: {
+                  plugins: [['@swc/plugin-foo', {}]],
+                },
+              },
+            },
+          },
+        },
+        {
+          tools: {
+            swc: {
+              jsc: {
+                experimental: {
+                  plugins: [['@swc/plugin-bar', {}]],
+                },
+              },
+            },
+          },
+        },
+      ),
+    ).toEqual({
+      tools: {
+        swc: {
+          jsc: {
+            experimental: {
+              plugins: [
+                ['@swc/plugin-foo', {}],
+                ['@swc/plugin-bar', {}],
+              ],
+            },
+          },
+        },
+      },
+    });
+  });
 });
diff --git a/packages/plugin-styled-components/package.json b/packages/plugin-styled-components/package.json
@@ -26,7 +26,8 @@
     "dev": "modern build --watch"
   },
   "dependencies": {
-    "@rsbuild/shared": "workspace:*"
+    "@rsbuild/shared": "workspace:*",
+    "@swc/plugin-styled-components": "2.0.8"
   },
   "devDependencies": {
     "@rsbuild/core": "workspace:*",

diff --git a/packages/plugin-styled-components/src/index.ts b/packages/plugin-styled-components/src/index.ts
@@ -7,7 +7,7 @@ import type {
 import { reduceConfigs } from '@rsbuild/core';
 
 /**
- * the options of [rspackExperiments.styledComponents](https://rspack.dev/guide/features/builtin-swc-loader#rspackexperimentsstyledcomponents).
+ * The options of [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components).
  */
 export type PluginStyledComponentsOptions = {
   displayName?: boolean;
@@ -60,17 +60,24 @@ export const pluginStyledComponents = (
     };
 
     api.modifyRsbuildConfig((userConfig, { mergeRsbuildConfig }) => {
+      const mergedOptions = getMergedOptions();
+      if (!mergedOptions) {
+        return userConfig;
+      }
+
       const extraConfig: RsbuildConfig = {
         tools: {
-          swc(opts) {
-            const mergedOptions = getMergedOptions();
-            if (!mergedOptions) {
-              return opts;
-            }
-
-            opts.rspackExperiments ??= {};
-            opts.rspackExperiments.styledComponents = mergedOptions;
-            return opts;
+          swc: {
+            jsc: {
+              experimental: {
+                plugins: [
+                  [
+                    require.resolve('@swc/plugin-styled-components'),
+                    mergedOptions,
+                  ],
+                ],
+              },
+            },
           },
         },
       };

diff --git a/packages/plugin-styled-components/tests/__snapshots__/index.test.ts.snap b/packages/plugin-styled-components/tests/__snapshots__/index.test.ts.snap
@@ -37,6 +37,19 @@ exports[`plugins/styled-components > should apply styledComponents option to swc
         },
         "isModule": "unknown",
         "jsc": {
+          "experimental": {
+            "plugins": [
+              [
+                "<ROOT>/node_modules/<PNPM_INNER>/@swc/plugin-styled-components/swc_plugin_styled_components.wasm",
+                {
+                  "displayName": true,
+                  "pure": false,
+                  "ssr": false,
+                  "transpileTemplateLiterals": true,
+                },
+              ],
+            ],
+          },
           "externalHelpers": true,
           "parser": {
             "decorators": true,
@@ -49,14 +62,6 @@ exports[`plugins/styled-components > should apply styledComponents option to swc
             "legacyDecorator": false,
           },
         },
-        "rspackExperiments": {
-          "styledComponents": {
-            "displayName": true,
-            "pure": false,
-            "ssr": false,
-            "transpileTemplateLiterals": true,
-          },
-        },
       },
     },
   ],
@@ -89,6 +94,19 @@ exports[`plugins/styled-components > should enable ssr option when target contai
         },
         "isModule": "unknown",
         "jsc": {
+          "experimental": {
+            "plugins": [
+              [
+                "<ROOT>/node_modules/<PNPM_INNER>/@swc/plugin-styled-components/swc_plugin_styled_components.wasm",
+                {
+                  "displayName": true,
+                  "pure": false,
+                  "ssr": false,
+                  "transpileTemplateLiterals": true,
+                },
+              ],
+            ],
+          },
           "externalHelpers": true,
           "parser": {
             "decorators": true,
@@ -101,14 +119,6 @@ exports[`plugins/styled-components > should enable ssr option when target contai
             "legacyDecorator": false,
           },
         },
-        "rspackExperiments": {
-          "styledComponents": {
-            "displayName": true,
-            "pure": false,
-            "ssr": true,
-            "transpileTemplateLiterals": true,
-          },
-        },
       },
     },
   ],
@@ -152,6 +162,19 @@ exports[`plugins/styled-components > should enable ssr option when target contai
         },
         "isModule": "unknown",
         "jsc": {
+          "experimental": {
+            "plugins": [
+              [
+                "<ROOT>/node_modules/<PNPM_INNER>/@swc/plugin-styled-components/swc_plugin_styled_components.wasm",
+                {
+                  "displayName": true,
+                  "pure": false,
+                  "ssr": false,
+                  "transpileTemplateLiterals": true,
+                },
+              ],
+            ],
+          },
           "externalHelpers": true,
           "parser": {
             "decorators": true,
@@ -164,14 +187,6 @@ exports[`plugins/styled-components > should enable ssr option when target contai
             "legacyDecorator": false,
           },
         },
-        "rspackExperiments": {
-          "styledComponents": {
-            "displayName": true,
-            "pure": false,
-            "ssr": true,
-            "transpileTemplateLiterals": true,
-          },
-        },
       },
     },
   ],