feat: extract the styledComponents plugin as a standalone package

.changeset/chilled-plums-lie.md

@@ -0,0 +1,5 @@
+---
+'@rsbuild/plugin-styled-components': patch
+---
+
+feat(plugin-styled-components): support styled-components in rspack mode

.changeset/metal-moose-complain.md

@@ -0,0 +1,5 @@
+---
+'@rsbuild/plugin-styled-components': patch
+---
+
+feat(plugin-styled-components): extract the styledComponents plugin as a standalone package

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

@@ -2,6 +2,7 @@ import path from 'path';
 import { build } from '@scripts/shared';
 import { expect, test } from '@playwright/test';
 import { pluginSwc } from '@rsbuild/plugin-swc';
+import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';
 
 const commonConfig = {
   cwd: __dirname,
@@ -33,7 +34,7 @@ const noStyledConfig = {
   },
 };
 
-test('should allow to disable styled-components when use swc plugin', async () => {
+test('should not compiled styled-components by default when use swc plugin', async () => {
   const rsbuild = await build({
     ...noStyledConfig,
     plugins: [pluginSwc()],
@@ -50,10 +51,33 @@ test('should allow to disable styled-components when use swc plugin', async () =
   expect(content).toContain('div`');
 });
 
-test('should transform styled-components by default when use swc plugin', async () => {
+test('should transform styled-components when add extensions.styledComponents', async () => {
   const rsbuild = await build({
     ...commonConfig,
-    plugins: [pluginSwc()],
+    plugins: [
+      pluginSwc({
+        extensions: {
+          styledComponents: {},
+        },
+      }),
+    ],
+  });
+  const files = await rsbuild.unwrapOutputJSON();
+
+  const content =
+    files[
+      Object.keys(files).find(
+        (file) => file.includes('static/js') && file.endsWith('.js'),
+      )!
+    ];
+
+  expect(content).toContain('div.withConfig');
+});
+
+test('should transform styled-components when use pluginStyledComponents', async () => {
+  const rsbuild = await build({
+    ...commonConfig,
+    plugins: [pluginSwc(), pluginStyledComponents()],
   });
   const files = await rsbuild.unwrapOutputJSON();
 

e2e/cases/styled-component/index.test.ts

@@ -1,7 +1,7 @@
 import path from 'path';
 import { build } from '@scripts/shared';
-import { webpackOnlyTest } from '@scripts/helper';
-import { expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';
 
 const commonConfig = {
   cwd: __dirname,
@@ -18,30 +18,20 @@ const commonConfig = {
   },
 };
 
-const noStyledConfig = {
-  ...commonConfig,
-  rsbuildConfig: {
-    ...commonConfig.rsbuildConfig,
-    tools: {
-      ...commonConfig.rsbuildConfig.tools,
-      styledComponents: false as const,
-    },
-  },
-};
-
-// TODO: needs builtin:swc-loader
-webpackOnlyTest('should allow to disable styled-components', async () => {
-  const rsbuild = await build(noStyledConfig);
+test('should not compiled styled-components by default', async () => {
+  const rsbuild = await build(commonConfig);
   const files = await rsbuild.unwrapOutputJSON();
 
   const content =
     files[Object.keys(files).find((file) => file.endsWith('.js'))!];
   expect(content).toContain('div`');
 });
 
-// TODO: needs builtin:swc-loader
-webpackOnlyTest('should transform styled-components by default', async () => {
-  const rsbuild = await build(commonConfig);
+test('should transform styled-components', async () => {
+  const rsbuild = await build({
+    ...commonConfig,
+    plugins: [pluginStyledComponents()],
+  });
   const files = await rsbuild.unwrapOutputJSON();
 
   const content =

e2e/cases/styled-component/package.json

@@ -2,6 +2,7 @@
   "name": "@e2e/styled-component",
   "private": true,
   "dependencies": {
-    "styled-components": "^6.0.0"
+    "styled-components": "^6.0.0",
+    "@rsbuild/plugin-styled-components": "workspace:*"
   }
 }

e2e/package.json

@@ -6,7 +6,7 @@
     "test": "pnpm run test:rspack && pnpm run test:webpack",
     "test:webpack": "PROVIDE_TYPE=webpack playwright test",
     "test:rspack": "playwright test",
-    "test:webpack-swc": "playwright test swc"
+    "test:webpack-swc": "PROVIDE_TYPE=webpack playwright test swc"
   },
   "dependencies": {
     "lodash": "^4.17.21",

packages/core/src/rspack-provider/types/rspack.ts

@@ -101,6 +101,18 @@ export type BuiltinSwcLoaderOptions = {
     'react' | 'decorator' | 'presetEnv' | 'emotion' | 'relay'
   > & {
     import?: BuiltinsOptions['pluginImport'];
+    styledComponents?: {
+      displayName?: boolean;
+      ssr?: boolean;
+      fileName?: boolean;
+      meaninglessFileNames?: string[];
+      namespace?: string;
+      topLevelImportPaths?: string[];
+      transpileTemplateLiterals?: boolean;
+      minify?: boolean;
+      pure?: boolean;
+      cssProps?: boolean;
+    };
   };
 };
 

packages/document/docs/en/config/options/tools.mdx

@@ -84,12 +84,6 @@ import StyleLoader from '@en/shared/config/tools/styleLoader.md';
 
 <StyleLoader />
 
-## tools.styledComponents
-
-import StyledComponents from '@en/shared/config/tools/styledComponents.md';
-
-<StyledComponents />
-
 ## tools.terser
 
 import Terser from '@en/shared/config/tools/terser.md';

packages/document/docs/en/guide/advanced/rspack-start.mdx

@@ -113,7 +113,6 @@ Unsupported configurations and capabilities include:
 - [tools.terser](/config/options/tools.html#toolsterser)
 - [tools.cssExtract](/config/options/tools.html#toolscssextract)
 - [tools.cssLoader](/config/options/tools.html#toolscssloader) (Only supported when [disableCssExtract](/config/options/output.html#outputdisablecssextract) is true)
-- [tools.styledComponents](/config/options/tools.html#toolsstyledcomponents)
 - [tools.tsLoader](/config/options/tools.html#toolstsloader)
 - [tools.webpack](/config/options/tools.html#toolswebpack)：use [tools.rspack](/config/options/tools#toolsrspack) instead.
 - [tools.webpackChain](/config/options/tools.html#toolswebpackchain)：use [tools.bundlerChain](/config/options/tools#toolsbundlerchain) instead.

packages/document/docs/en/shared/config/tools/styledComponents.md

@@ -12,8 +12,6 @@
 }
 ```
 
-- **Bundler:** `only support webpack`
-
 `tools.styledComponents` config is corresponding to [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components), or [@swc/plugin-styled-components](https://github.com/swc-project/plugins/tree/main/packages/styled-components) when using SWC plugin.
 
 When the value is an Object, use the Object.assign function to merge with the default config. For example:

packages/document/docs/zh/config/options/tools.mdx

@@ -84,12 +84,6 @@ import StyleLoader from '@zh/shared/config/tools/styleLoader.md';
 
 <StyleLoader />
 
-## tools.styledComponents
-
-import StyledComponents from '@zh/shared/config/tools/styledComponents.md';
-
-<StyledComponents />
-
 ## tools.terser
 
 import Terser from '@zh/shared/config/tools/terser.md';

packages/document/docs/zh/guide/advanced/rspack-start.mdx

@@ -113,7 +113,6 @@ Rsbuild 旨在消除不同打包工具之间的主要差异，帮助用户以较
 - [tools.terser](/config/options/tools.html#toolsterser)
 - [tools.cssExtract](/config/options/tools.html#toolscssextract)
 - [tools.cssLoader](/config/options/tools.html#toolscssloader) (仅在 [disableCssExtract](/config/options/output.html#outputdisablecssextract) 时支持)
-- [tools.styledComponents](/config/options/tools.html#toolsstyledcomponents)
 - [tools.tsLoader](/config/options/tools.html#toolstsloader)
 - [tools.webpack](/config/options/tools.html#toolswebpack)：使用 [tools.rspack](/config/options/tools#toolsrspack) 代替。
 - [tools.webpackChain](/config/options/tools.html#toolswebpackchain)：使用 [tools.bundlerChain](/config/options/tools#toolsbundlerchain) 代替。

packages/document/docs/zh/shared/config/tools/styledComponents.md

@@ -12,8 +12,6 @@
 }
 ```
 
-- **打包工具：** `仅支持 webpack`
-
 对应 [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) 或使用 SWC 时 [@swc/plugin-styled-components](https://github.com/swc-project/plugins/tree/main/packages/styled-components) 的配置。 值为 `Object` 类型时，利用 Object.assign 函数与默认配置合并。比如:
 
 ```js

packages/plugin-react/tests/__snapshots__/webpack.test.ts.snap

@@ -50,15 +50,6 @@ exports[`plugins/react > should work with babel-loader 1`] = `
                   "<ROOT>/packages/webpack/compiled/babel-plugin-lodash",
                   {},
                 ],
-                [
-                  "<ROOT>/node_modules/<PNPM_INNER>/babel-plugin-styled-components/lib/index.js",
-                  {
-                    "displayName": true,
-                    "pure": false,
-                    "ssr": false,
-                    "transpileTemplateLiterals": true,
-                  },
-                ],
                 [
                   "<ROOT>/node_modules/<PNPM_INNER>/react-refresh/babel.js",
                   {
@@ -153,15 +144,6 @@ exports[`plugins/react > should work with babel-loader 1`] = `
                   "<ROOT>/packages/webpack/compiled/babel-plugin-lodash",
                   {},
                 ],
-                [
-                  "<ROOT>/node_modules/<PNPM_INNER>/babel-plugin-styled-components/lib/index.js",
-                  {
-                    "displayName": true,
-                    "pure": false,
-                    "ssr": false,
-                    "transpileTemplateLiterals": true,
-                  },
-                ],
               ],
               "presets": [
                 [
@@ -481,15 +463,6 @@ exports[`plugins/react > should work with ts-loader 1`] = `
                   "<ROOT>/packages/webpack/compiled/babel-plugin-lodash",
                   {},
                 ],
-                [
-                  "<ROOT>/node_modules/<PNPM_INNER>/babel-plugin-styled-components/lib/index.js",
-                  {
-                    "displayName": true,
-                    "pure": false,
-                    "ssr": false,
-                    "transpileTemplateLiterals": true,
-                  },
-                ],
               ],
               "presets": [
                 [
@@ -581,15 +554,6 @@ exports[`plugins/react > should work with ts-loader 1`] = `
                   "<ROOT>/packages/webpack/compiled/babel-plugin-lodash",
                   {},
                 ],
-                [
-                  "<ROOT>/node_modules/<PNPM_INNER>/babel-plugin-styled-components/lib/index.js",
-                  {
-                    "displayName": true,
-                    "pure": false,
-                    "ssr": false,
-                    "transpileTemplateLiterals": true,
-                  },
-                ],
               ],
               "presets": [
                 [

packages/plugin-styled-components/CHANGELOG.md

@@ -0,0 +1 @@
+# @rsbuild/plugin-styled-components

packages/plugin-styled-components/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/plugin-styled-components/README.md

@@ -0,0 +1,19 @@
+<p align="center">
+  <a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
+</p>
+
+# Rsbuild
+
+Unleash the power of Rspack with the out-of-the-box build tool.
+
+## Documentation
+
+https://rsbuild.dev/
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
+
+## License
+
+Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).

packages/plugin-styled-components/modern.config.ts

@@ -0,0 +1,3 @@
+import baseConfig from '../../scripts/modern.base.config';
+
+export default baseConfig;

packages/plugin-styled-components/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@rsbuild/plugin-styled-components",
+  "version": "0.0.7",
+  "description": "styled-components plugin for Rsbuild",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rsbuild",
+    "directory": "packages/plugin-styled-components"
+  },
+  "main": "./dist/index.js",
+  "types": "./src/index.ts",
+  "scripts": {
+    "dev": "modern build --watch",
+    "build": "modern build"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@rsbuild/shared": "workspace:*",
+    "babel-plugin-styled-components": "1.13.3"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "workspace:*",
+    "@rsbuild/plugin-swc": "workspace:*",
+    "@rsbuild/test-helper": "workspace:*",
+    "@rsbuild/webpack": "workspace:*",
+    "@types/node": "^16",
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true,
+    "types": "./dist/index.d.ts"
+  }
+}