@modern-js/plugin-styled-components 3.0.4 → 3.1.0

package/dist/cjs/index.js

@@ -31,12 +31,14 @@ const plugin_styled_components_namespaceObject = require("@rsbuild/plugin-styled
 const styledComponentsPlugin = (options)=>({
         name: '@modern-js/plugin-styled-components',
         setup (api) {
-            api.config(()=>({
+            api.config(()=>{
+                const { metaName } = api.getAppContext();
+                return {
                     builderPlugins: [
                         (0, plugin_styled_components_namespaceObject.pluginStyledComponents)({
                             ...options,
                             topLevelImportPaths: [
-                                '@modern-js/plugin-styled-components/styled'
+                                `@${metaName}/plugin-styled-components/styled`
                             ]
                         })
                     ],
@@ -45,7 +47,8 @@ const styledComponentsPlugin = (options)=>({
                             'styled-components': require.resolve('styled-components')
                         }
                     }
-                }));
+                };
+            });
             api._internalRuntimePlugins(async ({ entrypoint, plugins })=>{
                 const { metaName } = api.getAppContext();
                 plugins.push({

package/dist/cjs/styled.js

@@ -51,11 +51,16 @@ var __webpack_exports__ = {};
         default: ()=>__rspack_default_export
     });
     var styled_components__rspack_import_0 = __webpack_require__("styled-components");
-    var styled_components__rspack_import_0_default = /*#__PURE__*/ __webpack_require__.n(styled_components__rspack_import_0);
     var __rspack_reexport = {};
     for(const __rspack_import_key in styled_components__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>styled_components__rspack_import_0[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    const __rspack_default_export = styled_components__rspack_import_0_default();
+    function resolveStyledComponents() {
+        const moduleExports = styled_components__rspack_import_0;
+        if (moduleExports.default?.default !== void 0) return moduleExports.default.default;
+        return moduleExports.default ?? moduleExports;
+    }
+    const styled = resolveStyledComponents();
+    const __rspack_default_export = styled;
 })();
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/esm/index.mjs

@@ -2,12 +2,14 @@ import { pluginStyledComponents } from "@rsbuild/plugin-styled-components";
 const styledComponentsPlugin = (options)=>({
         name: '@modern-js/plugin-styled-components',
         setup (api) {
-            api.config(()=>({
+            api.config(()=>{
+                const { metaName } = api.getAppContext();
+                return {
                     builderPlugins: [
                         pluginStyledComponents({
                             ...options,
                             topLevelImportPaths: [
-                                '@modern-js/plugin-styled-components/styled'
+                                `@${metaName}/plugin-styled-components/styled`
                             ]
                         })
                     ],
@@ -16,7 +18,8 @@ const styledComponentsPlugin = (options)=>({
                             'styled-components': require.resolve('styled-components')
                         }
                     }
-                }));
+                };
+            });
             api._internalRuntimePlugins(async ({ entrypoint, plugins })=>{
                 const { metaName } = api.getAppContext();
                 plugins.push({

package/dist/esm/styled.mjs

@@ -1,4 +1,10 @@
-import styled_components from "styled-components";
 export * from "styled-components";
-const styled = styled_components;
-export { styled as default };
+import * as __rspack_external_styled_components_326b429a from "styled-components";
+function resolveStyledComponents() {
+    const moduleExports = __rspack_external_styled_components_326b429a;
+    if (moduleExports.default?.default !== void 0) return moduleExports.default.default;
+    return moduleExports.default ?? moduleExports;
+}
+const styled = resolveStyledComponents();
+const src_styled = styled;
+export { src_styled as default };

package/dist/esm-node/index.mjs

@@ -4,12 +4,14 @@ import { pluginStyledComponents } from "@rsbuild/plugin-styled-components";
 const styledComponentsPlugin = (options)=>({
         name: '@modern-js/plugin-styled-components',
         setup (api) {
-            api.config(()=>({
+            api.config(()=>{
+                const { metaName } = api.getAppContext();
+                return {
                     builderPlugins: [
                         pluginStyledComponents({
                             ...options,
                             topLevelImportPaths: [
-                                '@modern-js/plugin-styled-components/styled'
+                                `@${metaName}/plugin-styled-components/styled`
                             ]
                         })
                     ],
@@ -18,7 +20,8 @@ const styledComponentsPlugin = (options)=>({
                             'styled-components': require.resolve('styled-components')
                         }
                     }
-                }));
+                };
+            });
             api._internalRuntimePlugins(async ({ entrypoint, plugins })=>{
                 const { metaName } = api.getAppContext();
                 plugins.push({

package/dist/esm-node/styled.mjs

@@ -1,5 +1,11 @@
 import "node:module";
-import styled_components from "styled-components";
 export * from "styled-components";
-const styled = styled_components;
-export { styled as default };
+import * as __rspack_external_styled_components_326b429a from "styled-components";
+function resolveStyledComponents() {
+    const moduleExports = __rspack_external_styled_components_326b429a;
+    if (moduleExports.default?.default !== void 0) return moduleExports.default.default;
+    return moduleExports.default ?? moduleExports;
+}
+const styled = resolveStyledComponents();
+const src_styled = styled;
+export { src_styled as default };

package/dist/types/styled.d.ts

@@ -1,3 +1,4 @@
-import styled from 'styled-components';
+import type { StyledInterface } from 'styled-components';
+declare const styled: StyledInterface;
 export default styled;
 export * from 'styled-components';

package/package.json

@@ -8,7 +8,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.0.4",
+  "version": "3.1.0",
   "types": "./src/index.ts",
   "main": "./dist/cjs/index.js",
   "export": {
@@ -36,18 +36,13 @@
     "@types/styled-components": "^5.1.36",
     "styled-components": "^5.3.1",
     "typescript": "^5.3.3",
-    "@modern-js/app-tools": "3.0.4",
-    "@modern-js/rslib": "2.68.10",
-    "@modern-js/runtime": "3.0.4"
+    "@modern-js/app-tools": "3.1.0",
+    "@modern-js/runtime": "3.1.0",
+    "@modern-js/rslib": "2.68.10"
   },
   "peerDependencies": {
     "styled-components": "^5.3.1"
   },
-  "peerDependenciesMeta": {
-    "styled-components": {
-      "optional": true
-    }
-  },
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/src/index.ts

@@ -11,12 +11,16 @@ export const styledComponentsPlugin = (
 
   setup(api) {
     api.config(() => {
+      const { metaName } = api.getAppContext();
+
       return {
         builderPlugins: [
           pluginStyledComponents({
             ...options,
             // https://github.com/styled-components/babel-plugin-styled-components/issues/287
-            topLevelImportPaths: ['@modern-js/plugin-styled-components/styled'],
+            topLevelImportPaths: [
+              `@${metaName}/plugin-styled-components/styled`,
+            ],
           }),
         ],
         resolve: {

package/src/styled.ts

@@ -1,5 +1,22 @@
-import styled from 'styled-components';
+import * as styledComponents from 'styled-components';
+import type { StyledInterface } from 'styled-components';
 
-export default styled;
+/**
+ * Safely resolves the styled-components default export.
+ * This helper function handles potential interoperability issues between CJS and ESM,
+ * where the default export might be nested or directly attached.
+ */
+function resolveStyledComponents(): StyledInterface {
+  const moduleExports = styledComponents as any;
+
+  if (moduleExports.default?.default !== undefined) {
+    return moduleExports.default.default;
+  }
+
+  return moduleExports.default ?? moduleExports;
+}
 
+const styled: StyledInterface = resolveStyledComponents();
+
+export default styled;
 export * from 'styled-components';