diff --git a/.changeset/chilled-plums-lie.md b/.changeset/chilled-plums-lie.md new file mode 100644 index 0000000000..c871dc1aaa --- /dev/null +++ b/.changeset/chilled-plums-lie.md @@ -0,0 +1,5 @@ +--- +'@rsbuild/plugin-styled-components': patch +--- + +feat(plugin-styled-components): support styled-components in rspack mode diff --git a/.changeset/metal-moose-complain.md b/.changeset/metal-moose-complain.md new file mode 100644 index 0000000000..44385eb821 --- /dev/null +++ b/.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 diff --git a/e2e/cases/styled-component/index.swc.test.ts b/e2e/cases/styled-component/index.swc.test.ts index dd91c8a531..d0d75c7e8d 100644 --- a/e2e/cases/styled-component/index.swc.test.ts +++ b/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(); diff --git a/e2e/cases/styled-component/index.test.ts b/e2e/cases/styled-component/index.test.ts index e8d30a065b..1f8bef5b5b 100644 --- a/e2e/cases/styled-component/index.test.ts +++ b/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,20 +18,8 @@ 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 = @@ -39,9 +27,11 @@ webpackOnlyTest('should allow to disable styled-components', async () => { 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 = diff --git a/e2e/cases/styled-component/package.json b/e2e/cases/styled-component/package.json index 180e2d22f0..627538cd80 100644 --- a/e2e/cases/styled-component/package.json +++ b/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:*" } } diff --git a/e2e/package.json b/e2e/package.json index 14e9ed0eb7..e02d4fa854 100644 --- a/e2e/package.json +++ b/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", diff --git a/packages/core/src/rspack-provider/types/rspack.ts b/packages/core/src/rspack-provider/types/rspack.ts index 7a9af6b7f1..93a843c908 100644 --- a/packages/core/src/rspack-provider/types/rspack.ts +++ b/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; + }; }; }; diff --git a/packages/document/docs/en/config/options/tools.mdx b/packages/document/docs/en/config/options/tools.mdx index b3fe27749c..f82c837f09 100644 --- a/packages/document/docs/en/config/options/tools.mdx +++ b/packages/document/docs/en/config/options/tools.mdx @@ -84,12 +84,6 @@ import StyleLoader from '@en/shared/config/tools/styleLoader.md'; -## tools.styledComponents - -import StyledComponents from '@en/shared/config/tools/styledComponents.md'; - - - ## tools.terser import Terser from '@en/shared/config/tools/terser.md'; diff --git a/packages/document/docs/en/guide/advanced/rspack-start.mdx b/packages/document/docs/en/guide/advanced/rspack-start.mdx index 9b87d7490c..95e425285b 100644 --- a/packages/document/docs/en/guide/advanced/rspack-start.mdx +++ b/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. diff --git a/packages/document/docs/en/shared/config/tools/styledComponents.md b/packages/document/docs/en/shared/config/tools/styledComponents.md index e389b0ae7c..4eb10f20d6 100644 --- a/packages/document/docs/en/shared/config/tools/styledComponents.md +++ b/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: diff --git a/packages/document/docs/zh/config/options/tools.mdx b/packages/document/docs/zh/config/options/tools.mdx index 09a70a05b9..132e9a73bc 100644 --- a/packages/document/docs/zh/config/options/tools.mdx +++ b/packages/document/docs/zh/config/options/tools.mdx @@ -84,12 +84,6 @@ import StyleLoader from '@zh/shared/config/tools/styleLoader.md'; -## tools.styledComponents - -import StyledComponents from '@zh/shared/config/tools/styledComponents.md'; - - - ## tools.terser import Terser from '@zh/shared/config/tools/terser.md'; diff --git a/packages/document/docs/zh/guide/advanced/rspack-start.mdx b/packages/document/docs/zh/guide/advanced/rspack-start.mdx index 1ceb4cac5b..879333b680 100644 --- a/packages/document/docs/zh/guide/advanced/rspack-start.mdx +++ b/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) 代替。 diff --git a/packages/document/docs/zh/shared/config/tools/styledComponents.md b/packages/document/docs/zh/shared/config/tools/styledComponents.md index deed47f11f..4e73cc37e4 100644 --- a/packages/document/docs/zh/shared/config/tools/styledComponents.md +++ b/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 diff --git a/packages/plugin-react/src/antd.ts b/packages/plugin-react/src/antd.ts index d30f8861d4..936a40a8cc 100644 --- a/packages/plugin-react/src/antd.ts +++ b/packages/plugin-react/src/antd.ts @@ -1,4 +1,4 @@ -import type { RsbuildTarget, SharedRsbuildPluginAPI } from '@rsbuild/shared'; +import { useSSR, type SharedRsbuildPluginAPI } from '@rsbuild/shared'; const getAntdMajorVersion = (appDirectory: string) => { try { @@ -41,9 +41,3 @@ export const applyAntdSupport = (api: SharedRsbuildPluginAPI) => { } }); }; - -export function useSSR(target: RsbuildTarget | RsbuildTarget[]) { - return (Array.isArray(target) ? target : [target]).some((item) => - ['node', 'service-worker'].includes(item), - ); -} diff --git a/packages/plugin-react/src/arco.ts b/packages/plugin-react/src/arco.ts index 28a2b46609..353f59696a 100644 --- a/packages/plugin-react/src/arco.ts +++ b/packages/plugin-react/src/arco.ts @@ -1,6 +1,6 @@ -import { useSSR } from './antd'; import { isPackageInstalled, + useSSR, type SharedRsbuildPluginAPI, } from '@rsbuild/shared'; diff --git a/packages/plugin-react/tests/__snapshots__/webpack.test.ts.snap b/packages/plugin-react/tests/__snapshots__/webpack.test.ts.snap index fced58a394..1924c367e8 100644 --- a/packages/plugin-react/tests/__snapshots__/webpack.test.ts.snap +++ b/packages/plugin-react/tests/__snapshots__/webpack.test.ts.snap @@ -50,15 +50,6 @@ exports[`plugins/react > should work with babel-loader 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], [ "/node_modules//react-refresh/babel.js", { @@ -153,15 +144,6 @@ exports[`plugins/react > should work with babel-loader 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//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`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//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`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ diff --git a/packages/plugin-styled-components/CHANGELOG.md b/packages/plugin-styled-components/CHANGELOG.md new file mode 100644 index 0000000000..df69c244bc --- /dev/null +++ b/packages/plugin-styled-components/CHANGELOG.md @@ -0,0 +1 @@ +# @rsbuild/plugin-styled-components diff --git a/packages/plugin-styled-components/LICENSE b/packages/plugin-styled-components/LICENSE new file mode 100644 index 0000000000..82d38c25b5 --- /dev/null +++ b/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. diff --git a/packages/plugin-styled-components/README.md b/packages/plugin-styled-components/README.md new file mode 100644 index 0000000000..6df1b99e33 --- /dev/null +++ b/packages/plugin-styled-components/README.md @@ -0,0 +1,19 @@ +

+ Rsbuild Logo +

+ +# 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). diff --git a/packages/plugin-styled-components/modern.config.ts b/packages/plugin-styled-components/modern.config.ts new file mode 100644 index 0000000000..52cae05a53 --- /dev/null +++ b/packages/plugin-styled-components/modern.config.ts @@ -0,0 +1,3 @@ +import baseConfig from '../../scripts/modern.base.config'; + +export default baseConfig; diff --git a/packages/plugin-styled-components/package.json b/packages/plugin-styled-components/package.json new file mode 100644 index 0000000000..f35d3e4b01 --- /dev/null +++ b/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" + } +} diff --git a/packages/plugin-styled-components/src/index.ts b/packages/plugin-styled-components/src/index.ts new file mode 100644 index 0000000000..092eca6d42 --- /dev/null +++ b/packages/plugin-styled-components/src/index.ts @@ -0,0 +1,80 @@ +import { + DefaultRsbuildPlugin, + getDefaultStyledComponentsConfig, + mergeChainedOptions, + ChainedConfig, + useSSR, +} from '@rsbuild/shared'; + +/** + * the options of [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) or [rspackExperiments.styledComponents](https://www.rspack.dev/guide/loader.html#optionsrspackexperimentsstyledcomponents). + */ +type StyledComponentsOptions = { + displayName?: boolean; + ssr?: boolean; + fileName?: boolean; + meaninglessFileNames?: string[]; + namespace?: string; + topLevelImportPaths?: string[]; + transpileTemplateLiterals?: boolean; + minify?: boolean; + pure?: boolean; + cssProps?: boolean; +}; + +export const pluginStyledComponents = ( + userConfig: ChainedConfig = {}, +): DefaultRsbuildPlugin => ({ + name: 'plugin-styled-components', + + setup(api) { + api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd, target }) => { + const { bundlerType } = api.context; + + const isSSR = useSSR(api.context.target); + + const styledComponentsOptions = mergeChainedOptions< + StyledComponentsOptions, + {} + >(getDefaultStyledComponentsConfig(isProd, isSSR), userConfig); + + if (!styledComponentsOptions) { + return; + } + + [CHAIN_ID.RULE.JS, CHAIN_ID.RULE.JS_DATA_URI].forEach((ruleId) => { + if (chain.module.rules.has(ruleId)) { + const rule = chain.module.rule(ruleId); + // apply swc + if (rule.uses.has(CHAIN_ID.USE.SWC)) { + // apply rspack builtin:swc-loader + if (bundlerType === 'rspack') { + rule.use(CHAIN_ID.USE.SWC).tap((options) => { + options.rspackExperiments ??= {}; + options.rspackExperiments.styledComponents = + styledComponentsOptions; + return options; + }); + } else { + // apply webpack swc-plugin + rule.use(CHAIN_ID.USE.SWC).tap((swc) => { + swc.extensions.styledComponents = styledComponentsOptions; + return swc; + }); + } + } else if (rule.uses.has(CHAIN_ID.USE.BABEL)) { + // apply babel + rule.use(CHAIN_ID.USE.BABEL).tap((babelConfig) => { + babelConfig.plugins ??= []; + babelConfig.plugins.push([ + require.resolve('babel-plugin-styled-components'), + styledComponentsOptions, + ]); + return babelConfig; + }); + } + } + }); + }); + }, +}); diff --git a/packages/plugin-styled-components/tests/__snapshots__/index.test.ts.snap b/packages/plugin-styled-components/tests/__snapshots__/index.test.ts.snap new file mode 100644 index 0000000000..98d38bf62a --- /dev/null +++ b/packages/plugin-styled-components/tests/__snapshots__/index.test.ts.snap @@ -0,0 +1,346 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`plugins/styled-components > should enable ssr when target contain node 1`] = ` +{ + "include": [ + { + "and": [ + "", + { + "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/, + }, + ], + }, + ], + "test": /\\\\\\.\\(js\\|mjs\\|cjs\\|jsx\\)\\$\\|\\\\\\.\\(ts\\|mts\\|cts\\|tsx\\)\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "builtin:swc-loader", + "options": { + "env": { + "targets": [ + "node >= 14", + ], + }, + "exclude": [], + "inlineSourcesContent": true, + "isModule": "unknown", + "jsc": { + "externalHelpers": true, + "parser": { + "decorators": true, + "syntax": "typescript", + "tsx": true, + }, + "transform": { + "decoratorMetadata": true, + "legacyDecorator": true, + }, + }, + "minify": false, + "rspackExperiments": { + "styledComponents": { + "displayName": true, + "pure": false, + "ssr": true, + "transpileTemplateLiterals": true, + }, + }, + "sourceMaps": true, + }, + }, + ], +} +`; + +exports[`plugins/styled-components > should enable ssr when target contain node 2`] = ` +{ + "exclude": [ + "/node_modules//core-js", + ], + "include": [ + { + "and": [ + "", + { + "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/, + }, + ], + }, + ], + "test": /\\\\\\.\\(js\\|mjs\\|cjs\\|jsx\\)\\$\\|\\\\\\.\\(ts\\|mts\\|cts\\|tsx\\)\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "builtin:swc-loader", + "options": { + "env": { + "coreJs": "3.32", + "mode": "entry", + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "exclude": [], + "inlineSourcesContent": true, + "isModule": "unknown", + "jsc": { + "externalHelpers": true, + "parser": { + "decorators": true, + "syntax": "typescript", + "tsx": true, + }, + "transform": { + "decoratorMetadata": true, + "legacyDecorator": true, + }, + }, + "minify": false, + "rspackExperiments": { + "styledComponents": { + "displayName": true, + "pure": false, + "ssr": true, + "transpileTemplateLiterals": true, + }, + }, + "sourceMaps": true, + }, + }, + ], +} +`; + +exports[`plugins/styled-components > should works in rspack mode 1`] = ` +{ + "exclude": [ + "/node_modules//core-js", + ], + "include": [ + { + "and": [ + "", + { + "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/, + }, + ], + }, + ], + "test": /\\\\\\.\\(js\\|mjs\\|cjs\\|jsx\\)\\$\\|\\\\\\.\\(ts\\|mts\\|cts\\|tsx\\)\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "builtin:swc-loader", + "options": { + "env": { + "coreJs": "3.32", + "mode": "entry", + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "exclude": [], + "inlineSourcesContent": true, + "isModule": "unknown", + "jsc": { + "externalHelpers": true, + "parser": { + "decorators": true, + "syntax": "typescript", + "tsx": true, + }, + "transform": { + "decoratorMetadata": true, + "legacyDecorator": true, + }, + }, + "minify": false, + "rspackExperiments": { + "styledComponents": { + "displayName": true, + "pure": false, + "ssr": false, + "transpileTemplateLiterals": true, + }, + }, + "sourceMaps": true, + }, + }, + ], +} +`; + +exports[`plugins/styled-components > should works in webpack babel mode 1`] = ` +{ + "include": [ + { + "and": [ + "", + { + "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/, + }, + ], + }, + ], + "test": /\\\\\\.\\(js\\|mjs\\|cjs\\|jsx\\)\\$\\|\\\\\\.\\(ts\\|mts\\|cts\\|tsx\\)\\$/, + "use": [ + { + "loader": "/packages/shared/compiled/babel-loader", + "options": { + "babelrc": false, + "compact": false, + "configFile": false, + "plugins": [ + [ + "/node_modules//@babel/plugin-proposal-decorators/lib/index.js", + { + "version": "legacy", + }, + ], + "/node_modules//@babel/plugin-proposal-export-default-from/lib/index.js", + "/node_modules//@babel/plugin-proposal-partial-application/lib/index.js", + [ + "/node_modules//@babel/plugin-proposal-pipeline-operator/lib/index.js", + { + "proposal": "minimal", + }, + ], + [ + "/node_modules//@babel/plugin-transform-runtime/lib/index.js", + { + "useESModules": true, + "version": "7.23.2", + }, + ], + "/packages/babel-preset/dist/pluginLockCorejsVersion", + [ + "/packages/webpack/compiled/babel-plugin-lodash", + {}, + ], + [ + "/node_modules//babel-plugin-styled-components/lib/index.js", + { + "displayName": true, + "pure": false, + "ssr": false, + "transpileTemplateLiterals": true, + }, + ], + ], + "presets": [ + [ + "/node_modules//@babel/preset-env/lib/index.js", + { + "bugfixes": true, + "corejs": { + "proposals": true, + "version": "3.32", + }, + "exclude": [ + "transform-typeof-symbol", + ], + "modules": "commonjs", + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + "useBuiltIns": "entry", + }, + ], + [ + "/node_modules//@babel/preset-typescript/lib/index.js", + { + "allExtensions": true, + "allowDeclareFields": true, + "allowNamespaces": true, + "isTSX": true, + "optimizeConstEnums": true, + }, + ], + ], + }, + }, + ], +} +`; + +exports[`plugins/styled-components > should works in webpack swc mode 1`] = ` +{ + "include": [ + { + "and": [ + "", + { + "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/, + }, + ], + }, + ], + "test": /\\\\\\.\\(js\\|mjs\\|cjs\\|jsx\\)\\$\\|\\\\\\.\\(ts\\|mts\\|cts\\|tsx\\)\\$/, + "use": [ + { + "loader": "/packages/plugin-swc/dist/loader", + "options": { + "cwd": "", + "env": { + "coreJs": "3.32", + "mode": "entry", + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "extensions": { + "lockCorejsVersion": { + "corejs": "/node_modules//core-js", + "swcHelpers": "/node_modules//@swc/helpers", + }, + "lodash": { + "cwd": "", + "ids": [ + "lodash", + "lodash-es", + ], + }, + "styledComponents": { + "displayName": true, + "pure": false, + "ssr": false, + "transpileTemplateLiterals": true, + }, + }, + "inlineSourcesContent": true, + "jsc": { + "externalHelpers": true, + "parser": { + "decorators": true, + "syntax": "typescript", + "tsx": true, + }, + "preserveAllComments": true, + "transform": { + "react": { + "refresh": true, + "runtime": "classic", + }, + }, + }, + "minify": false, + "sourceMaps": true, + }, + }, + ], +} +`; diff --git a/packages/plugin-styled-components/tests/index.test.ts b/packages/plugin-styled-components/tests/index.test.ts new file mode 100644 index 0000000000..0d4553ac07 --- /dev/null +++ b/packages/plugin-styled-components/tests/index.test.ts @@ -0,0 +1,78 @@ +import { expect, describe, it } from 'vitest'; +import { pluginStyledComponents } from '../src'; +import { createStubRsbuild } from '@rsbuild/test-helper'; +import { mergeRegex, JS_REGEX, TS_REGEX } from '@rsbuild/shared'; +import { webpackProvider } from '@rsbuild/webpack'; +import { pluginSwc } from '@rsbuild/plugin-swc'; + +describe('plugins/styled-components', () => { + it('should enable ssr when target contain node', async () => { + const rsbuild = await createStubRsbuild({ + rsbuildConfig: {}, + target: ['node', 'web'], + }); + + rsbuild.addPlugins([pluginStyledComponents()]); + const configs = await rsbuild.initConfigs(); + + for (const config of configs) { + expect( + config.module.rules.find( + (r) => + r.test.toString() === mergeRegex(JS_REGEX, TS_REGEX).toString(), + ), + ).toMatchSnapshot(); + } + }); + + it('should works in rspack mode', async () => { + const rsbuild = await createStubRsbuild({ + rsbuildConfig: {}, + }); + + rsbuild.addPlugins([pluginStyledComponents()]); + const config = await rsbuild.unwrapConfig(); + + expect( + config.module.rules.find( + (r) => r.test.toString() === mergeRegex(JS_REGEX, TS_REGEX).toString(), + ), + ).toMatchSnapshot(); + }); + + it('should works in webpack babel mode', async () => { + const rsbuild = await createStubRsbuild({ + rsbuildConfig: {}, + provider: webpackProvider, + }); + + rsbuild.addPlugins([pluginStyledComponents()]); + const config = await rsbuild.unwrapConfig(); + + expect( + config.module.rules.find( + (r) => + r.test && + r.test.toString() === mergeRegex(JS_REGEX, TS_REGEX).toString(), + ), + ).toMatchSnapshot(); + }); + + it('should works in webpack swc mode', async () => { + const rsbuild = await createStubRsbuild({ + rsbuildConfig: {}, + provider: webpackProvider, + }); + + rsbuild.addPlugins([pluginSwc(), pluginStyledComponents()]); + const config = await rsbuild.unwrapConfig(); + + expect( + config.module.rules.find( + (r) => + r.test && + r.test.toString() === mergeRegex(JS_REGEX, TS_REGEX).toString(), + ), + ).toMatchSnapshot(); + }); +}); diff --git a/packages/plugin-styled-components/tsconfig.json b/packages/plugin-styled-components/tsconfig.json new file mode 100644 index 0000000000..63a57a9d30 --- /dev/null +++ b/packages/plugin-styled-components/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "@rsbuild/tsconfig/base", + "compilerOptions": { + "outDir": "./dist", + "baseUrl": "./" + }, + "include": ["src"], + "exclude": ["./tests/fixtures"] +} diff --git a/packages/plugin-swc/src/plugin.ts b/packages/plugin-swc/src/plugin.ts index 03c9b1e331..2dd6e6cc74 100644 --- a/packages/plugin-swc/src/plugin.ts +++ b/packages/plugin-swc/src/plugin.ts @@ -31,7 +31,7 @@ export const pluginSwc = (options: PluginSwcOptions = {}): RsbuildPlugin => ({ return; } - api.modifyWebpackChain(async (chain, utils) => { + api.modifyBundlerChain(async (chain, utils) => { const { CHAIN_ID, isProd } = utils; const rsbuildConfig = api.getNormalizedConfig(); const { rootPath } = api.context; diff --git a/packages/plugin-swc/src/utils.ts b/packages/plugin-swc/src/utils.ts index f15c8423b4..410587a390 100644 --- a/packages/plugin-swc/src/utils.ts +++ b/packages/plugin-swc/src/utils.ts @@ -5,10 +5,9 @@ import { isUsingHMR, isBeyondReact17, getCoreJsVersion, - mergeChainedOptions, getBrowserslistWithDefault, - getDefaultStyledComponentsConfig, type ModifyChainUtils, + getDefaultStyledComponentsConfig, } from '@rsbuild/shared'; import { Extensions } from '@modern-js/swc-plugins'; import { getDefaultSwcConfig } from './plugin'; @@ -176,16 +175,10 @@ export async function applyPluginConfig( const isSSR = target === 'node'; - if ( - rsbuildConfig.tools.styledComponents !== false && - swc.extensions?.styledComponents !== false - ) { - const styledComponentsOptions = mergeChainedOptions( - getDefaultStyledComponentsConfig(isProd, isSSR), - rsbuildConfig.tools.styledComponents, - ); + // compat builder-plugin-swc extensions.styledComponents params + if (swc.extensions?.styledComponents) { swc.extensions.styledComponents = { - ...styledComponentsOptions, + ...getDefaultStyledComponentsConfig(isProd, isSSR), ...(typeof swc.extensions.styledComponents === 'object' ? swc.extensions?.styledComponents : {}), diff --git a/packages/plugin-swc/tests/__snapshots__/plugin.test.ts.snap b/packages/plugin-swc/tests/__snapshots__/plugin.test.ts.snap index e28ccd9024..2a20f63204 100644 --- a/packages/plugin-swc/tests/__snapshots__/plugin.test.ts.snap +++ b/packages/plugin-swc/tests/__snapshots__/plugin.test.ts.snap @@ -47,12 +47,6 @@ exports[`plugin-swc > should apply source.include and source.exclude correctly 1 "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -110,12 +104,6 @@ exports[`plugin-swc > should apply source.include and source.exclude correctly 1 "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -176,12 +164,6 @@ exports[`plugin-swc > should disable react refresh when dev.hmr is false 1`] = ` "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -238,12 +220,6 @@ exports[`plugin-swc > should disable react refresh when target is not web 1`] = "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": true, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -303,12 +279,6 @@ exports[`plugin-swc > should disable react refresh when target is not web 2`] = "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -368,12 +338,6 @@ exports[`plugin-swc > should disable react refresh when target is not web 3`] = "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -433,12 +397,6 @@ exports[`plugin-swc > should disable react refresh when target is not web 4`] = "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -541,12 +499,6 @@ exports[`plugin-swc > should set multiple swc-loader 1`] = ` "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -605,12 +557,6 @@ exports[`plugin-swc > should set multiple swc-loader 1`] = ` "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -664,12 +610,6 @@ exports[`plugin-swc > should set multiple swc-loader 1`] = ` "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -757,12 +697,6 @@ exports[`plugin-swc > should set swc-loader 1`] = ` "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { @@ -820,12 +754,6 @@ exports[`plugin-swc > should set swc-loader 1`] = ` "lodash-es", ], }, - "styledComponents": { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, }, "inlineSourcesContent": true, "jsc": { diff --git a/packages/plugin-vue-jsx/tests/__snapshots__/index.test.ts.snap b/packages/plugin-vue-jsx/tests/__snapshots__/index.test.ts.snap index 31180e8cf3..51d115297f 100644 --- a/packages/plugin-vue-jsx/tests/__snapshots__/index.test.ts.snap +++ b/packages/plugin-vue-jsx/tests/__snapshots__/index.test.ts.snap @@ -50,15 +50,6 @@ exports[`plugin-vue-jsx > should allow to configure jsx babel plugin options 1`] "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], [ "/node_modules//@vue/babel-plugin-jsx/dist/index.js", { @@ -144,15 +135,6 @@ exports[`plugin-vue-jsx > should allow to configure jsx babel plugin options 1`] "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], [ "/node_modules//@vue/babel-plugin-jsx/dist/index.js", { @@ -252,15 +234,6 @@ exports[`plugin-vue-jsx > should apply jsx babel plugin correctly 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], [ "/node_modules//@vue/babel-plugin-jsx/dist/index.js", {}, @@ -344,15 +317,6 @@ exports[`plugin-vue-jsx > should apply jsx babel plugin correctly 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], [ "/node_modules//@vue/babel-plugin-jsx/dist/index.js", {}, diff --git a/packages/plugin-vue2-jsx/tests/__snapshots__/index.test.ts.snap b/packages/plugin-vue2-jsx/tests/__snapshots__/index.test.ts.snap index e7d1360c18..c0344a3e14 100644 --- a/packages/plugin-vue2-jsx/tests/__snapshots__/index.test.ts.snap +++ b/packages/plugin-vue2-jsx/tests/__snapshots__/index.test.ts.snap @@ -50,15 +50,6 @@ exports[`plugin-vue2-jsx > should allow to configure jsx babel plugin options 1` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -144,15 +135,6 @@ exports[`plugin-vue2-jsx > should allow to configure jsx babel plugin options 1` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -252,15 +234,6 @@ exports[`plugin-vue2-jsx > should apply jsx babel plugin correctly 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -346,15 +319,6 @@ exports[`plugin-vue2-jsx > should apply jsx babel plugin correctly 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ diff --git a/packages/shared/src/types/bundlerConfig.ts b/packages/shared/src/types/bundlerConfig.ts index 13aefe7c83..85faba613b 100644 --- a/packages/shared/src/types/bundlerConfig.ts +++ b/packages/shared/src/types/bundlerConfig.ts @@ -207,7 +207,10 @@ export interface BundlerChain keyof WebpackChain['infrastructureLogging'] > >; - module: PickAndModifyThis; + module: PickAndModifyThis< + WebpackChain['module'], + 'rules' | 'rule' | 'delete' + >; } export type WebpackChainRule = WebpackChain.Rule; diff --git a/packages/shared/src/utils.ts b/packages/shared/src/utils.ts index ea0fd84ca0..07507c89ec 100644 --- a/packages/shared/src/utils.ts +++ b/packages/shared/src/utils.ts @@ -157,3 +157,9 @@ export const isBeyondReact17 = (cwd: string) => { return semver.satisfies(semver.minVersion(deps.react)!, '>=17.0.0'); }; + +export function useSSR(target: RsbuildTarget | RsbuildTarget[]) { + return (Array.isArray(target) ? target : [target]).some((item) => + ['node', 'service-worker'].includes(item), + ); +} diff --git a/packages/webpack/package.json b/packages/webpack/package.json index 11eb7d3280..cacb2f97f3 100644 --- a/packages/webpack/package.json +++ b/packages/webpack/package.json @@ -62,7 +62,6 @@ "@rsbuild/babel-preset": "workspace:*", "@rsbuild/shared": "workspace:*", "babel-plugin-import": "1.13.5", - "babel-plugin-styled-components": "1.13.3", "caniuse-lite": "^1.0.30001520", "html-webpack-plugin": "5.5.3", "lodash": "^4.17.21", diff --git a/packages/webpack/src/config/validate/tools.ts b/packages/webpack/src/config/validate/tools.ts index c8fb45c478..ddaf25c6bd 100644 --- a/packages/webpack/src/config/validate/tools.ts +++ b/packages/webpack/src/config/validate/tools.ts @@ -24,7 +24,6 @@ export const toolsConfigSchema: z.ZodType = sharedToolsConfigSchema z.any(), z.object({ entryName: z.string(), entryValue: z.any() }), ), - styledComponents: z.chained(z.any()), cssLoader: z.chained(z.any(), z.object({ addPlugins: z.function() })), styleLoader: z.chained(z.any()), cssExtract: z.partialObj({ diff --git a/packages/webpack/src/plugins/babel.ts b/packages/webpack/src/plugins/babel.ts index e55eb533f8..f4a1045043 100644 --- a/packages/webpack/src/plugins/babel.ts +++ b/packages/webpack/src/plugins/babel.ts @@ -11,8 +11,6 @@ import { mergeChainedOptions, applyScriptCondition, getBrowserslistWithDefault, - getDefaultStyledComponentsConfig, - type RsbuildTarget, } from '@rsbuild/shared'; import { getCompiledPath } from '../shared'; @@ -100,12 +98,6 @@ export const pluginBabel = (): RsbuildPlugin => ({ baseBabelConfig, config.performance.transformLodash, ); - applyPluginStyledComponents( - baseBabelConfig, - config, - isProd, - api.context.target, - ); const babelConfig = mergeChainedOptions( baseBabelConfig, @@ -185,31 +177,6 @@ function applyPluginLodash(config: BabelConfig, transformLodash?: boolean) { } } -function applyPluginStyledComponents( - babelConfig: BabelConfig, - rsbuildConfig: NormalizedConfig, - isProd: boolean, - target: RsbuildTarget | RsbuildTarget[], -) { - const enableSSROption = - target === 'node' || (Array.isArray(target) && target.includes('node')); - - const styledComponentsOptions = - rsbuildConfig.tools.styledComponents !== false - ? mergeChainedOptions( - getDefaultStyledComponentsConfig(isProd, enableSSROption), - rsbuildConfig.tools.styledComponents, - ) - : false; - - if (styledComponentsOptions) { - babelConfig.plugins?.push([ - require.resolve('babel-plugin-styled-components'), - styledComponentsOptions, - ]); - } -} - function applyPluginImport( config: BabelConfig, pluginImport?: false | TransformImport[], diff --git a/packages/webpack/src/types/config/tools.ts b/packages/webpack/src/types/config/tools.ts index 512adf3dde..fb82c98a77 100644 --- a/packages/webpack/src/types/config/tools.ts +++ b/packages/webpack/src/types/config/tools.ts @@ -27,20 +27,6 @@ export type ToolsTSLoaderConfig = ChainedConfig< { addIncludes: FileFilterUtil; addExcludes: FileFilterUtil } >; -export interface StyledComponentOptions { - pure?: boolean; - displayName?: boolean; - ssr?: boolean; - fileName?: boolean; - meaninglessFileNames?: string[]; - minify?: boolean; - transpileTemplateLiterals?: boolean; - namespace?: string; - topLevelImportPaths?: string[]; -} - -export type ToolsStyledComponentConfig = ChainedConfig; - export type ToolsCssExtractConfig = | CSSExtractOptions | ((options: CSSExtractOptions) => CSSExtractOptions | void); @@ -85,10 +71,6 @@ export interface ToolsConfig extends SharedToolsConfig { * Modify the options of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin). */ htmlPlugin?: false | ToolsHtmlPluginConfig; - /** - * Modify the options of [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components). - */ - styledComponents?: false | ToolsStyledComponentConfig; /** * Modify the options of [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin). */ diff --git a/packages/webpack/tests/__snapshots__/webpackConfig.test.ts.snap b/packages/webpack/tests/__snapshots__/webpackConfig.test.ts.snap index 13fd68a196..cf12a918d0 100644 --- a/packages/webpack/tests/__snapshots__/webpackConfig.test.ts.snap +++ b/packages/webpack/tests/__snapshots__/webpackConfig.test.ts.snap @@ -240,15 +240,6 @@ exports[`webpackConfig > should not have any pluginImport in Babel 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -328,15 +319,6 @@ exports[`webpackConfig > should not have any pluginImport in Babel 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -426,15 +408,6 @@ exports[`webpackConfig > should not set default pluginImport for Babel 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -514,15 +487,6 @@ exports[`webpackConfig > should not set default pluginImport for Babel 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -643,15 +607,6 @@ exports[`webpackConfig > should set proper pluginImport option in Babel 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -739,15 +694,6 @@ exports[`webpackConfig > should set proper pluginImport option in Babel 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ diff --git a/packages/webpack/tests/plugins/__snapshots__/babel.test.ts.snap b/packages/webpack/tests/plugins/__snapshots__/babel.test.ts.snap index 3076cd226f..a715fee802 100644 --- a/packages/webpack/tests/plugins/__snapshots__/babel.test.ts.snap +++ b/packages/webpack/tests/plugins/__snapshots__/babel.test.ts.snap @@ -59,15 +59,6 @@ exports[`plugin-babel > should add rule to compile Data URI when enable source.c "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -147,15 +138,6 @@ exports[`plugin-babel > should add rule to compile Data URI when enable source.c "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -242,15 +224,6 @@ exports[`plugin-babel > should adjust browserslist when target is node 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": true, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -314,15 +287,6 @@ exports[`plugin-babel > should adjust browserslist when target is node 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": true, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -410,15 +374,6 @@ exports[`plugin-babel > should apply exclude condition when using source.exclude "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -498,15 +453,6 @@ exports[`plugin-babel > should apply exclude condition when using source.exclude "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -608,15 +554,6 @@ exports[`plugin-babel > should override targets of babel-preset-env when using o "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -693,15 +630,6 @@ exports[`plugin-babel > should override targets of babel-preset-env when using o "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -792,15 +720,6 @@ exports[`plugin-babel > should set babel-loader 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -880,15 +799,6 @@ exports[`plugin-babel > should set babel-loader 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -986,15 +896,6 @@ exports[`plugin-babel > should set include/exclude 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -1074,15 +975,6 @@ exports[`plugin-babel > should set include/exclude 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ diff --git a/packages/webpack/tests/plugins/__snapshots__/default.test.ts.snap b/packages/webpack/tests/plugins/__snapshots__/default.test.ts.snap index 23f651fc3a..9d9af1bbd7 100644 --- a/packages/webpack/tests/plugins/__snapshots__/default.test.ts.snap +++ b/packages/webpack/tests/plugins/__snapshots__/default.test.ts.snap @@ -256,15 +256,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -347,15 +338,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": false, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -969,15 +951,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": true, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -1060,15 +1033,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": true, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -1737,15 +1701,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": true, - "ssr": true, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -1812,15 +1767,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": true, - "ssr": true, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -2322,15 +2268,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": true, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ @@ -2413,15 +2350,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "/packages/webpack/compiled/babel-plugin-lodash", {}, ], - [ - "/node_modules//babel-plugin-styled-components/lib/index.js", - { - "displayName": true, - "pure": true, - "ssr": false, - "transpileTemplateLiterals": true, - }, - ], ], "presets": [ [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 27c019783f..c18d70a994 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -227,6 +227,9 @@ importers: e2e/cases/styled-component: dependencies: + '@rsbuild/plugin-styled-components': + specifier: workspace:* + version: link:../../../packages/plugin-styled-components styled-components: specifier: ^6.0.0 version: 6.1.0(react-dom@18.2.0)(react@18.2.0) @@ -557,6 +560,34 @@ importers: specifier: ^5 version: 5.2.2 + packages/plugin-styled-components: + dependencies: + '@rsbuild/shared': + specifier: workspace:* + version: link:../shared + babel-plugin-styled-components: + specifier: 1.13.3 + version: 1.13.3(styled-components@6.1.0) + devDependencies: + '@rsbuild/core': + specifier: workspace:* + version: link:../core + '@rsbuild/plugin-swc': + specifier: workspace:* + version: link:../plugin-swc + '@rsbuild/test-helper': + specifier: workspace:* + version: link:../test-helper + '@rsbuild/webpack': + specifier: workspace:* + version: link:../webpack + '@types/node': + specifier: ^16 + version: 16.18.59 + typescript: + specifier: ^5 + version: 5.2.2 + packages/plugin-stylus: dependencies: '@rsbuild/shared': @@ -925,9 +956,6 @@ importers: babel-plugin-import: specifier: 1.13.5 version: 1.13.5 - babel-plugin-styled-components: - specifier: 1.13.3 - version: 1.13.3(styled-components@6.1.0) caniuse-lite: specifier: ^1.0.30001520 version: 1.0.30001551