fix(uni-builder): styled-components not works when use webpack swc-plugin

.changeset/lovely-dolls-hang.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/uni-builder': patch
+---
+
+fix(uni-builder): styled-components not works when use webpack swc-plugin
+
+fix(uni-builder): 修复在使用 webpack swc 插件时 styled-components 不生效的问题

packages/builder/uni-builder/src/webpack/plugins/styledComponents.ts

@@ -1,4 +1,5 @@
 import type { RsbuildPlugin } from '@rsbuild/core';
+import { PLUGIN_SWC_NAME } from '@rsbuild/core';
 import {
   isServerTarget,
   mergeChainedOptions,
@@ -12,6 +13,8 @@ export const pluginStyledComponents = (
 ): RsbuildPlugin => ({
   name: 'uni-builder:styled-components',
 
+  pre: [PLUGIN_SWC_NAME, 'uni-builder:babel'],
+
   setup(api) {
     api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd }) => {
       const isSSR = isServerTarget(api.context.targets);

packages/builder/uni-builder/tests/__snapshots__/styledComponents.test.ts.snap

@@ -485,6 +485,12 @@ exports[`plugins/styled-components > should works in webpack swc mode 1`] = `
                 "libraryName": "@arco-design/web-react/icon",
               },
             ],
+            "styledComponents": {
+              "displayName": true,
+              "pure": false,
+              "ssr": false,
+              "transpileTemplateLiterals": true,
+            },
           },
           "jsc": {
             "externalHelpers": true,

tests/e2e/builder/cases/externalHelpers/index.test.ts

@@ -2,13 +2,13 @@ import path from 'path';
 import { build } from '@scripts/shared';
 import { providerType } from '@scripts/helper';
 import { expect, test } from '@modern-js/e2e/playwright';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 test('should externalHelpers by default', async () => {
   const builder = await build({
     cwd: __dirname,
     entry: { index: path.resolve(__dirname, './src/main.ts') },
-    plugins: providerType === 'rspack' ? [] : [builderPluginSwc()],
+    plugins: providerType === 'rspack' ? [] : [pluginSwc()],
   });
   const files = await builder.unwrapOutputJSON(false);
 

tests/e2e/builder/cases/html/minify/index.swc.test.ts

@@ -1,7 +1,7 @@
 import { join } from 'path';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build, getHrefByEntryName } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 const fixtures = __dirname;
 
@@ -14,7 +14,7 @@ test('should minify template js & css correctly when use swc-plugin', async ({
       main: join(fixtures, 'src/index.ts'),
     },
     runServer: true,
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     builderConfig: {
       html: {
         template: './static/index.html',

tests/e2e/builder/cases/lodash/index.swc.test.ts

@@ -1,7 +1,7 @@
 import * as path from 'path';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 test('should optimize lodash bundle size when using SWC plugin', async () => {
   const builder = await build({
@@ -21,7 +21,7 @@ test('should optimize lodash bundle size when using SWC plugin', async () => {
         },
       },
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: false,
   });
 
@@ -49,7 +49,7 @@ test('should not optimize lodash bundle size when transformLodash is false and u
         },
       },
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: false,
   });
 

tests/e2e/builder/cases/performance/removeConsole.swc.test.ts

@@ -1,7 +1,7 @@
 import { join } from 'path';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 const cwd = join(__dirname, 'removeConsole');
 
@@ -26,7 +26,7 @@ test('should remove specified console correctly when using SWC plugin', async ()
     entry: {
       main: join(cwd, 'src/index.js'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     builderConfig: {
       performance: {
         removeConsole: ['log', 'warn'],
@@ -48,7 +48,7 @@ test('should remove all console correctly when using SWC plugin', async () => {
     entry: {
       main: join(cwd, 'src/index.js'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     builderConfig: {
       performance: {
         removeConsole: true,

tests/e2e/builder/cases/source/plugin-import/index.webpack.test.ts

@@ -1,7 +1,7 @@
 import path from 'path';
 import { build } from '@scripts/shared';
 import { expect, test } from '@modern-js/e2e/playwright';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 import { findEntry, copyPkgToNodeModules, cases, shareTest } from './helper';
 
 /* webpack can receive Function type configuration */
@@ -34,7 +34,7 @@ test('should import with function customName', async () => {
 
   const builder = await build({
     ...setupConfig,
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     builderConfig: {
       source: {
         transformImport: [
@@ -63,7 +63,7 @@ test('should import with template config with SWC', async () => {
   const setupConfig = {
     cwd: __dirname,
     entry: { index: path.resolve(__dirname, './src/index.js') },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
   };
 
   {
@@ -110,6 +110,6 @@ cases.forEach(c => {
   shareTest(`${name}-webpack`, entry, config);
 
   shareTest(`${name}-webpack-swc`, entry, config, {
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
   });
 });

tests/e2e/builder/cases/styled-component/index.swc.test.ts

@@ -1,7 +1,7 @@
 import path from 'path';
 import { build } from '@scripts/shared';
 import { expect, test } from '@modern-js/e2e/playwright';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 const commonConfig = {
   cwd: __dirname,
@@ -36,7 +36,7 @@ const noStyledConfig = {
 test('should allow to disable styled-components when use swc plugin', async () => {
   const builder = await build({
     ...noStyledConfig,
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
   });
   const files = await builder.unwrapOutputJSON();
 
@@ -53,7 +53,7 @@ test('should allow to disable styled-components when use swc plugin', async () =
 test('should transform styled-components by default when use swc plugin', async () => {
   const builder = await build({
     ...commonConfig,
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
   });
   const files = await builder.unwrapOutputJSON();
 

tests/e2e/builder/cases/swc/index.swc.test.ts

@@ -3,15 +3,15 @@ import * as path from 'path';
 import { readFileSync } from 'fs';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build, getHrefByEntryName } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 test('should run SWC compilation correctly', async ({ page }) => {
   const builder = await build({
     cwd: __dirname,
     entry: {
       index: path.resolve(__dirname, './src/main.ts'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: true,
   });
 
@@ -33,7 +33,7 @@ test('should optimize lodash bundle size', async ({ page }) => {
     entry: {
       index: path.resolve(__dirname, './src/main.ts'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: true,
     builderConfig: {
       output: {
@@ -65,7 +65,7 @@ test('should use define for class', async () => {
       index: path.resolve(__dirname, './src/main.ts'),
     },
     plugins: [
-      builderPluginSwc({
+      pluginSwc({
         overrides: [
           {
             test: /override.ts/,
@@ -111,7 +111,7 @@ test('core-js-entry', async () => {
       index: path.resolve(__dirname, './src/core-js-entry.ts'),
     },
     plugins: [
-      builderPluginSwc({
+      pluginSwc({
         env: {
           targets: 'ie 9',
           mode: 'entry',
@@ -136,7 +136,7 @@ test('core-js-usage', async () => {
       index: path.resolve(__dirname, './src/core-js-usage.ts'),
     },
     plugins: [
-      builderPluginSwc({
+      pluginSwc({
         env: {
           targets: 'ie 9',
           mode: 'usage',

tests/e2e/builder/cases/top-level-await/index.swc.test.ts

@@ -1,7 +1,7 @@
 import * as path from 'path';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build, getHrefByEntryName } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 test('should run top level await correctly when using SWC', async ({
   page,
@@ -11,7 +11,7 @@ test('should run top level await correctly when using SWC', async ({
     entry: {
       index: path.resolve(__dirname, './src/index.ts'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: true,
   });
 

tests/e2e/builder/package.json

@@ -16,9 +16,9 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@rsbuild/plugin-swc": "0.3.7",
     "@rsbuild/shared": "0.3.7",
     "@modern-js/uni-builder": "workspace:*",
-    "@modern-js/builder-plugin-swc": "workspace:*",
     "@modern-js/e2e": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@types/node": "^14",

tests/integration/storybook/package.json

@@ -15,7 +15,6 @@
     "@modern-js/builder-rspack-provider": "workspace:*",
     "@modern-js/builder-webpack-provider": "workspace:*",
     "@modern-js/storybook": "workspace:*",
-    "@modern-js/builder-plugin-swc": "workspace:*",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "prop-types": "^15.8.1"