@rsbuild/plugin-styled-components 1.0.1-beta.9 → 1.0.1

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 (9) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +85 -9
  3. package/dist/index.cjs +12 -14
  4. package/dist/index.d.cts +22 -0
  5. package/dist/index.d.ts +22 -0
  6. package/dist/index.js +6 -19
  7. package/package.json +37 -20
  8. package/dist-types/index.d.ts +0 -19
  9. package/dist-types/package.json +0 -1
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
3
+ Copyright (c) 2024 Rspack Contrib
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,19 +1,95 @@
1
- <p align="center">
2
- <a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
1
+ # @rsbuild/plugin-styled-components
2
+
3
+ An Rsbuild plugin to provide compile-time support for styled-components. It improves debugging and adds server-side rendering support for styled-components.
4
+
5
+ > [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.
6
+
7
+ <p>
8
+ <a href="https://npmjs.com/package/@rsbuild/plugin-styled-components">
9
+ <img src="https://img.shields.io/npm/v/@rsbuild/plugin-styled-components?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
10
+ </a>
11
+ <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
3
12
  </p>
4
13
 
5
- # Rsbuild
14
+ ## Usage
15
+
16
+ Install:
17
+
18
+ ```bash
19
+ npm add @rsbuild/plugin-styled-components -D
20
+ ```
21
+
22
+ Add plugin to your `rsbuild.config.ts`:
23
+
24
+ ```ts
25
+ // rsbuild.config.ts
26
+ import { pluginStyledComponents } from "@rsbuild/plugin-styled-components";
27
+
28
+ export default {
29
+ plugins: [pluginStyledComponents()],
30
+ };
31
+ ```
32
+
33
+ ## Example
34
+
35
+ After registering the plugin, you can use styled-components to write styles:
36
+
37
+ ```ts
38
+ import styled from "styled-components";
39
+
40
+ const div = styled.div`
41
+ color: red;
42
+ `;
43
+
44
+ console.log("div", div);
45
+ ```
46
+
47
+ ## Options
48
+
49
+ If you need to customize the compilation behavior of `styled-components`, you can use the following configs.
50
+
51
+ You can check the [styled-components documentation](https://styled-components.com/) to learn how to use it.
52
+
53
+ - **Type:**
54
+
55
+ ```ts
56
+ type StyledComponentsOptions = {
57
+ displayName?: boolean;
58
+ ssr?: boolean;
59
+ fileName?: boolean;
60
+ meaninglessFileNames?: string[];
61
+ namespace?: string;
62
+ topLevelImportPaths?: string[];
63
+ transpileTemplateLiterals?: boolean;
64
+ minify?: boolean;
65
+ pure?: boolean;
66
+ cssProps?: boolean;
67
+ };
68
+ ```
6
69
 
7
- The Rspack-based build tool. It's fast, out-of-the-box and extensible.
70
+ - **Default:**
8
71
 
9
- ## Documentation
72
+ ```ts
73
+ {
74
+ displayName: true,
75
+ // `isSSR` is true in SSR build
76
+ ssr: isSSR,
77
+ // `pure` is enabled in production to reduce bundle size
78
+ pure: isProd,
79
+ transpileTemplateLiterals: true,
80
+ }
81
+ ```
10
82
 
11
- https://rsbuild.dev/
83
+ - **Example:**
12
84
 
13
- ## Contributing
85
+ When the value is an Object, use the `Object.assign` function to merge with the default config.
14
86
 
15
- Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
87
+ ```ts title="rsbuild.config.ts"
88
+ pluginStyledComponents({
89
+ pure: true,
90
+ });
91
+ ```
16
92
 
17
93
  ## License
18
94
 
19
- Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).
95
+ [MIT](./LICENSE).
package/dist/index.cjs CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
- var __create = Object.create;
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
6
  var __export = (target, all) => {
9
7
  for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
17
15
  }
18
16
  return to;
19
17
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
19
 
30
20
  // src/index.ts
@@ -34,7 +24,15 @@ __export(src_exports, {
34
24
  pluginStyledComponents: () => pluginStyledComponents
35
25
  });
36
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");
37
34
  var import_reduce_configs = require("reduce-configs");
35
+ var require2 = (0, import_node_module.createRequire)(importMetaUrl);
38
36
  function isServerTarget(target) {
39
37
  return Array.isArray(target) ? target.includes("node") : target === "node";
40
38
  }
@@ -55,8 +53,8 @@ var pluginStyledComponents = (pluginOptions = {}) => ({
55
53
  if (api.context.bundlerType === "webpack") {
56
54
  return;
57
55
  }
58
- const getMergedOptions = (useSSR) => {
59
- const isProd = process.env.NODE_ENV === "production";
56
+ const getMergedOptions = (useSSR, config) => {
57
+ const isProd = config.mode === "production";
60
58
  return (0, import_reduce_configs.reduceConfigs)({
61
59
  initial: getDefaultStyledComponentsConfig(isProd, useSSR),
62
60
  config: pluginOptions
@@ -68,7 +66,7 @@ var pluginStyledComponents = (pluginOptions = {}) => ({
68
66
  (e) => e.output?.target || userConfig.output?.target || "web"
69
67
  ) : [userConfig.output?.target || "web"];
70
68
  const useSSR = isServerTarget(targets);
71
- const mergedOptions = getMergedOptions(useSSR);
69
+ const mergedOptions = getMergedOptions(useSSR, userConfig);
72
70
  if (!mergedOptions) {
73
71
  return userConfig;
74
72
  }
@@ -79,7 +77,7 @@ var pluginStyledComponents = (pluginOptions = {}) => ({
79
77
  experimental: {
80
78
  plugins: [
81
79
  [
82
- require.resolve("@swc/plugin-styled-components"),
80
+ require2.resolve("@swc/plugin-styled-components"),
83
81
  mergedOptions
84
82
  ]
85
83
  ]
package/dist/index.d.cts ADDED
@@ -0,0 +1,22 @@
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 };
package/dist/index.d.ts ADDED
@@ -0,0 +1,22 @@
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 };
package/dist/index.js CHANGED
@@ -1,20 +1,7 @@
1
- import { createRequire } from 'module';
2
- var require = createRequire(import.meta['url']);
3
-
4
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
5
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
6
- }) : x)(function(x) {
7
- if (typeof require !== "undefined")
8
- return require.apply(this, arguments);
9
- throw Error('Dynamic require of "' + x + '" is not supported');
10
- });
11
-
12
- // ../../node_modules/.pnpm/@modern-js+module-tools@2.56.2_typescript@5.5.2/node_modules/@modern-js/module-tools/shims/esm.js
13
- import { fileURLToPath } from "url";
14
- import path from "path";
15
-
16
1
  // src/index.ts
2
+ import { createRequire } from "node:module";
17
3
  import { reduceConfigs } from "reduce-configs";
4
+ var require2 = createRequire(import.meta.url);
18
5
  function isServerTarget(target) {
19
6
  return Array.isArray(target) ? target.includes("node") : target === "node";
20
7
  }
@@ -35,8 +22,8 @@ var pluginStyledComponents = (pluginOptions = {}) => ({
35
22
  if (api.context.bundlerType === "webpack") {
36
23
  return;
37
24
  }
38
- const getMergedOptions = (useSSR) => {
39
- const isProd = process.env.NODE_ENV === "production";
25
+ const getMergedOptions = (useSSR, config) => {
26
+ const isProd = config.mode === "production";
40
27
  return reduceConfigs({
41
28
  initial: getDefaultStyledComponentsConfig(isProd, useSSR),
42
29
  config: pluginOptions
@@ -48,7 +35,7 @@ var pluginStyledComponents = (pluginOptions = {}) => ({
48
35
  (e) => e.output?.target || userConfig.output?.target || "web"
49
36
  ) : [userConfig.output?.target || "web"];
50
37
  const useSSR = isServerTarget(targets);
51
- const mergedOptions = getMergedOptions(useSSR);
38
+ const mergedOptions = getMergedOptions(useSSR, userConfig);
52
39
  if (!mergedOptions) {
53
40
  return userConfig;
54
41
  }
@@ -59,7 +46,7 @@ var pluginStyledComponents = (pluginOptions = {}) => ({
59
46
  experimental: {
60
47
  plugins: [
61
48
  [
62
- __require.resolve("@swc/plugin-styled-components"),
49
+ require2.resolve("@swc/plugin-styled-components"),
63
50
  mergedOptions
64
51
  ]
65
52
  ]
package/package.json CHANGED
@@ -1,46 +1,63 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-styled-components",
3
- "version": "1.0.1-beta.9",
4
- "description": "styled-components plugin for Rsbuild",
5
- "repository": {
6
- "type": "git",
7
- "url": "https://github.com/web-infra-dev/rsbuild",
8
- "directory": "packages/plugin-styled-components"
9
- },
3
+ "version": "1.0.1",
4
+ "repository": "https://github.com/rspack-contrib/rsbuild-plugin-styled-components",
10
5
  "license": "MIT",
11
6
  "type": "module",
12
7
  "exports": {
13
8
  ".": {
14
- "types": "./dist-types/index.d.ts",
9
+ "types": "./dist/index.d.ts",
15
10
  "import": "./dist/index.js",
16
11
  "require": "./dist/index.cjs"
17
12
  }
18
13
  },
19
- "main": "./dist/index.cjs",
20
- "types": "./dist-types/index.d.ts",
14
+ "main": "./dist/index.js",
15
+ "module": "./dist/index.mjs",
16
+ "types": "./dist/index.d.ts",
21
17
  "files": [
22
- "dist",
23
- "dist-types"
18
+ "dist"
24
19
  ],
20
+ "simple-git-hooks": {
21
+ "pre-commit": "npx nano-staged"
22
+ },
23
+ "nano-staged": {
24
+ "*.{js,jsx,ts,tsx,mjs,cjs}": [
25
+ "biome check --write --no-errors-on-unmatched"
26
+ ]
27
+ },
25
28
  "dependencies": {
26
- "@swc/plugin-styled-components": "2.0.10",
29
+ "@swc/plugin-styled-components": "2.0.11",
27
30
  "reduce-configs": "^1.0.0"
28
31
  },
29
32
  "devDependencies": {
30
- "@types/node": "18.x",
31
- "typescript": "^5.5.2",
32
- "@rsbuild/core": "1.0.1-beta.9"
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",
37
+ "nano-staged": "^0.8.0",
38
+ "playwright": "^1.45.3",
39
+ "simple-git-hooks": "^2.11.1",
40
+ "styled-components": "^6.1.12",
41
+ "tsup": "^8.2.3",
42
+ "typescript": "^5.5.4"
33
43
  },
34
44
  "peerDependencies": {
35
- "@rsbuild/core": "^1.0.1-beta.9"
45
+ "@rsbuild/core": "1.x || ^1.0.1-beta.0"
46
+ },
47
+ "peerDependenciesMeta": {
48
+ "@rsbuild/core": {
49
+ "optional": true
50
+ }
36
51
  },
37
52
  "publishConfig": {
38
53
  "access": "public",
39
- "provenance": true,
40
54
  "registry": "https://registry.npmjs.org/"
41
55
  },
42
56
  "scripts": {
43
- "build": "modern build",
44
- "dev": "modern build --watch"
57
+ "build": "tsup",
58
+ "dev": "tsup --watch",
59
+ "lint": "biome check .",
60
+ "lint:write": "biome check . --write",
61
+ "test": "playwright test"
45
62
  }
46
63
  }
package/dist-types/index.d.ts DELETED
@@ -1,19 +0,0 @@
1
- import type { RsbuildPlugin } from '@rsbuild/core';
2
- import { type ConfigChain } from 'reduce-configs';
3
- /**
4
- * The options of [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components).
5
- */
6
- export type PluginStyledComponentsOptions = {
7
- displayName?: boolean;
8
- ssr?: boolean;
9
- fileName?: boolean;
10
- meaninglessFileNames?: string[];
11
- namespace?: string;
12
- topLevelImportPaths?: string[];
13
- transpileTemplateLiterals?: boolean;
14
- minify?: boolean;
15
- pure?: boolean;
16
- cssProps?: boolean;
17
- };
18
- export declare const PLUGIN_STYLED_COMPONENTS_NAME = "rsbuild:styled-components";
19
- export declare const pluginStyledComponents: (pluginOptions?: ConfigChain<PluginStyledComponentsOptions>) => RsbuildPlugin;
package/dist-types/package.json DELETED
@@ -1 +0,0 @@
1
- {"//":"This file is for making TypeScript work with moduleResolution node16+.","version":"1.0.0"}