@rsbuild/plugin-styled-components 1.0.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +4 -0
  2. package/dist/index.cjs +97 -90
  3. package/dist/index.d.ts +5 -8
  4. package/dist/index.js +55 -61
  5. package/package.json +26 -24
  6. package/dist/index.d.cts +0 -22
package/README.md CHANGED
@@ -16,7 +16,11 @@ An Rsbuild plugin to provide compile-time support for styled-components. It impr
16
16
  Install:
17
17
 
18
18
  ```bash
19
+ # `@rsbuild/core` >= 1.2.0
19
20
  npm add @rsbuild/plugin-styled-components -D
21
+
22
+ # `@rsbuild/core` < 1.2.0
23
+ npm add @rsbuild/plugin-styled-components@1.1.0 -D
20
24
  ```
21
25
 
22
26
  Add plugin to your `rsbuild.config.ts`:
package/dist/index.cjs CHANGED
@@ -1,97 +1,104 @@
1
1
  "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- PLUGIN_STYLED_COMPONENTS_NAME: () => PLUGIN_STYLED_COMPONENTS_NAME,
24
- pluginStyledComponents: () => pluginStyledComponents
2
+ const __rslib_import_meta_url__ = /*#__PURE__*/ function() {
3
+ return 'undefined' == typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
4
+ }();
5
+ // The require scope
6
+ var __webpack_require__ = {};
7
+ /************************************************************************/ // webpack/runtime/define_property_getters
8
+ (()=>{
9
+ __webpack_require__.d = function(exports1, definition) {
10
+ for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
11
+ enumerable: true,
12
+ get: definition[key]
13
+ });
14
+ };
15
+ })();
16
+ // webpack/runtime/has_own_property
17
+ (()=>{
18
+ __webpack_require__.o = function(obj, prop) {
19
+ return Object.prototype.hasOwnProperty.call(obj, prop);
20
+ };
21
+ })();
22
+ // webpack/runtime/make_namespace_object
23
+ (()=>{
24
+ // define __esModule on exports
25
+ __webpack_require__.r = function(exports1) {
26
+ if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
27
+ value: 'Module'
28
+ });
29
+ Object.defineProperty(exports1, '__esModule', {
30
+ value: true
31
+ });
32
+ };
33
+ })();
34
+ /************************************************************************/ var __webpack_exports__ = {};
35
+ // ESM COMPAT FLAG
36
+ __webpack_require__.r(__webpack_exports__);
37
+ // EXPORTS
38
+ __webpack_require__.d(__webpack_exports__, {
39
+ PLUGIN_STYLED_COMPONENTS_NAME: ()=>/* binding */ PLUGIN_STYLED_COMPONENTS_NAME,
40
+ pluginStyledComponents: ()=>/* binding */ pluginStyledComponents
25
41
  });
26
- module.exports = __toCommonJS(src_exports);
27
-
28
- // node_modules/.pnpm/tsup@8.2.3_postcss@8.4.38_typescript@5.5.4/node_modules/tsup/assets/cjs_shims.js
29
- var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
30
- var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
31
-
32
- // src/index.ts
33
- var import_node_module = require("module");
34
- var import_reduce_configs = require("reduce-configs");
35
- var require2 = (0, import_node_module.createRequire)(importMetaUrl);
42
+ const external_node_module_namespaceObject = require("node:module");
43
+ const external_reduce_configs_namespaceObject = require("reduce-configs");
44
+ const src_require = (0, external_node_module_namespaceObject.createRequire)(__rslib_import_meta_url__);
36
45
  function isServerTarget(target) {
37
- return Array.isArray(target) ? target.includes("node") : target === "node";
46
+ return Array.isArray(target) ? target.includes('node') : 'node' === target;
38
47
  }
39
- var getDefaultStyledComponentsConfig = (isProd, ssr) => {
40
- return {
41
- ssr,
42
- // "pure" is used to improve dead code elimination in production.
43
- // we don't need to enable it in development because it will slow down the build process.
44
- pure: isProd,
45
- displayName: true,
46
- transpileTemplateLiterals: true
47
- };
48
- };
49
- var PLUGIN_STYLED_COMPONENTS_NAME = "rsbuild:styled-components";
50
- var pluginStyledComponents = (pluginOptions = {}) => ({
51
- name: PLUGIN_STYLED_COMPONENTS_NAME,
52
- setup(api) {
53
- if (api.context.bundlerType === "webpack") {
54
- return;
55
- }
56
- const getMergedOptions = (useSSR, config) => {
57
- const isProd = config.mode === "production";
58
- return (0, import_reduce_configs.reduceConfigs)({
59
- initial: getDefaultStyledComponentsConfig(isProd, useSSR),
60
- config: pluginOptions
61
- });
62
- };
63
- api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig }) => {
64
- const rsbuildConfig = api.getRsbuildConfig();
65
- const targets = rsbuildConfig.environments ? Object.values(rsbuildConfig.environments).map(
66
- (e) => e.output?.target || userConfig.output?.target || "web"
67
- ) : [userConfig.output?.target || "web"];
68
- const useSSR = isServerTarget(targets);
69
- const mergedOptions = getMergedOptions(useSSR, userConfig);
70
- if (!mergedOptions) {
71
- return userConfig;
72
- }
73
- const extraConfig = {
74
- tools: {
75
- swc: {
76
- jsc: {
77
- experimental: {
78
- plugins: [
79
- [
80
- require2.resolve("@swc/plugin-styled-components"),
81
- mergedOptions
82
- ]
83
- ]
84
- }
85
- }
86
- }
48
+ const getDefaultStyledComponentsConfig = (isProd, ssr)=>({
49
+ ssr,
50
+ // "pure" is used to improve dead code elimination in production.
51
+ // we don't need to enable it in development because it will slow down the build process.
52
+ pure: isProd,
53
+ displayName: true,
54
+ transpileTemplateLiterals: true
55
+ });
56
+ const PLUGIN_STYLED_COMPONENTS_NAME = 'rsbuild:styled-components';
57
+ const pluginStyledComponents = (pluginOptions = {})=>({
58
+ name: PLUGIN_STYLED_COMPONENTS_NAME,
59
+ setup (api) {
60
+ if ('webpack' === api.context.bundlerType) return;
61
+ const getMergedOptions = (useSSR, config)=>{
62
+ const isProd = 'production' === config.mode;
63
+ return (0, external_reduce_configs_namespaceObject.reduceConfigs)({
64
+ initial: getDefaultStyledComponentsConfig(isProd, useSSR),
65
+ config: pluginOptions
66
+ });
67
+ };
68
+ api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig })=>{
69
+ var _userConfig_output;
70
+ const rsbuildConfig = api.getRsbuildConfig();
71
+ const targets = rsbuildConfig.environments ? Object.values(rsbuildConfig.environments).map((e)=>{
72
+ var _e_output, _userConfig_output;
73
+ return (null === (_e_output = e.output) || void 0 === _e_output ? void 0 : _e_output.target) || (null === (_userConfig_output = userConfig.output) || void 0 === _userConfig_output ? void 0 : _userConfig_output.target) || 'web';
74
+ }) : [
75
+ (null === (_userConfig_output = userConfig.output) || void 0 === _userConfig_output ? void 0 : _userConfig_output.target) || 'web'
76
+ ];
77
+ const useSSR = isServerTarget(targets);
78
+ const mergedOptions = getMergedOptions(useSSR, userConfig);
79
+ if (!mergedOptions) return userConfig;
80
+ const extraConfig = {
81
+ tools: {
82
+ swc: {
83
+ jsc: {
84
+ experimental: {
85
+ plugins: [
86
+ [
87
+ src_require.resolve('@swc/plugin-styled-components'),
88
+ mergedOptions
89
+ ]
90
+ ]
91
+ }
92
+ }
93
+ }
94
+ }
95
+ };
96
+ return mergeEnvironmentConfig(extraConfig, userConfig);
97
+ });
87
98
  }
88
- };
89
- return mergeEnvironmentConfig(extraConfig, userConfig);
90
99
  });
91
- }
92
- });
93
- // Annotate the CommonJS export names for ESM import in node:
94
- 0 && (module.exports = {
95
- PLUGIN_STYLED_COMPONENTS_NAME,
96
- pluginStyledComponents
100
+ var __webpack_export_target__ = exports;
101
+ for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
102
+ if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
103
+ value: true
97
104
  });
package/dist/index.d.ts CHANGED
@@ -1,10 +1,9 @@
1
- import { RsbuildPlugin } from '@rsbuild/core';
2
- import { ConfigChain } from 'reduce-configs';
3
-
1
+ import type { RsbuildPlugin } from '@rsbuild/core';
2
+ import { type ConfigChain } from 'reduce-configs';
4
3
  /**
5
4
  * The options of [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components).
6
5
  */
7
- type PluginStyledComponentsOptions = {
6
+ export type PluginStyledComponentsOptions = {
8
7
  displayName?: boolean;
9
8
  ssr?: boolean;
10
9
  fileName?: boolean;
@@ -16,7 +15,5 @@ type PluginStyledComponentsOptions = {
16
15
  pure?: boolean;
17
16
  cssProps?: boolean;
18
17
  };
19
- declare const PLUGIN_STYLED_COMPONENTS_NAME = "rsbuild:styled-components";
20
- declare const pluginStyledComponents: (pluginOptions?: ConfigChain<PluginStyledComponentsOptions>) => RsbuildPlugin;
21
-
22
- export { PLUGIN_STYLED_COMPONENTS_NAME, type PluginStyledComponentsOptions, pluginStyledComponents };
18
+ export declare const PLUGIN_STYLED_COMPONENTS_NAME = "rsbuild:styled-components";
19
+ export declare const pluginStyledComponents: (pluginOptions?: ConfigChain<PluginStyledComponentsOptions>) => RsbuildPlugin;
package/dist/index.js CHANGED
@@ -1,65 +1,59 @@
1
- // src/index.ts
2
- import { createRequire } from "node:module";
3
- import { reduceConfigs } from "reduce-configs";
4
- var require2 = createRequire(import.meta.url);
1
+ import * as __WEBPACK_EXTERNAL_MODULE_node_module__ from "node:module";
2
+ import * as __WEBPACK_EXTERNAL_MODULE_reduce_configs__ from "reduce-configs";
3
+ const src_require = (0, __WEBPACK_EXTERNAL_MODULE_node_module__.createRequire)(import.meta.url);
5
4
  function isServerTarget(target) {
6
- return Array.isArray(target) ? target.includes("node") : target === "node";
5
+ return Array.isArray(target) ? target.includes('node') : 'node' === target;
7
6
  }
8
- var getDefaultStyledComponentsConfig = (isProd, ssr) => {
9
- return {
10
- ssr,
11
- // "pure" is used to improve dead code elimination in production.
12
- // we don't need to enable it in development because it will slow down the build process.
13
- pure: isProd,
14
- displayName: true,
15
- transpileTemplateLiterals: true
16
- };
17
- };
18
- var PLUGIN_STYLED_COMPONENTS_NAME = "rsbuild:styled-components";
19
- var pluginStyledComponents = (pluginOptions = {}) => ({
20
- name: PLUGIN_STYLED_COMPONENTS_NAME,
21
- setup(api) {
22
- if (api.context.bundlerType === "webpack") {
23
- return;
24
- }
25
- const getMergedOptions = (useSSR, config) => {
26
- const isProd = config.mode === "production";
27
- return reduceConfigs({
28
- initial: getDefaultStyledComponentsConfig(isProd, useSSR),
29
- config: pluginOptions
30
- });
31
- };
32
- api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig }) => {
33
- const rsbuildConfig = api.getRsbuildConfig();
34
- const targets = rsbuildConfig.environments ? Object.values(rsbuildConfig.environments).map(
35
- (e) => e.output?.target || userConfig.output?.target || "web"
36
- ) : [userConfig.output?.target || "web"];
37
- const useSSR = isServerTarget(targets);
38
- const mergedOptions = getMergedOptions(useSSR, userConfig);
39
- if (!mergedOptions) {
40
- return userConfig;
41
- }
42
- const extraConfig = {
43
- tools: {
44
- swc: {
45
- jsc: {
46
- experimental: {
47
- plugins: [
48
- [
49
- require2.resolve("@swc/plugin-styled-components"),
50
- mergedOptions
51
- ]
52
- ]
53
- }
54
- }
55
- }
7
+ const getDefaultStyledComponentsConfig = (isProd, ssr)=>({
8
+ ssr,
9
+ // "pure" is used to improve dead code elimination in production.
10
+ // we don't need to enable it in development because it will slow down the build process.
11
+ pure: isProd,
12
+ displayName: true,
13
+ transpileTemplateLiterals: true
14
+ });
15
+ const PLUGIN_STYLED_COMPONENTS_NAME = 'rsbuild:styled-components';
16
+ const pluginStyledComponents = (pluginOptions = {})=>({
17
+ name: PLUGIN_STYLED_COMPONENTS_NAME,
18
+ setup (api) {
19
+ if ('webpack' === api.context.bundlerType) return;
20
+ const getMergedOptions = (useSSR, config)=>{
21
+ const isProd = 'production' === config.mode;
22
+ return (0, __WEBPACK_EXTERNAL_MODULE_reduce_configs__.reduceConfigs)({
23
+ initial: getDefaultStyledComponentsConfig(isProd, useSSR),
24
+ config: pluginOptions
25
+ });
26
+ };
27
+ api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig })=>{
28
+ var _userConfig_output;
29
+ const rsbuildConfig = api.getRsbuildConfig();
30
+ const targets = rsbuildConfig.environments ? Object.values(rsbuildConfig.environments).map((e)=>{
31
+ var _e_output, _userConfig_output;
32
+ return (null === (_e_output = e.output) || void 0 === _e_output ? void 0 : _e_output.target) || (null === (_userConfig_output = userConfig.output) || void 0 === _userConfig_output ? void 0 : _userConfig_output.target) || 'web';
33
+ }) : [
34
+ (null === (_userConfig_output = userConfig.output) || void 0 === _userConfig_output ? void 0 : _userConfig_output.target) || 'web'
35
+ ];
36
+ const useSSR = isServerTarget(targets);
37
+ const mergedOptions = getMergedOptions(useSSR, userConfig);
38
+ if (!mergedOptions) return userConfig;
39
+ const extraConfig = {
40
+ tools: {
41
+ swc: {
42
+ jsc: {
43
+ experimental: {
44
+ plugins: [
45
+ [
46
+ src_require.resolve('@swc/plugin-styled-components'),
47
+ mergedOptions
48
+ ]
49
+ ]
50
+ }
51
+ }
52
+ }
53
+ }
54
+ };
55
+ return mergeEnvironmentConfig(extraConfig, userConfig);
56
+ });
56
57
  }
57
- };
58
- return mergeEnvironmentConfig(extraConfig, userConfig);
59
58
  });
60
- }
61
- });
62
- export {
63
- PLUGIN_STYLED_COMPONENTS_NAME,
64
- pluginStyledComponents
65
- };
59
+ export { PLUGIN_STYLED_COMPONENTS_NAME, pluginStyledComponents };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-styled-components",
3
- "version": "1.0.1",
3
+ "version": "1.2.0",
4
4
  "repository": "https://github.com/rspack-contrib/rsbuild-plugin-styled-components",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -14,9 +14,16 @@
14
14
  "main": "./dist/index.js",
15
15
  "module": "./dist/index.mjs",
16
16
  "types": "./dist/index.d.ts",
17
- "files": [
18
- "dist"
19
- ],
17
+ "files": ["dist"],
18
+ "scripts": {
19
+ "build": "rslib build",
20
+ "dev": "rslib build --watch",
21
+ "lint": "biome check .",
22
+ "lint:write": "biome check . --write",
23
+ "prepare": "simple-git-hooks && npm run build",
24
+ "test": "playwright test",
25
+ "bump": "npx bumpp"
26
+ },
20
27
  "simple-git-hooks": {
21
28
  "pre-commit": "npx nano-staged"
22
29
  },
@@ -26,38 +33,33 @@
26
33
  ]
27
34
  },
28
35
  "dependencies": {
29
- "@swc/plugin-styled-components": "2.0.11",
30
- "reduce-configs": "^1.0.0"
36
+ "@swc/plugin-styled-components": "^6.0.2",
37
+ "reduce-configs": "^1.1.0"
31
38
  },
32
39
  "devDependencies": {
33
- "@biomejs/biome": "^1.8.3",
34
- "@playwright/test": "^1.45.3",
35
- "@rsbuild/core": "^1.0.1-beta.11",
36
- "@types/node": "^20.14.13",
40
+ "@biomejs/biome": "^1.9.4",
41
+ "@playwright/test": "^1.49.0",
42
+ "@rsbuild/core": "^1.2.0-alpha.0",
43
+ "@rslib/core": "^0.1.1",
44
+ "@types/node": "^22.10.1",
37
45
  "nano-staged": "^0.8.0",
38
- "playwright": "^1.45.3",
46
+ "playwright": "^1.49.0",
39
47
  "simple-git-hooks": "^2.11.1",
40
- "styled-components": "^6.1.12",
41
- "tsup": "^8.2.3",
42
- "typescript": "^5.5.4"
48
+ "styled-components": "^6.1.13",
49
+ "typescript": "^5.7.2"
43
50
  },
44
51
  "peerDependencies": {
45
- "@rsbuild/core": "1.x || ^1.0.1-beta.0"
52
+ "@rsbuild/core": "^1.2.0"
46
53
  },
47
54
  "peerDependenciesMeta": {
48
55
  "@rsbuild/core": {
49
56
  "optional": true
50
57
  }
51
58
  },
59
+ "packageManager": "pnpm@9.14.4",
52
60
  "publishConfig": {
53
61
  "access": "public",
54
- "registry": "https://registry.npmjs.org/"
55
- },
56
- "scripts": {
57
- "build": "tsup",
58
- "dev": "tsup --watch",
59
- "lint": "biome check .",
60
- "lint:write": "biome check . --write",
61
- "test": "playwright test"
62
+ "registry": "https://registry.npmjs.org/",
63
+ "provenance": true
62
64
  }
63
- }
65
+ }
package/dist/index.d.cts DELETED
@@ -1,22 +0,0 @@
1
- import { RsbuildPlugin } from '@rsbuild/core';
2
- import { ConfigChain } from 'reduce-configs';
3
-
4
- /**
5
- * The options of [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components).
6
- */
7
- type PluginStyledComponentsOptions = {
8
- displayName?: boolean;
9
- ssr?: boolean;
10
- fileName?: boolean;
11
- meaninglessFileNames?: string[];
12
- namespace?: string;
13
- topLevelImportPaths?: string[];
14
- transpileTemplateLiterals?: boolean;
15
- minify?: boolean;
16
- pure?: boolean;
17
- cssProps?: boolean;
18
- };
19
- declare const PLUGIN_STYLED_COMPONENTS_NAME = "rsbuild:styled-components";
20
- declare const pluginStyledComponents: (pluginOptions?: ConfigChain<PluginStyledComponentsOptions>) => RsbuildPlugin;
21
-
22
- export { PLUGIN_STYLED_COMPONENTS_NAME, type PluginStyledComponentsOptions, pluginStyledComponents };