@modern-js/plugin-styled-components 0.0.0-canary-20251127032505

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @modern-js/plugin-styled-components
+
+## 0.0.0-canary-20251127032505
+
+### Patch Changes
+
+- 3414a3e: feat: add plugin-styled-components
+  feat: 新增 styled-components 插件
+- 9de9720: feat: add styled-components plugin options and fix docs
+  feat: styled-components 插件增加配置参数并修复相关文档

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Modern.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/extender/stream.js

@@ -0,0 +1,57 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (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_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    StreamStyledExtender: ()=>StreamStyledExtender
+});
+const external_styled_components_namespaceObject = require("styled-components");
+class StreamStyledExtender {
+    init(params) {
+        this.sheet = new external_styled_components_namespaceObject.ServerStyleSheet();
+        this.rootElement = this.sheet.collectStyles(params.rootElement);
+        this.forceStream2String = params.forceStream2String;
+    }
+    modifyRootElement(rootElement) {
+        return this.rootElement || rootElement;
+    }
+    getStyleTags() {
+        return this.forceStream2String && this.sheet ? this.sheet.getStyleTags() : '';
+    }
+    processStream(stream) {
+        return this.sheet ? this.sheet.interleaveWithNodeStream(stream) : stream;
+    }
+    constructor(){
+        this.sheet = null;
+        this.rootElement = null;
+        this.forceStream2String = false;
+    }
+}
+exports.StreamStyledExtender = __webpack_exports__.StreamStyledExtender;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "StreamStyledExtender"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/extender/string.js

@@ -0,0 +1,98 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (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_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    StyledCollector: ()=>StyledCollector,
+    RenderLevel: ()=>string_RenderLevel
+});
+const external_styled_components_namespaceObject = require("styled-components");
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) return descriptor.get.call(receiver);
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
+        if (!descriptor.writable) throw new TypeError("attempted to set read only private field");
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
+var string_RenderLevel = /*#__PURE__*/ function(RenderLevel) {
+    RenderLevel[RenderLevel["CLIENT_RENDER"] = 0] = "CLIENT_RENDER";
+    RenderLevel[RenderLevel["SERVER_PREFETCH"] = 1] = "SERVER_PREFETCH";
+    RenderLevel[RenderLevel["SERVER_RENDER"] = 2] = "SERVER_RENDER";
+    return RenderLevel;
+}({});
+var _sheet = /*#__PURE__*/ new WeakMap(), _chunkSet = /*#__PURE__*/ new WeakMap();
+class StyledCollector {
+    collect(comopnent) {
+        return _class_private_field_get(this, _sheet).collectStyles(comopnent);
+    }
+    effect() {
+        const css = _class_private_field_get(this, _sheet).getStyleTags();
+        _class_private_field_get(this, _chunkSet).cssChunk += css;
+    }
+    constructor(chunkSet){
+        _class_private_field_init(this, _sheet, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _chunkSet, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_set(this, _sheet, new external_styled_components_namespaceObject.ServerStyleSheet());
+        _class_private_field_set(this, _chunkSet, chunkSet);
+    }
+}
+exports.RenderLevel = __webpack_exports__.RenderLevel;
+exports.StyledCollector = __webpack_exports__.StyledCollector;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "RenderLevel",
+    "StyledCollector"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/index.js

@@ -0,0 +1,71 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (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_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    default: ()=>src,
+    styledComponentsPlugin: ()=>styledComponentsPlugin
+});
+const plugin_styled_components_namespaceObject = require("@rsbuild/plugin-styled-components");
+const styledComponentsPlugin = (options)=>({
+        name: '@modern-js/plugin-styled-components',
+        setup (api) {
+            api.config(()=>({
+                    builderPlugins: [
+                        (0, plugin_styled_components_namespaceObject.pluginStyledComponents)({
+                            ...options,
+                            topLevelImportPaths: [
+                                '@modern-js/plugin-styled-components/styled'
+                            ]
+                        })
+                    ],
+                    resolve: {
+                        alias: {
+                            'styled-components': require.resolve('styled-components')
+                        }
+                    }
+                }));
+            api._internalRuntimePlugins(async ({ entrypoint, plugins })=>{
+                plugins.push({
+                    name: 'styledComponents',
+                    path: '@modern-js/plugin-styled-components/runtime',
+                    config: {}
+                });
+                return {
+                    entrypoint,
+                    plugins
+                };
+            });
+        }
+    });
+const src = styledComponentsPlugin;
+exports["default"] = __webpack_exports__["default"];
+exports.styledComponentsPlugin = __webpack_exports__.styledComponentsPlugin;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "default",
+    "styledComponentsPlugin"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/runtime.js

@@ -0,0 +1,44 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (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_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    styledComponentsPlugin: ()=>styledComponentsPlugin
+});
+const stream_js_namespaceObject = require("./extender/stream.js");
+const string_js_namespaceObject = require("./extender/string.js");
+const styledComponentsPlugin = ()=>({
+        name: '@modern-js/plugin-styled-components',
+        setup (api) {
+            api.extendStringSSRCollectors(({ chunkSet })=>new string_js_namespaceObject.StyledCollector(chunkSet));
+            api.extendStreamSSR(()=>new stream_js_namespaceObject.StreamStyledExtender());
+        }
+    });
+exports.styledComponentsPlugin = __webpack_exports__.styledComponentsPlugin;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "styledComponentsPlugin"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/styled.js

@@ -0,0 +1,66 @@
+"use strict";
+var __webpack_modules__ = {
+    "styled-components": function(module) {
+        module.exports = require("styled-components");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (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_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__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();
+})();
+exports["default"] = __webpack_exports__["default"];
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/esm/extender/stream.mjs

@@ -0,0 +1,23 @@
+import { ServerStyleSheet } from "styled-components";
+class StreamStyledExtender {
+    init(params) {
+        this.sheet = new ServerStyleSheet();
+        this.rootElement = this.sheet.collectStyles(params.rootElement);
+        this.forceStream2String = params.forceStream2String;
+    }
+    modifyRootElement(rootElement) {
+        return this.rootElement || rootElement;
+    }
+    getStyleTags() {
+        return this.forceStream2String && this.sheet ? this.sheet.getStyleTags() : '';
+    }
+    processStream(stream) {
+        return this.sheet ? this.sheet.interleaveWithNodeStream(stream) : stream;
+    }
+    constructor(){
+        this.sheet = null;
+        this.rootElement = null;
+        this.forceStream2String = false;
+    }
+}
+export { StreamStyledExtender };

package/dist/esm/extender/string.mjs

@@ -0,0 +1,61 @@
+import { ServerStyleSheet } from "styled-components";
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) return descriptor.get.call(receiver);
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
+        if (!descriptor.writable) throw new TypeError("attempted to set read only private field");
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
+var string_RenderLevel = /*#__PURE__*/ function(RenderLevel) {
+    RenderLevel[RenderLevel["CLIENT_RENDER"] = 0] = "CLIENT_RENDER";
+    RenderLevel[RenderLevel["SERVER_PREFETCH"] = 1] = "SERVER_PREFETCH";
+    RenderLevel[RenderLevel["SERVER_RENDER"] = 2] = "SERVER_RENDER";
+    return RenderLevel;
+}({});
+var _sheet = /*#__PURE__*/ new WeakMap(), _chunkSet = /*#__PURE__*/ new WeakMap();
+class StyledCollector {
+    collect(comopnent) {
+        return _class_private_field_get(this, _sheet).collectStyles(comopnent);
+    }
+    effect() {
+        const css = _class_private_field_get(this, _sheet).getStyleTags();
+        _class_private_field_get(this, _chunkSet).cssChunk += css;
+    }
+    constructor(chunkSet){
+        _class_private_field_init(this, _sheet, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _chunkSet, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_set(this, _sheet, new ServerStyleSheet());
+        _class_private_field_set(this, _chunkSet, chunkSet);
+    }
+}
+export { string_RenderLevel as RenderLevel, StyledCollector };

package/dist/esm/index.mjs

@@ -0,0 +1,34 @@
+import { pluginStyledComponents } from "@rsbuild/plugin-styled-components";
+const styledComponentsPlugin = (options)=>({
+        name: '@modern-js/plugin-styled-components',
+        setup (api) {
+            api.config(()=>({
+                    builderPlugins: [
+                        pluginStyledComponents({
+                            ...options,
+                            topLevelImportPaths: [
+                                '@modern-js/plugin-styled-components/styled'
+                            ]
+                        })
+                    ],
+                    resolve: {
+                        alias: {
+                            'styled-components': require.resolve('styled-components')
+                        }
+                    }
+                }));
+            api._internalRuntimePlugins(async ({ entrypoint, plugins })=>{
+                plugins.push({
+                    name: 'styledComponents',
+                    path: '@modern-js/plugin-styled-components/runtime',
+                    config: {}
+                });
+                return {
+                    entrypoint,
+                    plugins
+                };
+            });
+        }
+    });
+const src = styledComponentsPlugin;
+export { src as default, styledComponentsPlugin };

package/dist/esm/runtime.mjs

@@ -0,0 +1,10 @@
+import { StreamStyledExtender } from "./extender/stream";
+import { StyledCollector } from "./extender/string";
+const styledComponentsPlugin = ()=>({
+        name: '@modern-js/plugin-styled-components',
+        setup (api) {
+            api.extendStringSSRCollectors(({ chunkSet })=>new StyledCollector(chunkSet));
+            api.extendStreamSSR(()=>new StreamStyledExtender());
+        }
+    });
+export { styledComponentsPlugin };

package/dist/esm/styled.mjs

@@ -0,0 +1,4 @@
+import styled_components from "styled-components";
+export * from "styled-components";
+const styled = styled_components;
+export { styled as default };

package/dist/esm-node/extender/stream.mjs

@@ -0,0 +1,23 @@
+import { ServerStyleSheet } from "styled-components";
+class StreamStyledExtender {
+    init(params) {
+        this.sheet = new ServerStyleSheet();
+        this.rootElement = this.sheet.collectStyles(params.rootElement);
+        this.forceStream2String = params.forceStream2String;
+    }
+    modifyRootElement(rootElement) {
+        return this.rootElement || rootElement;
+    }
+    getStyleTags() {
+        return this.forceStream2String && this.sheet ? this.sheet.getStyleTags() : '';
+    }
+    processStream(stream) {
+        return this.sheet ? this.sheet.interleaveWithNodeStream(stream) : stream;
+    }
+    constructor(){
+        this.sheet = null;
+        this.rootElement = null;
+        this.forceStream2String = false;
+    }
+}
+export { StreamStyledExtender };

package/dist/esm-node/extender/string.mjs

@@ -0,0 +1,61 @@
+import { ServerStyleSheet } from "styled-components";
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) return descriptor.get.call(receiver);
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
+        if (!descriptor.writable) throw new TypeError("attempted to set read only private field");
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
+var string_RenderLevel = /*#__PURE__*/ function(RenderLevel) {
+    RenderLevel[RenderLevel["CLIENT_RENDER"] = 0] = "CLIENT_RENDER";
+    RenderLevel[RenderLevel["SERVER_PREFETCH"] = 1] = "SERVER_PREFETCH";
+    RenderLevel[RenderLevel["SERVER_RENDER"] = 2] = "SERVER_RENDER";
+    return RenderLevel;
+}({});
+var _sheet = /*#__PURE__*/ new WeakMap(), _chunkSet = /*#__PURE__*/ new WeakMap();
+class StyledCollector {
+    collect(comopnent) {
+        return _class_private_field_get(this, _sheet).collectStyles(comopnent);
+    }
+    effect() {
+        const css = _class_private_field_get(this, _sheet).getStyleTags();
+        _class_private_field_get(this, _chunkSet).cssChunk += css;
+    }
+    constructor(chunkSet){
+        _class_private_field_init(this, _sheet, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _chunkSet, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_set(this, _sheet, new ServerStyleSheet());
+        _class_private_field_set(this, _chunkSet, chunkSet);
+    }
+}
+export { string_RenderLevel as RenderLevel, StyledCollector };

package/dist/esm-node/index.mjs

@@ -0,0 +1,34 @@
+import { pluginStyledComponents } from "@rsbuild/plugin-styled-components";
+const styledComponentsPlugin = (options)=>({
+        name: '@modern-js/plugin-styled-components',
+        setup (api) {
+            api.config(()=>({
+                    builderPlugins: [
+                        pluginStyledComponents({
+                            ...options,
+                            topLevelImportPaths: [
+                                '@modern-js/plugin-styled-components/styled'
+                            ]
+                        })
+                    ],
+                    resolve: {
+                        alias: {
+                            'styled-components': require.resolve('styled-components')
+                        }
+                    }
+                }));
+            api._internalRuntimePlugins(async ({ entrypoint, plugins })=>{
+                plugins.push({
+                    name: 'styledComponents',
+                    path: '@modern-js/plugin-styled-components/runtime',
+                    config: {}
+                });
+                return {
+                    entrypoint,
+                    plugins
+                };
+            });
+        }
+    });
+const src = styledComponentsPlugin;
+export { src as default, styledComponentsPlugin };

package/dist/esm-node/runtime.mjs

@@ -0,0 +1,10 @@
+import { StreamStyledExtender } from "./extender/stream.mjs";
+import { StyledCollector } from "./extender/string.mjs";
+const styledComponentsPlugin = ()=>({
+        name: '@modern-js/plugin-styled-components',
+        setup (api) {
+            api.extendStringSSRCollectors(({ chunkSet })=>new StyledCollector(chunkSet));
+            api.extendStreamSSR(()=>new StreamStyledExtender());
+        }
+    });
+export { styledComponentsPlugin };

package/dist/esm-node/styled.mjs

@@ -0,0 +1,4 @@
+import styled_components from "styled-components";
+export * from "styled-components";
+const styled = styled_components;
+export { styled as default };

package/dist/types/extender/stream.d.ts

@@ -0,0 +1,12 @@
+export declare class StreamStyledExtender {
+    private sheet;
+    private rootElement;
+    private forceStream2String;
+    init(params: {
+        rootElement: React.ReactElement;
+        forceStream2String: boolean;
+    }): void;
+    modifyRootElement(rootElement: React.ReactElement): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    getStyleTags(): any;
+    processStream(stream: NodeJS.ReadWriteStream): any;
+}

package/dist/types/extender/string.d.ts

@@ -0,0 +1,24 @@
+import { ServerStyleSheet } from 'styled-components';
+export interface Collector {
+    collect?: (comopnent: React.ReactElement) => React.ReactElement;
+    effect: () => void | Promise<void>;
+}
+export declare enum RenderLevel {
+    CLIENT_RENDER = 0,
+    SERVER_PREFETCH = 1,
+    SERVER_RENDER = 2
+}
+export type ChunkSet = {
+    renderLevel: RenderLevel;
+    ssrScripts: string;
+    jsChunk: string;
+    cssChunk: string;
+};
+export declare class StyledCollector implements Collector {
+    #private;
+    constructor(chunkSet: ChunkSet);
+    collect(comopnent: React.ReactElement): import("react").ReactElement<{
+        sheet: ServerStyleSheet;
+    }, string | import("react").JSXElementConstructor<any>>;
+    effect(): void;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+import type { AppTools, CliPlugin } from '@modern-js/app-tools';
+import { type PluginStyledComponentsOptions } from '@rsbuild/plugin-styled-components';
+export declare const styledComponentsPlugin: (options?: PluginStyledComponentsOptions) => CliPlugin<AppTools>;
+export default styledComponentsPlugin;

package/dist/types/runtime.d.ts

@@ -0,0 +1,2 @@
+import type { RuntimePlugin } from '@modern-js/runtime';
+export declare const styledComponentsPlugin: () => RuntimePlugin;

package/dist/types/styled.d.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+export default styled;
+export * from 'styled-components';

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@modern-js/plugin-styled-components",
+  "description": "A Modern.js plugin for styled-components.",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "framework",
+    "modern",
+    "modern.js"
+  ],
+  "version": "0.0.0-canary-20251127032505",
+  "jsnext:source": "./src/index.ts",
+  "types": "./src/index.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "dependencies": {
+    "@swc/helpers": "^0.5.17",
+    "@rsbuild/plugin-styled-components": "1.5.0"
+  },
+  "devDependencies": {
+    "@rslib/core": "0.18.0",
+    "@types/styled-components": "^5.1.36",
+    "styled-components": "^5.3.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20",
+    "typescript": "^5.3.3",
+    "@modern-js/app-tools": "0.0.0-canary-20251127032505",
+    "@modern-js/rslib": "0.0.0-canary-20251127032505",
+    "@modern-js/runtime": "0.0.0-canary-20251127032505"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.3.1"
+  },
+  "peerDependenciesMeta": {
+    "styled-components": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "jsnext:source": "./src/index.ts",
+      "node": {
+        "import": "./dist/esm-node/index.mjs",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.mjs"
+    },
+    "./runtime": {
+      "types": "./dist/types/runtime.d.ts",
+      "jsnext:source": "./src/runtime.ts",
+      "node": {
+        "import": "./dist/esm-node/runtime.mjs",
+        "require": "./dist/cjs/runtime.js"
+      },
+      "default": "./dist/esm/runtime.mjs"
+    },
+    "./styled": {
+      "types": "./dist/types/styled.d.ts",
+      "jsnext:source": "./src/styled.ts",
+      "node": {
+        "import": "./dist/esm-node/styled.mjs",
+        "require": "./dist/cjs/styled.js"
+      },
+      "default": "./dist/esm/styled.mjs"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types/index.d.ts"
+      ],
+      "runtime": [
+        "./dist/types/runtime.d.ts"
+      ],
+      "styled": [
+        "./dist/types/styled.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "rslib build --watch",
+    "build": "rslib build"
+  }
+}

package/rslib.config.ts

@@ -0,0 +1,4 @@
+import { rslibConfig } from '@modern-js/rslib';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig(rslibConfig);

package/src/extender/stream.ts

@@ -0,0 +1,30 @@
+import { ServerStyleSheet } from 'styled-components';
+
+export class StreamStyledExtender {
+  private sheet: any | null = null;
+  private rootElement: React.ReactElement | null = null;
+  private forceStream2String = false;
+
+  init(params: {
+    rootElement: React.ReactElement;
+    forceStream2String: boolean;
+  }) {
+    this.sheet = new ServerStyleSheet();
+    this.rootElement = this.sheet.collectStyles(params.rootElement);
+    this.forceStream2String = params.forceStream2String;
+  }
+
+  modifyRootElement(rootElement: React.ReactElement) {
+    return this.rootElement || rootElement;
+  }
+
+  getStyleTags() {
+    return this.forceStream2String && this.sheet
+      ? this.sheet.getStyleTags()
+      : '';
+  }
+
+  processStream(stream: NodeJS.ReadWriteStream) {
+    return this.sheet ? this.sheet.interleaveWithNodeStream(stream) : stream;
+  }
+}

package/src/extender/string.ts

@@ -0,0 +1,39 @@
+import { ServerStyleSheet } from 'styled-components';
+
+export interface Collector {
+  collect?: (comopnent: React.ReactElement) => React.ReactElement;
+  effect: () => void | Promise<void>;
+}
+
+export enum RenderLevel {
+  CLIENT_RENDER = 0,
+  SERVER_PREFETCH = 1,
+  SERVER_RENDER = 2,
+}
+
+export type ChunkSet = {
+  renderLevel: RenderLevel;
+  ssrScripts: string;
+  jsChunk: string;
+  cssChunk: string;
+};
+
+export class StyledCollector implements Collector {
+  #sheet: ServerStyleSheet = new ServerStyleSheet();
+
+  #chunkSet: ChunkSet;
+
+  constructor(chunkSet: ChunkSet) {
+    this.#chunkSet = chunkSet;
+  }
+
+  collect(comopnent: React.ReactElement) {
+    return this.#sheet.collectStyles(comopnent);
+  }
+
+  effect() {
+    const css = this.#sheet.getStyleTags();
+
+    this.#chunkSet.cssChunk += css;
+  }
+}

package/src/index.ts

@@ -0,0 +1,41 @@
+import type { AppTools, CliPlugin } from '@modern-js/app-tools';
+import {
+  type PluginStyledComponentsOptions,
+  pluginStyledComponents,
+} from '@rsbuild/plugin-styled-components';
+
+export const styledComponentsPlugin = (
+  options?: PluginStyledComponentsOptions,
+): CliPlugin<AppTools> => ({
+  name: '@modern-js/plugin-styled-components',
+
+  setup(api) {
+    api.config(() => {
+      return {
+        builderPlugins: [
+          pluginStyledComponents({
+            ...options,
+            // https://github.com/styled-components/babel-plugin-styled-components/issues/287
+            topLevelImportPaths: ['@modern-js/plugin-styled-components/styled'],
+          }),
+        ],
+        resolve: {
+          alias: {
+            'styled-components': require.resolve('styled-components'),
+          },
+        },
+      };
+    });
+
+    api._internalRuntimePlugins(async ({ entrypoint, plugins }) => {
+      plugins.push({
+        name: 'styledComponents',
+        path: '@modern-js/plugin-styled-components/runtime',
+        config: {},
+      });
+      return { entrypoint, plugins };
+    });
+  },
+});
+
+export default styledComponentsPlugin;

package/src/runtime.ts

@@ -0,0 +1,16 @@
+import type { RuntimePlugin } from '@modern-js/runtime';
+import { StreamStyledExtender } from './extender/stream';
+import { StyledCollector } from './extender/string';
+
+export const styledComponentsPlugin = (): RuntimePlugin => ({
+  name: '@modern-js/plugin-styled-components',
+  setup(api) {
+    api.extendStringSSRCollectors(({ chunkSet }) => {
+      return new StyledCollector(chunkSet);
+    });
+
+    api.extendStreamSSR(() => {
+      return new StreamStyledExtender();
+    });
+  },
+});

package/src/styled.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export default styled;
+
+export * from 'styled-components';

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+}