From b3adc3ca016ce3400922ba5ea07a5a5e1ab9227a Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 24 Jun 2024 14:10:53 +0800 Subject: [PATCH] feat(styled-components): use SWC Wasm plugin (#2679) --- packages/core/tests/mergeConfig.test.ts | 42 +++++++++ .../plugin-styled-components/package.json | 3 +- .../plugin-styled-components/src/index.ts | 27 ++++-- .../tests/__snapshots__/index.test.ts.snap | 63 ++++++++----- pnpm-lock.yaml | 93 +++++++++++++------ 5 files changed, 164 insertions(+), 64 deletions(-) diff --git a/packages/core/tests/mergeConfig.test.ts b/packages/core/tests/mergeConfig.test.ts index 11041b5d5f..5f7eff55bb 100644 --- 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 index d90ba8b399..ffee8d13aa 100644 --- 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 index 2b2d9acc4b..a748075d44 100644 --- 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 index 5f2889b4a5..ff10df9483 100644 --- 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": [ + [ + "/node_modules//@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": [ + [ + "/node_modules//@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": [ + [ + "/node_modules//@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, - }, - }, }, }, ], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f5a030e812..1736a7c6ca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,7 +20,7 @@ importers: version: 2.27.5 '@modern-js/module-tools': specifier: ^2.54.1 - version: 2.54.1(eslint@9.5.0)(typescript@5.5.2) + version: 2.54.1(typescript@5.5.2) '@rsbuild/config': specifier: workspace:* version: link:scripts/config @@ -877,7 +877,7 @@ importers: version: 5.0.4 html-webpack-plugin: specifier: npm:html-rspack-plugin@5.7.2 - version: html-rspack-plugin@5.7.2(@rspack/core@0.7.4(@swc/helpers@0.5.11)) + version: html-rspack-plugin@5.7.2(@rspack/core@0.7.4(@swc/helpers@0.5.3)) terser: specifier: 5.31.1 version: 5.31.1 @@ -1049,7 +1049,7 @@ importers: version: 4.2.0 less-loader: specifier: ^12.2.0 - version: 12.2.0(@rspack/core@0.7.4(@swc/helpers@0.5.11))(less@4.2.0)(webpack@5.92.1) + version: 12.2.0(@rspack/core@0.7.4(@swc/helpers@0.5.3))(less@4.2.0)(webpack@5.92.1) prebundle: specifier: 1.1.0 version: 1.1.0(typescript@5.5.2) @@ -1247,7 +1247,7 @@ importers: version: link:../../scripts/test-helper html-webpack-plugin: specifier: npm:html-rspack-plugin@5.7.2 - version: html-rspack-plugin@5.7.2(@rspack/core@0.7.4(@swc/helpers@0.5.11)) + version: html-rspack-plugin@5.7.2(@rspack/core@0.7.4(@swc/helpers@0.5.3)) postcss-pxtorem: specifier: 6.1.0 version: 6.1.0(postcss@8.4.38) @@ -1290,7 +1290,7 @@ importers: version: 5.0.0 sass-loader: specifier: ^14.2.1 - version: 14.2.1(@rspack/core@0.7.4(@swc/helpers@0.5.11))(sass-embedded@1.77.5)(sass@1.77.6)(webpack@5.92.1) + version: 14.2.1(@rspack/core@0.7.4(@swc/helpers@0.5.3))(sass-embedded@1.77.5)(sass@1.77.6)(webpack@5.92.1) typescript: specifier: ^5.5.2 version: 5.5.2 @@ -1353,6 +1353,9 @@ importers: '@rsbuild/shared': specifier: workspace:* version: link:../shared + '@swc/plugin-styled-components': + specifier: 2.0.8 + version: 2.0.8 devDependencies: '@rsbuild/core': specifier: workspace:* @@ -1374,7 +1377,7 @@ importers: version: 0.63.0 stylus-loader: specifier: 8.1.0 - version: 8.1.0(@rspack/core@0.7.4(@swc/helpers@0.5.11))(stylus@0.63.0)(webpack@5.92.1) + version: 8.1.0(@rspack/core@0.7.4(@swc/helpers@0.5.3))(stylus@0.63.0)(webpack@5.92.1) devDependencies: '@rsbuild/core': specifier: workspace:* @@ -1396,7 +1399,7 @@ importers: version: 3.2.3(svelte@4.2.18) svelte-preprocess: specifier: ^5.1.4 - version: 5.1.4(@babel/core@7.24.7)(less@4.2.0)(postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.38)(tsx@4.14.0)(yaml@2.4.5))(postcss@8.4.38)(pug@3.0.3)(sass@1.77.6)(stylus@0.63.0)(svelte@4.2.18)(typescript@5.5.2) + version: 5.1.4(@babel/core@7.24.7)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(pug@3.0.3)(sass@1.77.6)(stylus@0.63.0)(svelte@4.2.18)(typescript@5.5.2) devDependencies: '@rsbuild/core': specifier: workspace:* @@ -1583,7 +1586,7 @@ importers: version: link:../shared vue-loader: specifier: ^15.11.1 - version: 15.11.1(@vue/compiler-sfc@3.4.23)(css-loader@7.1.2(@rspack/core@0.7.4(@swc/helpers@0.5.11))(webpack@5.92.1))(lodash@4.17.21)(prettier@3.3.2)(pug@3.0.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(webpack@5.92.1) + version: 15.11.1(@vue/compiler-sfc@3.4.23)(css-loader@7.1.2(@rspack/core@0.7.4(@swc/helpers@0.5.3))(webpack@5.92.1))(lodash@4.17.21)(prettier@3.3.2)(pug@3.0.3)(webpack@5.92.1) webpack: specifier: ^5.92.1 version: 5.92.1 @@ -3795,6 +3798,9 @@ packages: '@swc/plugin-remove-console@2.0.6': resolution: {integrity: sha512-IR7xgdAZpF5gh2mkR8CuIK85+B18i69qRjUXxj56HexBEGI6rruC2LMCpESDctO7aHaGw4gb9blky1+OYRihNQ==} + '@swc/plugin-styled-components@2.0.8': + resolution: {integrity: sha512-aAIqnrfxLeBPubsDWtOjR/lR42iDweSVKlerE87BxlXavNajSerPjUzSaQdysZ8+V9NdE8VD65TjA+DQYs83kQ==} + '@trysound/sax@0.2.0': resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} @@ -10731,7 +10737,7 @@ snapshots: '@modern-js/utils': 2.54.1 '@swc/helpers': 0.5.3 - '@modern-js/module-tools@2.54.1(eslint@9.5.0)(typescript@5.5.2)': + '@modern-js/module-tools@2.54.1(typescript@5.5.2)': dependencies: '@ampproject/remapping': 2.3.0 '@ast-grep/napi': 0.16.0 @@ -10741,7 +10747,7 @@ snapshots: '@modern-js/plugin': 2.54.1 '@modern-js/plugin-changeset': 2.54.1 '@modern-js/plugin-i18n': 2.54.1 - '@modern-js/plugin-lint': 2.54.1(eslint@9.5.0) + '@modern-js/plugin-lint': 2.54.1 '@modern-js/swc-plugins': 0.6.6(@swc/helpers@0.5.3) '@modern-js/types': 2.54.1 '@modern-js/utils': 2.54.1 @@ -10791,15 +10797,13 @@ snapshots: '@modern-js/utils': 2.54.1 '@swc/helpers': 0.5.3 - '@modern-js/plugin-lint@2.54.1(eslint@9.5.0)': + '@modern-js/plugin-lint@2.54.1': dependencies: '@modern-js/tsconfig': 2.54.1 '@modern-js/utils': 2.54.1 '@swc/helpers': 0.5.3 cross-spawn: 7.0.3 husky: 8.0.3 - optionalDependencies: - eslint: 9.5.0 '@modern-js/plugin@2.54.1': dependencies: @@ -11241,6 +11245,17 @@ snapshots: optionalDependencies: '@swc/helpers': 0.5.11 + '@rspack/core@0.7.4(@swc/helpers@0.5.3)': + dependencies: + '@module-federation/runtime-tools': 0.1.6 + '@rspack/binding': 0.7.4 + caniuse-lite: 1.0.30001636 + tapable: 2.2.1 + webpack-sources: 3.2.3 + optionalDependencies: + '@swc/helpers': 0.5.3 + optional: true + '@rspack/plugin-react-refresh@0.7.3(react-refresh@0.14.2)': optionalDependencies: react-refresh: 0.14.2 @@ -11505,6 +11520,10 @@ snapshots: dependencies: '@swc/counter': 0.1.3 + '@swc/plugin-styled-components@2.0.8': + dependencies: + '@swc/counter': 0.1.3 + '@trysound/sax@0.2.0': {} '@tybys/wasm-util@0.8.3': @@ -11884,9 +11903,9 @@ snapshots: '@vue/compiler-dom': 3.4.23 '@vue/shared': 3.4.23 - '@vue/component-compiler-utils@3.3.0(lodash@4.17.21)(pug@3.0.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@vue/component-compiler-utils@3.3.0(lodash@4.17.21)(pug@3.0.3)': dependencies: - consolidate: 0.15.1(lodash@4.17.21)(pug@3.0.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + consolidate: 0.15.1(lodash@4.17.21)(pug@3.0.3) hash-sum: 1.0.2 lru-cache: 4.1.5 merge-source-map: 1.1.0 @@ -12621,14 +12640,12 @@ snapshots: console-browserify@1.2.0: {} - consolidate@0.15.1(lodash@4.17.21)(pug@3.0.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + consolidate@0.15.1(lodash@4.17.21)(pug@3.0.3): dependencies: bluebird: 3.7.2 optionalDependencies: lodash: 4.17.21 pug: 3.0.3 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) constantinople@4.0.1: dependencies: @@ -12765,6 +12782,20 @@ snapshots: '@rspack/core': 0.7.4(@swc/helpers@0.5.11) webpack: 5.92.1 + css-loader@7.1.2(@rspack/core@0.7.4(@swc/helpers@0.5.3))(webpack@5.92.1): + dependencies: + icss-utils: 5.1.0(postcss@8.4.38) + postcss: 8.4.38 + postcss-modules-extract-imports: 3.1.0(postcss@8.4.38) + postcss-modules-local-by-default: 4.0.5(postcss@8.4.38) + postcss-modules-scope: 3.2.0(postcss@8.4.38) + postcss-modules-values: 4.0.0(postcss@8.4.38) + postcss-value-parser: 4.2.0 + semver: 7.6.2 + optionalDependencies: + '@rspack/core': 0.7.4(@swc/helpers@0.5.3) + webpack: 5.92.1 + css-minimizer-webpack-plugin@5.0.1(lightningcss@1.25.1)(webpack@5.92.1): dependencies: '@jridgewell/trace-mapping': 0.3.25 @@ -13835,6 +13866,10 @@ snapshots: optionalDependencies: '@rspack/core': 0.7.4(@swc/helpers@0.5.11) + html-rspack-plugin@5.7.2(@rspack/core@0.7.4(@swc/helpers@0.5.3)): + optionalDependencies: + '@rspack/core': 0.7.4(@swc/helpers@0.5.3) + html-tags@2.0.0: {} html-tags@3.3.1: {} @@ -14200,11 +14235,11 @@ snapshots: leac@0.6.0: {} - less-loader@12.2.0(@rspack/core@0.7.4(@swc/helpers@0.5.11))(less@4.2.0)(webpack@5.92.1): + less-loader@12.2.0(@rspack/core@0.7.4(@swc/helpers@0.5.3))(less@4.2.0)(webpack@5.92.1): dependencies: less: 4.2.0 optionalDependencies: - '@rspack/core': 0.7.4(@swc/helpers@0.5.11) + '@rspack/core': 0.7.4(@swc/helpers@0.5.3) webpack: 5.92.1 less@4.2.0: @@ -16543,11 +16578,11 @@ snapshots: sass-embedded-win32-ia32: 1.77.5 sass-embedded-win32-x64: 1.77.5 - sass-loader@14.2.1(@rspack/core@0.7.4(@swc/helpers@0.5.11))(sass-embedded@1.77.5)(sass@1.77.6)(webpack@5.92.1): + sass-loader@14.2.1(@rspack/core@0.7.4(@swc/helpers@0.5.3))(sass-embedded@1.77.5)(sass@1.77.6)(webpack@5.92.1): dependencies: neo-async: 2.6.2 optionalDependencies: - '@rspack/core': 0.7.4(@swc/helpers@0.5.11) + '@rspack/core': 0.7.4(@swc/helpers@0.5.3) sass: 1.77.6 sass-embedded: 1.77.5 webpack: 5.92.1 @@ -16882,13 +16917,13 @@ snapshots: stylis@4.3.2: {} - stylus-loader@8.1.0(@rspack/core@0.7.4(@swc/helpers@0.5.11))(stylus@0.63.0)(webpack@5.92.1): + stylus-loader@8.1.0(@rspack/core@0.7.4(@swc/helpers@0.5.3))(stylus@0.63.0)(webpack@5.92.1): dependencies: fast-glob: 3.3.2 normalize-path: 3.0.0 stylus: 0.63.0 optionalDependencies: - '@rspack/core': 0.7.4(@swc/helpers@0.5.11) + '@rspack/core': 0.7.4(@swc/helpers@0.5.3) webpack: 5.92.1 stylus@0.63.0: @@ -16947,7 +16982,7 @@ snapshots: svelte-dev-helper: 1.1.9 svelte-hmr: 0.14.12(svelte@4.2.18) - svelte-preprocess@5.1.4(@babel/core@7.24.7)(less@4.2.0)(postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.38)(tsx@4.14.0)(yaml@2.4.5))(postcss@8.4.38)(pug@3.0.3)(sass@1.77.6)(stylus@0.63.0)(svelte@4.2.18)(typescript@5.5.2): + svelte-preprocess@5.1.4(@babel/core@7.24.7)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(pug@3.0.3)(sass@1.77.6)(stylus@0.63.0)(svelte@4.2.18)(typescript@5.5.2): dependencies: '@types/pug': 2.0.10 detect-indent: 6.1.0 @@ -16959,7 +16994,7 @@ snapshots: '@babel/core': 7.24.7 less: 4.2.0 postcss: 8.4.38 - postcss-load-config: 6.0.1(jiti@1.21.6)(postcss@8.4.38)(tsx@4.14.0)(yaml@2.4.5) + postcss-load-config: 4.0.2(postcss@8.4.38) pug: 3.0.3 sass: 1.77.6 stylus: 0.63.0 @@ -17446,10 +17481,10 @@ snapshots: vue-hot-reload-api@2.3.4: {} - vue-loader@15.11.1(@vue/compiler-sfc@3.4.23)(css-loader@7.1.2(@rspack/core@0.7.4(@swc/helpers@0.5.11))(webpack@5.92.1))(lodash@4.17.21)(prettier@3.3.2)(pug@3.0.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(webpack@5.92.1): + vue-loader@15.11.1(@vue/compiler-sfc@3.4.23)(css-loader@7.1.2(@rspack/core@0.7.4(@swc/helpers@0.5.3))(webpack@5.92.1))(lodash@4.17.21)(prettier@3.3.2)(pug@3.0.3)(webpack@5.92.1): dependencies: - '@vue/component-compiler-utils': 3.3.0(lodash@4.17.21)(pug@3.0.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - css-loader: 7.1.2(@rspack/core@0.7.4(@swc/helpers@0.5.11))(webpack@5.92.1) + '@vue/component-compiler-utils': 3.3.0(lodash@4.17.21)(pug@3.0.3) + css-loader: 7.1.2(@rspack/core@0.7.4(@swc/helpers@0.5.3))(webpack@5.92.1) hash-sum: 1.0.2 loader-utils: 1.4.2 vue-hot-reload-api: 2.3.4