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

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+Copyright (c) 2024 Rspack Contrib
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,19 +1,95 @@
-<p align="center">
-  <a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
+# @rsbuild/plugin-styled-components
+
+An Rsbuild plugin to provide compile-time support for styled-components. It improves debugging and adds server-side rendering support for 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.
+
+<p>
+  <a href="https://npmjs.com/package/@rsbuild/plugin-styled-components">
+   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-styled-components?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  </a>
+  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
 </p>
 
-# Rsbuild
+## Usage
+
+Install:
+
+```bash
+npm add @rsbuild/plugin-styled-components -D
+```
+
+Add plugin to your `rsbuild.config.ts`:
+
+```ts
+// 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;
+};
+```
 
-The Rspack-based build tool. It's fast, out-of-the-box and extensible.
+- **Default:**
 
-## Documentation
+```ts
+{
+  displayName: true,
+  // `isSSR` is true in SSR build
+  ssr: isSSR,
+  // `pure` is enabled in production to reduce bundle size
+  pure: isProd,
+  transpileTemplateLiterals: true,
+}
+```
 
-https://rsbuild.dev/
+- **Example:**
 
-## Contributing
+When the value is an Object, use the `Object.assign` function to merge with the default config.
 
-Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
+```ts title="rsbuild.config.ts"
+pluginStyledComponents({
+  pure: true,
+});
+```
 
 ## License
 
-Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).
+[MIT](./LICENSE).

package/dist/index.cjs

@@ -1,99 +1,103 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  PLUGIN_STYLED_COMPONENTS_NAME: () => PLUGIN_STYLED_COMPONENTS_NAME,
-  pluginStyledComponents: () => pluginStyledComponents
+// The require scope
+var __webpack_require__ = {};
+/************************************************************************/ // webpack/runtime/define_property_getters
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+// webpack/runtime/has_own_property
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+// webpack/runtime/make_namespace_object
+(()=>{
+    // define __esModule on exports
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+/************************************************************************/ var __webpack_exports__ = {};
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+    PLUGIN_STYLED_COMPONENTS_NAME: ()=>/* binding */ PLUGIN_STYLED_COMPONENTS_NAME,
+    pluginStyledComponents: ()=>/* binding */ pluginStyledComponents
 });
-module.exports = __toCommonJS(src_exports);
-var import_reduce_configs = require("reduce-configs");
+const external_node_module_namespaceObject = require("node:module");
+const external_reduce_configs_namespaceObject = require("reduce-configs");
+const src_require = (0, external_node_module_namespaceObject.createRequire)(/*#__PURE__*/ function() {
+    return 'undefined' == typeof document ? new (module.require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
+}());
 function isServerTarget(target) {
-  return Array.isArray(target) ? target.includes("node") : target === "node";
+    return Array.isArray(target) ? target.includes('node') : 'node' === target;
 }
-var getDefaultStyledComponentsConfig = (isProd, ssr) => {
-  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
-  };
-};
-var PLUGIN_STYLED_COMPONENTS_NAME = "rsbuild:styled-components";
-var pluginStyledComponents = (pluginOptions = {}) => ({
-  name: PLUGIN_STYLED_COMPONENTS_NAME,
-  setup(api) {
-    if (api.context.bundlerType === "webpack") {
-      return;
-    }
-    const getMergedOptions = (useSSR) => {
-      const isProd = process.env.NODE_ENV === "production";
-      return (0, import_reduce_configs.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);
-      if (!mergedOptions) {
-        return userConfig;
-      }
-      const extraConfig = {
-        tools: {
-          swc: {
-            jsc: {
-              experimental: {
-                plugins: [
-                  [
-                    require.resolve("@swc/plugin-styled-components"),
-                    mergedOptions
-                  ]
-                ]
-              }
-            }
-          }
+const getDefaultStyledComponentsConfig = (isProd, ssr)=>({
+        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
+    });
+const PLUGIN_STYLED_COMPONENTS_NAME = 'rsbuild:styled-components';
+const pluginStyledComponents = (pluginOptions = {})=>({
+        name: PLUGIN_STYLED_COMPONENTS_NAME,
+        setup (api) {
+            if ('webpack' === api.context.bundlerType) return;
+            const getMergedOptions = (useSSR, config)=>{
+                const isProd = 'production' === config.mode;
+                return (0, external_reduce_configs_namespaceObject.reduceConfigs)({
+                    initial: getDefaultStyledComponentsConfig(isProd, useSSR),
+                    config: pluginOptions
+                });
+            };
+            api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig })=>{
+                var _userConfig_output;
+                const rsbuildConfig = api.getRsbuildConfig();
+                const targets = rsbuildConfig.environments ? Object.values(rsbuildConfig.environments).map((e)=>{
+                    var _e_output, _userConfig_output;
+                    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';
+                }) : [
+                    (null === (_userConfig_output = userConfig.output) || void 0 === _userConfig_output ? void 0 : _userConfig_output.target) || 'web'
+                ];
+                const useSSR = isServerTarget(targets);
+                const mergedOptions = getMergedOptions(useSSR, userConfig);
+                if (!mergedOptions) return userConfig;
+                const extraConfig = {
+                    tools: {
+                        swc: {
+                            jsc: {
+                                experimental: {
+                                    plugins: [
+                                        [
+                                            src_require.resolve('@swc/plugin-styled-components'),
+                                            mergedOptions
+                                        ]
+                                    ]
+                                }
+                            }
+                        }
+                    }
+                };
+                return mergeEnvironmentConfig(extraConfig, userConfig);
+            });
         }
-      };
-      return mergeEnvironmentConfig(extraConfig, userConfig);
     });
-  }
-});
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PLUGIN_STYLED_COMPONENTS_NAME,
-  pluginStyledComponents
+var __webpack_export_target__ = exports;
+for(var i in __webpack_exports__)__webpack_export_target__[i] = __webpack_exports__[i];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
 });

package/dist/index.js

@@ -1,78 +1,59 @@
-import { createRequire } from 'module';
-var require = createRequire(import.meta['url']);
-
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../../node_modules/.pnpm/@modern-js+module-tools@2.56.2_typescript@5.5.2/node_modules/@modern-js/module-tools/shims/esm.js
-import { fileURLToPath } from "url";
-import path from "path";
-
-// src/index.ts
-import { reduceConfigs } from "reduce-configs";
+import * as __WEBPACK_EXTERNAL_MODULE_node_module__ from "node:module";
+import * as __WEBPACK_EXTERNAL_MODULE_reduce_configs__ from "reduce-configs";
+const src_require = (0, __WEBPACK_EXTERNAL_MODULE_node_module__.createRequire)(import.meta.url);
 function isServerTarget(target) {
-  return Array.isArray(target) ? target.includes("node") : target === "node";
+    return Array.isArray(target) ? target.includes('node') : 'node' === target;
 }
-var getDefaultStyledComponentsConfig = (isProd, ssr) => {
-  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
-  };
-};
-var PLUGIN_STYLED_COMPONENTS_NAME = "rsbuild:styled-components";
-var pluginStyledComponents = (pluginOptions = {}) => ({
-  name: PLUGIN_STYLED_COMPONENTS_NAME,
-  setup(api) {
-    if (api.context.bundlerType === "webpack") {
-      return;
-    }
-    const getMergedOptions = (useSSR) => {
-      const isProd = process.env.NODE_ENV === "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);
-      if (!mergedOptions) {
-        return userConfig;
-      }
-      const extraConfig = {
-        tools: {
-          swc: {
-            jsc: {
-              experimental: {
-                plugins: [
-                  [
-                    __require.resolve("@swc/plugin-styled-components"),
-                    mergedOptions
-                  ]
-                ]
-              }
-            }
-          }
+const getDefaultStyledComponentsConfig = (isProd, ssr)=>({
+        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
+    });
+const PLUGIN_STYLED_COMPONENTS_NAME = 'rsbuild:styled-components';
+const pluginStyledComponents = (pluginOptions = {})=>({
+        name: PLUGIN_STYLED_COMPONENTS_NAME,
+        setup (api) {
+            if ('webpack' === api.context.bundlerType) return;
+            const getMergedOptions = (useSSR, config)=>{
+                const isProd = 'production' === config.mode;
+                return (0, __WEBPACK_EXTERNAL_MODULE_reduce_configs__.reduceConfigs)({
+                    initial: getDefaultStyledComponentsConfig(isProd, useSSR),
+                    config: pluginOptions
+                });
+            };
+            api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig })=>{
+                var _userConfig_output;
+                const rsbuildConfig = api.getRsbuildConfig();
+                const targets = rsbuildConfig.environments ? Object.values(rsbuildConfig.environments).map((e)=>{
+                    var _e_output, _userConfig_output;
+                    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';
+                }) : [
+                    (null === (_userConfig_output = userConfig.output) || void 0 === _userConfig_output ? void 0 : _userConfig_output.target) || 'web'
+                ];
+                const useSSR = isServerTarget(targets);
+                const mergedOptions = getMergedOptions(useSSR, userConfig);
+                if (!mergedOptions) return userConfig;
+                const extraConfig = {
+                    tools: {
+                        swc: {
+                            jsc: {
+                                experimental: {
+                                    plugins: [
+                                        [
+                                            src_require.resolve('@swc/plugin-styled-components'),
+                                            mergedOptions
+                                        ]
+                                    ]
+                                }
+                            }
+                        }
+                    }
+                };
+                return mergeEnvironmentConfig(extraConfig, userConfig);
+            });
         }
-      };
-      return mergeEnvironmentConfig(extraConfig, userConfig);
     });
-  }
-});
-export {
-  PLUGIN_STYLED_COMPONENTS_NAME,
-  pluginStyledComponents
-};
+export { PLUGIN_STYLED_COMPONENTS_NAME, pluginStyledComponents };

package/package.json

@@ -1,46 +1,65 @@
 {
   "name": "@rsbuild/plugin-styled-components",
-  "version": "1.0.1-beta.9",
-  "description": "styled-components plugin for Rsbuild",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/web-infra-dev/rsbuild",
-    "directory": "packages/plugin-styled-components"
-  },
+  "version": "1.1.0",
+  "repository": "https://github.com/rspack-contrib/rsbuild-plugin-styled-components",
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist-types/index.d.ts",
+      "types": "./dist/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"
-  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "rslib build",
+		"dev": "rslib build --watch",
+    "lint": "biome check .",
+    "lint:write": "biome check . --write",
+    "prepare": "simple-git-hooks && npm run build",
+    "test": "playwright test",
+    "bump": "npx bumpp"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged"
+  },
+  "nano-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "biome check --write --no-errors-on-unmatched"
+    ]
+  },
   "dependencies": {
-    "@swc/plugin-styled-components": "2.0.10",
+    "@swc/plugin-styled-components": "5.0.0",
     "reduce-configs": "^1.0.0"
   },
   "devDependencies": {
-    "@types/node": "18.x",
-    "typescript": "^5.5.2",
-    "@rsbuild/core": "1.0.1-beta.9"
+    "@biomejs/biome": "^1.9.4",
+    "@playwright/test": "^1.48.2",
+    "@rsbuild/core": "^1.1.0",
+    "@rslib/core": "^0.0.16",
+    "@types/node": "^20.17.6",
+    "nano-staged": "^0.8.0",
+    "playwright": "^1.48.2",
+    "simple-git-hooks": "^2.11.1",
+    "styled-components": "^6.1.13",
+    "typescript": "^5.6.3"
   },
   "peerDependencies": {
-    "@rsbuild/core": "^1.0.1-beta.9"
+    "@rsbuild/core": "1.x"
   },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@9.12.3",
   "publishConfig": {
     "access": "public",
-    "provenance": true,
-    "registry": "https://registry.npmjs.org/"
-  },
-  "scripts": {
-    "build": "modern build",
-    "dev": "modern build --watch"
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
   }
-}
+}

package/dist-types/package.json

@@ -1 +0,0 @@
-{"//":"This file is for making TypeScript work with moduleResolution node16+.","version":"1.0.0"}