@rsbuild/plugin-styled-components 0.0.17 → 0.0.18

package/dist/index.d.ts

@@ -1,18 +1,20 @@
-import { type ChainedConfig, type DefaultRsbuildPlugin } from '@rsbuild/shared';
+import { ChainedConfig, DefaultRsbuildPlugin } from '@rsbuild/shared';
+
 /**
  * the options of [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) or [rspackExperiments.styledComponents](https://www.rspack.dev/guide/loader.html#optionsrspackexperimentsstyledcomponents).
  */
 type StyledComponentsOptions = {
-  displayName?: boolean;
-  ssr?: boolean;
-  fileName?: boolean;
-  meaninglessFileNames?: string[];
-  namespace?: string;
-  topLevelImportPaths?: string[];
-  transpileTemplateLiterals?: boolean;
-  minify?: boolean;
-  pure?: boolean;
-  cssProps?: boolean;
+    displayName?: boolean;
+    ssr?: boolean;
+    fileName?: boolean;
+    meaninglessFileNames?: string[];
+    namespace?: string;
+    topLevelImportPaths?: string[];
+    transpileTemplateLiterals?: boolean;
+    minify?: boolean;
+    pure?: boolean;
+    cssProps?: boolean;
 };
-export declare const pluginStyledComponents: (userConfig?: ChainedConfig<StyledComponentsOptions>) => DefaultRsbuildPlugin;
-export {};
+declare const pluginStyledComponents: (userConfig?: ChainedConfig<StyledComponentsOptions>) => DefaultRsbuildPlugin;
+
+export { pluginStyledComponents };

package/dist/index.js

@@ -26,18 +26,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
 var src_exports = {};
 __export(src_exports, {
   pluginStyledComponents: () => pluginStyledComponents
 });
 module.exports = __toCommonJS(src_exports);
 var import_shared = require("@rsbuild/shared");
-const pluginStyledComponents = (userConfig = {}) => ({
+var pluginStyledComponents = (userConfig = {}) => ({
   name: "plugin-styled-components",
   setup(api) {
     api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd }) => {
       const { bundlerType } = api.context;
-      const isSSR = (0, import_shared.useSSR)(api.context.target);
+      const isSSR = (0, import_shared.isServerTarget)(api.context.target);
       const styledComponentsOptions = (0, import_shared.mergeChainedOptions)({
         defaults: (0, import_shared.getDefaultStyledComponentsConfig)(isProd, isSSR),
         options: userConfig

package/dist/index.mjs

@@ -0,0 +1,69 @@
+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.39.2_typescript@5.2.2/node_modules/@modern-js/module-tools/shims/esm.js
+import { fileURLToPath } from "url";
+import path from "path";
+
+// ../../scripts/require_shims.js
+import { createRequire } from "module";
+global.require = createRequire(import.meta.url);
+
+// src/index.ts
+import {
+  isServerTarget,
+  mergeChainedOptions,
+  getDefaultStyledComponentsConfig
+} from "@rsbuild/shared";
+var pluginStyledComponents = (userConfig = {}) => ({
+  name: "plugin-styled-components",
+  setup(api) {
+    api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd }) => {
+      const { bundlerType } = api.context;
+      const isSSR = isServerTarget(api.context.target);
+      const styledComponentsOptions = mergeChainedOptions({
+        defaults: getDefaultStyledComponentsConfig(isProd, isSSR),
+        options: userConfig
+      });
+      if (!styledComponentsOptions) {
+        return;
+      }
+      [CHAIN_ID.RULE.JS, CHAIN_ID.RULE.JS_DATA_URI].forEach((ruleId) => {
+        if (chain.module.rules.has(ruleId)) {
+          const rule = chain.module.rule(ruleId);
+          if (rule.uses.has(CHAIN_ID.USE.SWC)) {
+            if (bundlerType === "rspack") {
+              rule.use(CHAIN_ID.USE.SWC).tap((options) => {
+                options.rspackExperiments ?? (options.rspackExperiments = {});
+                options.rspackExperiments.styledComponents = styledComponentsOptions;
+                return options;
+              });
+            } else {
+              rule.use(CHAIN_ID.USE.SWC).tap((swc) => {
+                swc.extensions.styledComponents = styledComponentsOptions;
+                return swc;
+              });
+            }
+          } else if (rule.uses.has(CHAIN_ID.USE.BABEL)) {
+            rule.use(CHAIN_ID.USE.BABEL).tap((babelConfig) => {
+              babelConfig.plugins ?? (babelConfig.plugins = []);
+              babelConfig.plugins.push([
+                __require.resolve("babel-plugin-styled-components"),
+                styledComponentsOptions
+              ]);
+              return babelConfig;
+            });
+          }
+        }
+      });
+    });
+  }
+});
+export {
+  pluginStyledComponents
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-styled-components",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "styled-components plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -11,6 +11,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
       "default": "./dist/index.js"
     }
   },
@@ -21,15 +22,15 @@
   ],
   "dependencies": {
     "babel-plugin-styled-components": "1.13.3",
-    "@rsbuild/shared": "0.0.17"
+    "@rsbuild/shared": "0.0.18"
   },
   "devDependencies": {
     "@types/node": "^16",
     "typescript": "^5.2.2",
-    "@rsbuild/core": "0.0.17",
-    "@rsbuild/plugin-swc": "0.0.17",
-    "@rsbuild/test-helper": "0.0.17",
-    "@rsbuild/webpack": "0.0.17"
+    "@rsbuild/core": "0.0.18",
+    "@rsbuild/plugin-swc": "0.0.18",
+    "@rsbuild/test-helper": "0.0.18",
+    "@rsbuild/webpack": "0.0.18"
   },
   "publishConfig": {
     "access": "public",