diff --git a/e2e/cases/esm-exports/test.mjs b/e2e/cases/esm-exports/test.mjs index 6c36d5c59d..adbc9d788a 100644 --- a/e2e/cases/esm-exports/test.mjs +++ b/e2e/cases/esm-exports/test.mjs @@ -6,7 +6,6 @@ import { pluginReact } from '@rsbuild/plugin-react'; import { pluginRem } from '@rsbuild/plugin-rem'; import { pluginSass } from '@rsbuild/plugin-sass'; import { pluginSolid } from '@rsbuild/plugin-solid'; -import { pluginStyledComponents } from '@rsbuild/plugin-styled-components'; import { pluginStylus } from '@rsbuild/plugin-stylus'; import { pluginSvelte } from '@rsbuild/plugin-svelte'; import { pluginSvgr } from '@rsbuild/plugin-svgr'; @@ -30,7 +29,6 @@ export default { pluginSolid, pluginStylus, pluginSvelte, - pluginStyledComponents, pluginTypeCheck, pluginVue, pluginVue2, diff --git a/e2e/cases/styled-component/package.json b/e2e/cases/styled-component/package.json index 9d9f69c25e..c20499687e 100644 --- a/e2e/cases/styled-component/package.json +++ b/e2e/cases/styled-component/package.json @@ -3,6 +3,6 @@ "private": true, "dependencies": { "styled-components": "^6.1.12", - "@rsbuild/plugin-styled-components": "workspace:*" + "@rsbuild/plugin-styled-components": "^1.0.1" } } diff --git a/e2e/package.json b/e2e/package.json index e45c82edbb..236ae71f3f 100644 --- a/e2e/package.json +++ b/e2e/package.json @@ -31,7 +31,6 @@ "@rsbuild/plugin-rem": "workspace:*", "@rsbuild/plugin-sass": "workspace:*", "@rsbuild/plugin-solid": "workspace:*", - "@rsbuild/plugin-styled-components": "workspace:*", "@rsbuild/plugin-stylus": "workspace:*", "@rsbuild/plugin-svelte": "workspace:*", "@rsbuild/plugin-svgr": "workspace:*", diff --git a/packages/plugin-styled-components/LICENSE b/packages/plugin-styled-components/LICENSE deleted file mode 100644 index 82d38c25b5..0000000000 --- a/packages/plugin-styled-components/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -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 deleted file mode 100644 index 92531b7215..0000000000 --- a/packages/plugin-styled-components/README.md +++ /dev/null @@ -1,19 +0,0 @@ -

- Rsbuild Logo -

- -# Rsbuild - -The Rspack-based build tool. It's fast, out-of-the-box and extensible. - -## 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 deleted file mode 100644 index aa96b2c676..0000000000 --- a/packages/plugin-styled-components/modern.config.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { configForSeparateTypesPackage } from '@rsbuild/config/modern.config.ts'; - -export default configForSeparateTypesPackage; diff --git a/packages/plugin-styled-components/package.json b/packages/plugin-styled-components/package.json deleted file mode 100644 index 46bfc1b3ff..0000000000 --- a/packages/plugin-styled-components/package.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "name": "@rsbuild/plugin-styled-components", - "version": "1.0.1-beta.11", - "description": "styled-components plugin for Rsbuild", - "repository": { - "type": "git", - "url": "https://github.com/web-infra-dev/rsbuild", - "directory": "packages/plugin-styled-components" - }, - "license": "MIT", - "type": "module", - "exports": { - ".": { - "types": "./dist-types/index.d.ts", - "import": "./dist/index.js", - "require": "./dist/index.cjs" - } - }, - "main": "./dist/index.cjs", - "types": "./dist-types/index.d.ts", - "files": [ - "dist", - "dist-types" - ], - "scripts": { - "build": "modern build", - "dev": "modern build --watch" - }, - "dependencies": { - "@swc/plugin-styled-components": "2.0.11", - "reduce-configs": "^1.0.0" - }, - "devDependencies": { - "@rsbuild/core": "workspace:*", - "@types/node": "18.x", - "typescript": "^5.5.2" - }, - "peerDependencies": { - "@rsbuild/core": "workspace:^1.0.1-beta.11" - }, - "publishConfig": { - "access": "public", - "provenance": true, - "registry": "https://registry.npmjs.org/" - } -} diff --git a/packages/plugin-styled-components/src/index.ts b/packages/plugin-styled-components/src/index.ts deleted file mode 100644 index 2e47fcd890..0000000000 --- a/packages/plugin-styled-components/src/index.ts +++ /dev/null @@ -1,100 +0,0 @@ -import type { - MergedEnvironmentConfig, - RsbuildConfig, - RsbuildPlugin, - RsbuildTarget, -} from '@rsbuild/core'; -import { type ConfigChain, reduceConfigs } from 'reduce-configs'; - -/** - * The options of [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components). - */ -export type PluginStyledComponentsOptions = { - displayName?: boolean; - ssr?: boolean; - fileName?: boolean; - meaninglessFileNames?: string[]; - namespace?: string; - topLevelImportPaths?: string[]; - transpileTemplateLiterals?: boolean; - minify?: boolean; - pure?: boolean; - cssProps?: boolean; -}; - -function isServerTarget(target: RsbuildTarget[]) { - return Array.isArray(target) ? target.includes('node') : target === 'node'; -} - -const getDefaultStyledComponentsConfig = (isProd: boolean, ssr: boolean) => { - return { - ssr, - // "pure" is used to improve dead code elimination in production. - // we don't need to enable it in development because it will slow down the build process. - pure: isProd, - displayName: true, - transpileTemplateLiterals: true, - }; -}; - -export const PLUGIN_STYLED_COMPONENTS_NAME = 'rsbuild:styled-components'; - -export const pluginStyledComponents = ( - pluginOptions: ConfigChain = {}, -): RsbuildPlugin => ({ - name: PLUGIN_STYLED_COMPONENTS_NAME, - - setup(api) { - if (api.context.bundlerType === 'webpack') { - return; - } - - const getMergedOptions = ( - useSSR: boolean, - config: MergedEnvironmentConfig, - ) => { - const isProd = config.mode === 'production'; - - return reduceConfigs({ - initial: getDefaultStyledComponentsConfig(isProd, useSSR), - config: pluginOptions, - }); - }; - - api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig }) => { - const rsbuildConfig = api.getRsbuildConfig(); - - const targets = rsbuildConfig.environments - ? Object.values(rsbuildConfig.environments).map( - (e) => e.output?.target || userConfig.output?.target || 'web', - ) - : [userConfig.output?.target || 'web']; - - const useSSR = isServerTarget(targets); - - const mergedOptions = getMergedOptions(useSSR, userConfig); - if (!mergedOptions) { - return userConfig; - } - - const extraConfig: RsbuildConfig = { - tools: { - swc: { - jsc: { - experimental: { - plugins: [ - [ - require.resolve('@swc/plugin-styled-components'), - mergedOptions, - ], - ], - }, - }, - }, - }, - }; - - return mergeEnvironmentConfig(extraConfig, userConfig); - }); - }, -}); diff --git a/packages/plugin-styled-components/tests/__snapshots__/index.test.ts.snap b/packages/plugin-styled-components/tests/__snapshots__/index.test.ts.snap deleted file mode 100644 index ec256ed490..0000000000 --- a/packages/plugin-styled-components/tests/__snapshots__/index.test.ts.snap +++ /dev/null @@ -1,183 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`plugins/styled-components > should apply styledComponents option to swc-loader 1`] = ` -{ - "include": [ - { - "and": [ - "", - { - "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/, - }, - ], - }, - /\\\\\\.\\(\\?:ts\\|tsx\\|jsx\\|mts\\|cts\\)\\$/, - ], - "test": /\\\\\\.\\(\\?:js\\|jsx\\|mjs\\|cjs\\|ts\\|tsx\\|mts\\|cts\\)\\$/, - "type": "javascript/auto", - "use": [ - { - "loader": "builtin:swc-loader", - "options": { - "env": { - "mode": undefined, - "targets": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "isModule": "unknown", - "jsc": { - "experimental": { - "cacheRoot": "/node_modules/.cache/.swc", - "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, - "syntax": "typescript", - "tsx": false, - }, - "preserveAllComments": true, - "transform": { - "decoratorVersion": "2022-03", - "legacyDecorator": false, - }, - }, - }, - }, - ], -} -`; - -exports[`plugins/styled-components > should enable ssr option when target contains node 1`] = ` -{ - "include": [ - { - "and": [ - "", - { - "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/, - }, - ], - }, - /\\\\\\.\\(\\?:ts\\|tsx\\|jsx\\|mts\\|cts\\)\\$/, - ], - "test": /\\\\\\.\\(\\?:js\\|jsx\\|mjs\\|cjs\\|ts\\|tsx\\|mts\\|cts\\)\\$/, - "type": "javascript/auto", - "use": [ - { - "loader": "builtin:swc-loader", - "options": { - "env": { - "targets": [ - "node >= 16", - ], - }, - "isModule": "unknown", - "jsc": { - "experimental": { - "cacheRoot": "/node_modules/.cache/.swc", - "plugins": [ - [ - "/node_modules//@swc/plugin-styled-components/swc_plugin_styled_components.wasm", - { - "displayName": true, - "pure": false, - "ssr": true, - "transpileTemplateLiterals": true, - }, - ], - ], - }, - "externalHelpers": true, - "parser": { - "decorators": true, - "syntax": "typescript", - "tsx": false, - }, - "preserveAllComments": true, - "transform": { - "decoratorVersion": "2022-03", - "legacyDecorator": false, - }, - }, - }, - }, - ], -} -`; - -exports[`plugins/styled-components > should enable ssr option when target contains node 2`] = ` -{ - "include": [ - { - "and": [ - "", - { - "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/, - }, - ], - }, - /\\\\\\.\\(\\?:ts\\|tsx\\|jsx\\|mts\\|cts\\)\\$/, - ], - "test": /\\\\\\.\\(\\?:js\\|jsx\\|mjs\\|cjs\\|ts\\|tsx\\|mts\\|cts\\)\\$/, - "type": "javascript/auto", - "use": [ - { - "loader": "builtin:swc-loader", - "options": { - "env": { - "mode": undefined, - "targets": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "isModule": "unknown", - "jsc": { - "experimental": { - "cacheRoot": "/node_modules/.cache/.swc", - "plugins": [ - [ - "/node_modules//@swc/plugin-styled-components/swc_plugin_styled_components.wasm", - { - "displayName": true, - "pure": false, - "ssr": true, - "transpileTemplateLiterals": true, - }, - ], - ], - }, - "externalHelpers": true, - "parser": { - "decorators": true, - "syntax": "typescript", - "tsx": false, - }, - "preserveAllComments": true, - "transform": { - "decoratorVersion": "2022-03", - "legacyDecorator": false, - }, - }, - }, - }, - ], -} -`; diff --git a/packages/plugin-styled-components/tests/index.test.ts b/packages/plugin-styled-components/tests/index.test.ts deleted file mode 100644 index 7c3b621bbe..0000000000 --- a/packages/plugin-styled-components/tests/index.test.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { createRsbuild } from '@rsbuild/core'; -import { matchRules } from '@scripts/test-helper'; -import { describe, expect, it } from 'vitest'; -import { pluginStyledComponents } from '../src'; - -describe('plugins/styled-components', () => { - it('should apply styledComponents option to swc-loader', async () => { - const rsbuild = await createRsbuild({ - rsbuildConfig: { - plugins: [pluginStyledComponents()], - }, - }); - - const configs = await rsbuild.initConfigs(); - expect(matchRules(configs[0], 'a.tsx')[0]).toMatchSnapshot(); - }); - - it('should enable ssr option when target contains node', async () => { - const rsbuild = await createRsbuild({ - rsbuildConfig: { - environments: { - node: { - output: { - target: 'node', - }, - }, - web: { - output: { - target: 'web', - }, - }, - }, - plugins: [pluginStyledComponents()], - }, - }); - - const configs = await rsbuild.initConfigs(); - - for (const config of configs) { - expect(matchRules(config, 'a.tsx')[0]).toMatchSnapshot(); - } - }); -}); diff --git a/packages/plugin-styled-components/tsconfig.json b/packages/plugin-styled-components/tsconfig.json deleted file mode 100644 index c695a9910b..0000000000 --- a/packages/plugin-styled-components/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "@rsbuild/config/tsconfig", - "compilerOptions": { - "outDir": "./dist", - "baseUrl": "./", - "rootDir": "src", - "composite": true, - "isolatedDeclarations": true - }, - "references": [ - { - "path": "../core" - } - ], - "include": ["src"] -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f28475a541..9458e9ed3d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -127,9 +127,6 @@ importers: '@rsbuild/plugin-solid': specifier: workspace:* version: link:../packages/plugin-solid - '@rsbuild/plugin-styled-components': - specifier: workspace:* - version: link:../packages/plugin-styled-components '@rsbuild/plugin-stylus': specifier: workspace:* version: link:../packages/plugin-stylus @@ -254,8 +251,8 @@ importers: e2e/cases/styled-component: dependencies: '@rsbuild/plugin-styled-components': - specifier: workspace:* - version: link:../../../packages/plugin-styled-components + specifier: ^1.0.1 + version: 1.0.1 styled-components: specifier: ^6.1.12 version: 6.1.12(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614) @@ -1027,25 +1024,6 @@ importers: specifier: ^5.5.2 version: 5.5.2 - packages/plugin-styled-components: - dependencies: - '@swc/plugin-styled-components': - specifier: 2.0.11 - version: 2.0.11 - reduce-configs: - specifier: ^1.0.0 - version: 1.0.0 - devDependencies: - '@rsbuild/core': - specifier: link:../core - version: link:../core - '@types/node': - specifier: 18.x - version: 18.19.31 - typescript: - specifier: ^5.5.2 - version: 5.5.2 - packages/plugin-stylus: dependencies: deepmerge: @@ -2828,6 +2806,14 @@ packages: '@rsbuild/core': optional: true + '@rsbuild/plugin-styled-components@1.0.1': + resolution: {integrity: sha512-1NL0yu5yr7S9wv4xTBYE++CaCved96yoAyd+r/xu4dGfi0w+BrshHNDrPwYBKPX+DC3NZrHGMIsfvpy3QmtloA==} + peerDependencies: + '@rsbuild/core': link:packages/core + peerDependenciesMeta: + '@rsbuild/core': + optional: true + '@rspack/binding-darwin-arm64@1.0.0-beta.4': resolution: {integrity: sha512-A5FLhVmvuz8E/r0C29UODXk44wNTZX/vcMerSSQ/V53rGndPOR5mU6jOTy1ziGZ5liDCKWfobmd7Xe7Qj+oR4g==} cpu: [arm64] @@ -9513,6 +9499,11 @@ snapshots: optionalDependencies: '@rsbuild/core': link:packages/core + '@rsbuild/plugin-styled-components@1.0.1': + dependencies: + '@swc/plugin-styled-components': 2.0.11 + reduce-configs: 1.0.0 + '@rspack/binding-darwin-arm64@1.0.0-beta.4': optional: true diff --git a/website/docs/en/guide/framework/react.mdx b/website/docs/en/guide/framework/react.mdx index 5b5f8f5867..d12af54709 100644 --- a/website/docs/en/guide/framework/react.mdx +++ b/website/docs/en/guide/framework/react.mdx @@ -147,7 +147,7 @@ export default defineConfig({ Rsbuild supports compiling [styled-components](https://github.com/styled-components/styled-components), improve the debugging experience and add server-side rendering support to styled-components. -If you need to use styled-components, We recommend register the [Styled Components plugin](/plugins/list/plugin-styled-components). +If you need to use styled-components, We recommend using the [@rsbuild/plugin-styled-components](https://github.com/rsbuild-contrib/rsbuild-plugin-styled-components). > You can refer to this example: [styled-components](https://github.com/rspack-contrib/rspack-examples/tree/main/rsbuild/styled-components). diff --git a/website/docs/en/guide/migration/webpack.mdx b/website/docs/en/guide/migration/webpack.mdx index 8711694f80..1a9a8d495b 100644 --- a/website/docs/en/guide/migration/webpack.mdx +++ b/website/docs/en/guide/migration/webpack.mdx @@ -124,27 +124,27 @@ export default { Most of the common webpack loaders and plugins can still be used in Rsbuild, but we recommend prioritizing the plugins provided by Rsbuild. This can further simplify your configuration. Below is their mapping relationship: -| webpack | Rsbuild | -| ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -| [@babel/preset-react](https://www.npmjs.com/package/@babel/preset-react) | [React Plugin](/plugins/list/plugin-react) | -| [vue-loader](https://www.npmjs.com/package/vue-loader) | [Vue Plugin](/plugins/list/plugin-vue) or [Vue 2 Plugin](/plugins/list/plugin-vue2) | -| [svelte-loader](https://www.npmjs.com/package/svelte-loader) | [Svelte Plugin](/plugins/list/plugin-svelte) | -| [babel-preset-solid](https://www.npmjs.com/package/babel-preset-solid) | [Solid Plugin](/plugins/list/plugin-solid) | -| [babel-loader](https://www.npmjs.com/package/babel-loader) | [Babel Plugin](/plugins/list/plugin-babel) | -| [sass-loader](https://www.npmjs.com/package/sass-loader) | [Sass Plugin](/plugins/list/plugin-sass) | -| [less-loader](https://www.npmjs.com/package/less-loader) | [Less Plugin](/plugins/list/plugin-less) | -| [stylus-loader](https://www.npmjs.com/package/stylus-loader) | [Stylus Plugin](/plugins/list/plugin-stylus) | -| [mdx-loader](https://www.npmjs.com/package/mdx-loader) | [MDX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-mdx) | -| [pug-loader](https://www.npmjs.com/package/pug-loader) | [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug) | -| [yaml-loader](https://www.npmjs.com/package/yaml-loader) | [Yaml Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml) | -| [toml-loader](https://www.npmjs.com/package/toml-loader) | [Toml Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml) | -| [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) | [SVGR Plugin](/plugins/list/plugin-svgr) | -| [fork-ts-checker-webpack-plugin](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin) | [Type Check Plugin](/plugins/list/plugin-type-check) | -| [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) | [Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | -| [@vue/babel-plugin-jsx](https://www.npmjs.com/package/@vue/babel-plugin-jsx) | [Vue JSX Plugin](/plugins/list/plugin-vue-jsx) | -| [@vue/babel-preset-jsx](https://www.npmjs.com/package/@vue/babel-preset-jsx) | [Vue 2 JSX Plugin](/plugins/list/plugin-vue2-jsx) | -| [eslint-webpack-plugin](https://www.npmjs.com/package/eslint-webpack-plugin) | [ESLint Plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint) | -| [babel-plugin-styled-components](https://www.npmjs.com/package/babel-plugin-styled-components) | [Styled Components Plugin](/plugins/list/plugin-styled-components) | +| webpack | Rsbuild | +| ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | +| [@babel/preset-react](https://www.npmjs.com/package/@babel/preset-react) | [React Plugin](/plugins/list/plugin-react) | +| [vue-loader](https://www.npmjs.com/package/vue-loader) | [Vue Plugin](/plugins/list/plugin-vue) or [Vue 2 Plugin](/plugins/list/plugin-vue2) | +| [svelte-loader](https://www.npmjs.com/package/svelte-loader) | [Svelte Plugin](/plugins/list/plugin-svelte) | +| [babel-preset-solid](https://www.npmjs.com/package/babel-preset-solid) | [Solid Plugin](/plugins/list/plugin-solid) | +| [babel-loader](https://www.npmjs.com/package/babel-loader) | [Babel Plugin](/plugins/list/plugin-babel) | +| [sass-loader](https://www.npmjs.com/package/sass-loader) | [Sass Plugin](/plugins/list/plugin-sass) | +| [less-loader](https://www.npmjs.com/package/less-loader) | [Less Plugin](/plugins/list/plugin-less) | +| [stylus-loader](https://www.npmjs.com/package/stylus-loader) | [Stylus Plugin](/plugins/list/plugin-stylus) | +| [mdx-loader](https://www.npmjs.com/package/mdx-loader) | [MDX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-mdx) | +| [pug-loader](https://www.npmjs.com/package/pug-loader) | [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug) | +| [yaml-loader](https://www.npmjs.com/package/yaml-loader) | [Yaml Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml) | +| [toml-loader](https://www.npmjs.com/package/toml-loader) | [Toml Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml) | +| [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) | [SVGR Plugin](/plugins/list/plugin-svgr) | +| [fork-ts-checker-webpack-plugin](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin) | [Type Check Plugin](/plugins/list/plugin-type-check) | +| [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) | [Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | +| [@vue/babel-plugin-jsx](https://www.npmjs.com/package/@vue/babel-plugin-jsx) | [Vue JSX Plugin](/plugins/list/plugin-vue-jsx) | +| [@vue/babel-preset-jsx](https://www.npmjs.com/package/@vue/babel-preset-jsx) | [Vue 2 JSX Plugin](/plugins/list/plugin-vue2-jsx) | +| [eslint-webpack-plugin](https://www.npmjs.com/package/eslint-webpack-plugin) | [ESLint Plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint) | +| [babel-plugin-styled-components](https://www.npmjs.com/package/babel-plugin-styled-components) | [Styled Components Plugin](https://github.com/rsbuild-contrib/rsbuild-plugin-styled-components) | ### Configure Dev Server diff --git a/website/docs/en/guide/start/features.mdx b/website/docs/en/guide/start/features.mdx index ecca8acace..c7419af762 100644 --- a/website/docs/en/guide/start/features.mdx +++ b/website/docs/en/guide/start/features.mdx @@ -35,7 +35,6 @@ Here are all the main features supported by Rsbuild. | CSS Modules compilation | Support compiling `*.module.*` files by default |
  • [Use CSS Modules](/guide/basic/css-modules)
  • [tools.cssLoader](/config/tools/css-loader)
| | CSS Modules type | Optional feature, generate type definition for CSS Modules |
  • [Typed CSS Modules Plugin](https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules)
| | CSS minification | CSS minification is enabled by default in production build |
  • [CSS Usage](/guide/basic/css-usage)
| -| Styled Components | Optional feature, Support styled components compilation |
  • [Styled Components Plugin](/plugins/list/plugin-styled-components)
| | Inline CSS into JS | Optional feature, inline CSS files to JavaScript files |
  • [CSS Usage](/guide/basic/css-usage)
  • [output.injectStyles](/config/output/inject-styles)
| | Rem unit conversion | Optional feature, convert px units in CSS to rem units |
  • [Rem Plugin](/plugins/list/plugin-rem)
| diff --git a/website/docs/en/plugins/list/_meta.json b/website/docs/en/plugins/list/_meta.json index 2c325aa9e2..99f5db40d1 100644 --- a/website/docs/en/plugins/list/_meta.json +++ b/website/docs/en/plugins/list/_meta.json @@ -15,6 +15,5 @@ "plugin-stylus", "plugin-assets-retry", "plugin-type-check", - "plugin-styled-components", "plugin-rem" ] diff --git a/website/docs/en/plugins/list/index.mdx b/website/docs/en/plugins/list/index.mdx index 64b1e15176..a24fa144ec 100644 --- a/website/docs/en/plugins/list/index.mdx +++ b/website/docs/en/plugins/list/index.mdx @@ -20,7 +20,7 @@ Plugins available for the React framework: - [React Plugin](/plugins/list/plugin-react): Provides support for React. - [SVGR Plugin](/plugins/list/plugin-svgr): Support convert SVG to React components. -- [Styled Components Plugin](/plugins/list/plugin-styled-components): Provides compile-time support for styled-components. +- [Styled Components Plugin](https://github.com/rsbuild-contrib/rsbuild-plugin-styled-components): Provide compile-time support for styled-components. ### For Vue diff --git a/website/docs/en/plugins/list/plugin-styled-components.mdx b/website/docs/en/plugins/list/plugin-styled-components.mdx deleted file mode 100644 index a4ab6a323d..0000000000 --- a/website/docs/en/plugins/list/plugin-styled-components.mdx +++ /dev/null @@ -1,99 +0,0 @@ -# Styled Components Plugin - -import { SourceCode } from 'rspress/theme'; - - - -:::tip About styled-components -[styled-components](https://styled-components.com/) is a popular CSS-in-JS implementation library, which uses the new JavaScript feature [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write component CSS styles. -::: - -Rsbuild provides compile-time support for styled-components, improve the debugging experience and add server-side rendering support to styled-components. - -For details, please refer to [Rspack#styledComponents](https://rspack.dev/guide/features/builtin-swc-loader#rspackexperimentsstyledcomponents). - -## Quick Start - -### Install Plugin - -You can install the plugin using the following command: - -import { PackageManagerTabs } from '@theme'; - - - -### Register Plugin - -You can register the plugin in the `rsbuild.config.ts` file: - -```ts title="rsbuild.config.ts" -import { pluginStyledComponents } from '@rsbuild/plugin-styled-components'; - -export default { - plugins: [pluginStyledComponents()], -}; -``` - -## Example - -After registering the plugin, you can use styled-components to write styles: - -```ts -import styled from 'styled-components'; - -const div = styled.div` - color: red; -`; - -console.log('div', div); -``` - -## Options - -If you need to customize the compilation behavior of `styled-components`, you can use the following configs. - -You can check the [styled-components documentation](https://styled-components.com/) to learn how to use it. - -- **Type:** - -```ts -type StyledComponentsOptions = { - displayName?: boolean; - ssr?: boolean; - fileName?: boolean; - meaninglessFileNames?: string[]; - namespace?: string; - topLevelImportPaths?: string[]; - transpileTemplateLiterals?: boolean; - minify?: boolean; - pure?: boolean; - cssProps?: boolean; -}; -``` - -- **Default:** - -```ts -{ - displayName: true, - // `isSSR` is true in SSR build - ssr: isSSR, - // `pure` is enabled in production to reduce bundle size - pure: isProd, - transpileTemplateLiterals: true, -} -``` - -- **Example:** - -When the value is an Object, use the `Object.assign` function to merge with the default config. - -```ts title="rsbuild.config.ts" -export default { - plugins: [ - pluginStyledComponents({ - pure: true, - }), - ], -}; -``` diff --git a/website/docs/zh/guide/framework/react.mdx b/website/docs/zh/guide/framework/react.mdx index d9376786b5..266e0c5ead 100644 --- a/website/docs/zh/guide/framework/react.mdx +++ b/website/docs/zh/guide/framework/react.mdx @@ -147,7 +147,7 @@ export default defineConfig({ Rsbuild 支持编译 [styled-components](https://github.com/styled-components/styled-components)，优化调试体验，并对 styled-components 添加服务器端渲染支持。 -如果你需要使用 styled-components, 我们推荐你注册 [Styled Components 插件](/plugins/list/plugin-styled-components)。 +如果你需要使用 styled-components, 我们推荐使用 [@rsbuild/plugin-styled-components](https://github.com/rsbuild-contrib/rsbuild-plugin-styled-components)。 > 你可以参考这个示例：[styled-components](https://github.com/rspack-contrib/rspack-examples/tree/main/rsbuild/styled-components)。 diff --git a/website/docs/zh/guide/migration/webpack.mdx b/website/docs/zh/guide/migration/webpack.mdx index 04d43eacca..5fe4f2113f 100644 --- a/website/docs/zh/guide/migration/webpack.mdx +++ b/website/docs/zh/guide/migration/webpack.mdx @@ -124,27 +124,27 @@ export default { 大部分常见的 webpack loaders 和 plugins 都能在 Rsbuild 中继续使用，但我们推荐你优先使用 Rsbuild 提供的插件，这能够进一步简化你的配置。下面是它们的映射关系： -| webpack | Rsbuild | -| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -| [@babel/preset-react](https://www.npmjs.com/package/@babel/preset-react) | [React 插件](/plugins/list/plugin-react) | -| [vue-loader](https://www.npmjs.com/package/vue-loader) | [Vue 插件](/plugins/list/plugin-vue) 或 [Vue 2 插件](/plugins/list/plugin-vue2) | -| [svelte-loader](https://www.npmjs.com/package/svelte-loader) | [Svelte 插件](/plugins/list/plugin-svelte) | -| [babel-preset-solid](https://www.npmjs.com/package/babel-preset-solid) | [Solid 插件](/plugins/list/plugin-solid) | -| [babel-loader](https://www.npmjs.com/package/babel-loader) | [Babel 插件](/plugins/list/plugin-babel) | -| [sass-loader](https://www.npmjs.com/package/sass-loader) | [Sass 插件](/plugins/list/plugin-sass) | -| [less-loader](https://www.npmjs.com/package/less-loader) | [Less 插件](/plugins/list/plugin-less) | -| [stylus-loader](https://www.npmjs.com/package/stylus-loader) | [Stylus 插件](/plugins/list/plugin-stylus) | -| [mdx-loader](https://www.npmjs.com/package/mdx-loader) | [MDX 插件](https://github.com/rspack-contrib/rsbuild-plugin-mdx) | -| [pug-loader](https://www.npmjs.com/package/pug-loader) | [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug) | -| [yaml-loader](https://www.npmjs.com/package/yaml-loader) | [Yaml 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml) | -| [toml-loader](https://www.npmjs.com/package/toml-loader) | [Toml 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml) | -| [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) | [SVGR 插件](/plugins/list/plugin-svgr) | -| [fork-ts-checker-webpack-plugin](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin) | [Type Check 插件](/plugins/list/plugin-type-check) | -| [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) | [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | -| [@vue/babel-plugin-jsx](https://www.npmjs.com/package/@vue/babel-plugin-jsx) | [Vue JSX 插件](/plugins/list/plugin-vue-jsx) | -| [@vue/babel-preset-jsx](https://www.npmjs.com/package/@vue/babel-preset-jsx) | [Vue 2 JSX 插件](/plugins/list/plugin-vue2-jsx) | -| [eslint-webpack-plugin](https://www.npmjs.com/package/eslint-webpack-plugin) | [ESLint 插件](https://github.com/rspack-contrib/rsbuild-plugin-eslint) | -| [babel-plugin-styled-components](https://www.npmjs.com/package/babel-plugin-styled-components) | [Styled Components 插件](/plugins/list/plugin-styled-components) | +| webpack | Rsbuild | +| ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | +| [@babel/preset-react](https://www.npmjs.com/package/@babel/preset-react) | [React 插件](/plugins/list/plugin-react) | +| [vue-loader](https://www.npmjs.com/package/vue-loader) | [Vue 插件](/plugins/list/plugin-vue) 或 [Vue 2 插件](/plugins/list/plugin-vue2) | +| [svelte-loader](https://www.npmjs.com/package/svelte-loader) | [Svelte 插件](/plugins/list/plugin-svelte) | +| [babel-preset-solid](https://www.npmjs.com/package/babel-preset-solid) | [Solid 插件](/plugins/list/plugin-solid) | +| [babel-loader](https://www.npmjs.com/package/babel-loader) | [Babel 插件](/plugins/list/plugin-babel) | +| [sass-loader](https://www.npmjs.com/package/sass-loader) | [Sass 插件](/plugins/list/plugin-sass) | +| [less-loader](https://www.npmjs.com/package/less-loader) | [Less 插件](/plugins/list/plugin-less) | +| [stylus-loader](https://www.npmjs.com/package/stylus-loader) | [Stylus 插件](/plugins/list/plugin-stylus) | +| [mdx-loader](https://www.npmjs.com/package/mdx-loader) | [MDX 插件](https://github.com/rspack-contrib/rsbuild-plugin-mdx) | +| [pug-loader](https://www.npmjs.com/package/pug-loader) | [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug) | +| [yaml-loader](https://www.npmjs.com/package/yaml-loader) | [Yaml 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml) | +| [toml-loader](https://www.npmjs.com/package/toml-loader) | [Toml 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml) | +| [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) | [SVGR 插件](/plugins/list/plugin-svgr) | +| [fork-ts-checker-webpack-plugin](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin) | [Type Check 插件](/plugins/list/plugin-type-check) | +| [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) | [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | +| [@vue/babel-plugin-jsx](https://www.npmjs.com/package/@vue/babel-plugin-jsx) | [Vue JSX 插件](/plugins/list/plugin-vue-jsx) | +| [@vue/babel-preset-jsx](https://www.npmjs.com/package/@vue/babel-preset-jsx) | [Vue 2 JSX 插件](/plugins/list/plugin-vue2-jsx) | +| [eslint-webpack-plugin](https://www.npmjs.com/package/eslint-webpack-plugin) | [ESLint 插件](https://github.com/rspack-contrib/rsbuild-plugin-eslint) | +| [babel-plugin-styled-components](https://www.npmjs.com/package/babel-plugin-styled-components) | [Styled Components 插件](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | ### 配置 Dev Server diff --git a/website/docs/zh/guide/start/features.mdx b/website/docs/zh/guide/start/features.mdx index 726306e51d..acc4351e42 100644 --- a/website/docs/zh/guide/start/features.mdx +++ b/website/docs/zh/guide/start/features.mdx @@ -35,7 +35,6 @@ | CSS Modules 编译 | 默认支持编译 CSS Modules 文件 |
  • [使用 CSS Modules](/guide/basic/css-modules)
  • [tools.cssLoader](/config/tools/css-loader)
| | CSS Modules 类型提示 | 可选功能，生成 CSS Modules 的类型定义文件 |
  • [Typed CSS Modules 插件](https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules)
| | CSS 压缩 | 默认在生产模式构建时开启 CSS 压缩 |
  • [引用样式资源](/guide/basic/css-usage)
| -| Styled Components | 可选功能，支持 styled-components 编译 |
  • [Styled Components 插件](/plugins/list/plugin-styled-components)
| | 内联 CSS 到 JS 中 | 可选功能，将 CSS 文件内联到 JS 文件中 |
  • [引用样式资源](/guide/basic/css-usage)
  • [output.injectStyles](/config/output/inject-styles)
| | Rem 单位转换 | 可选功能，将 CSS 中的 px 转成 rem 单位 |
  • [Rem 插件](/plugins/list/plugin-rem)
| diff --git a/website/docs/zh/plugins/list/_meta.json b/website/docs/zh/plugins/list/_meta.json index 2c325aa9e2..99f5db40d1 100644 --- a/website/docs/zh/plugins/list/_meta.json +++ b/website/docs/zh/plugins/list/_meta.json @@ -15,6 +15,5 @@ "plugin-stylus", "plugin-assets-retry", "plugin-type-check", - "plugin-styled-components", "plugin-rem" ] diff --git a/website/docs/zh/plugins/list/index.mdx b/website/docs/zh/plugins/list/index.mdx index ffd547d33c..d716f442b6 100644 --- a/website/docs/zh/plugins/list/index.mdx +++ b/website/docs/zh/plugins/list/index.mdx @@ -20,7 +20,7 @@ - [React 插件](/plugins/list/plugin-react)：提供对 React 的支持。 - [SVGR 插件](/plugins/list/plugin-svgr)：支持将 SVG 图片转换为一个 React 组件使用。 -- [Styled Components 插件](/plugins/list/plugin-styled-components)：提供对 styled-components 的编译时支持。 +- [Styled Components 插件](https://github.com/rspack-contrib/rsbuild-plugin-styled-components)：提供对 styled-components 的编译时支持。 ### Vue diff --git a/website/docs/zh/plugins/list/plugin-styled-components.mdx b/website/docs/zh/plugins/list/plugin-styled-components.mdx deleted file mode 100644 index f7ed3896ff..0000000000 --- a/website/docs/zh/plugins/list/plugin-styled-components.mdx +++ /dev/null @@ -1,99 +0,0 @@ -# Styled Components 插件 - -import { SourceCode } from 'rspress/theme'; - - - -:::tip styled-components 介绍 -[styled-components](https://styled-components.com/) 是一个社区常用的 CSS-in-JS 实现库，它使用 JavaScript 的新特性 [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) 编写组件的 CSS 样式。 -::: - -Rsbuild 提供对 styled-components 的编译时支持，优化调试体验并对 styled-components 添加服务器端渲染支持。 - -详情可参考 [Rspack#styledComponents](https://rspack.dev/zh/guide/features/builtin-swc-loader#rspackexperimentsstyledcomponents)。 - -## 快速开始 - -### 安装插件 - -你可以通过如下的命令安装插件: - -import { PackageManagerTabs } from '@theme'; - - - -### 注册插件 - -你可以在 `rsbuild.config.ts` 文件中注册插件： - -```ts title="rsbuild.config.ts" -import { pluginStyledComponents } from '@rsbuild/plugin-styled-components'; - -export default { - plugins: [pluginStyledComponents()], -}; -``` - -## 示例 - -注册插件后，你可以使用 styled-components 编写样式： - -```ts -import styled from 'styled-components'; - -const div = styled.div` - color: red; -`; - -console.log('div', div); -``` - -## 选项 - -如果你需要自定义 styled-components 的编译行为，可以使用以下配置项。 - -可查阅 [styled-components 文档](https://styled-components.com/) 来了解具体用法。 - -- **类型：** - -```ts -type StyledComponentsOptions = { - displayName?: boolean; - ssr?: boolean; - fileName?: boolean; - meaninglessFileNames?: string[]; - namespace?: string; - topLevelImportPaths?: string[]; - transpileTemplateLiterals?: boolean; - minify?: boolean; - pure?: boolean; - cssProps?: boolean; -}; -``` - -- **默认值：** - -```ts -{ - displayName: true, - // 在 SSR 构建中 isSSR 为 true - ssr: isSSR, - // 在生产模式构建时启用 `pure` 来优化包体积 - pure: rsbuildConfig.mode === 'production', - transpileTemplateLiterals: true, -} -``` - -- **示例：** - -当配置项值为 Object 类型时，会与默认配置通过 `Object.assign` 合并。 - -```ts title="rsbuild.config.ts" -export default { - plugins: [ - pluginStyledComponents({ - pure: true, - }), - ], -}; -```