@bleedingdev/modern-js-plugin-styled-components 3.2.0-ultramodern.0

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 ("u" > 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 __rspack_i in __webpack_exports__)if (-1 === [
+    "StreamStyledExtender"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_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 ("u" > 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__, {
+    RenderLevel: ()=>string_RenderLevel,
+    StyledCollector: ()=>StyledCollector
+});
+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 __rspack_i in __webpack_exports__)if (-1 === [
+    "RenderLevel",
+    "StyledCollector"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/index.js

@@ -0,0 +1,75 @@
+"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 ("u" > 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(()=>{
+                const { metaName } = api.getAppContext();
+                return {
+                    builderPlugins: [
+                        (0, plugin_styled_components_namespaceObject.pluginStyledComponents)({
+                            ...options,
+                            topLevelImportPaths: [
+                                `@${metaName}/plugin-styled-components/styled`
+                            ]
+                        })
+                    ],
+                    resolve: {
+                        alias: {
+                            'styled-components': require.resolve('styled-components')
+                        }
+                    }
+                };
+            });
+            api._internalRuntimePlugins(async ({ entrypoint, plugins })=>{
+                const { metaName } = api.getAppContext();
+                plugins.push({
+                    name: 'styledComponents',
+                    path: `@${metaName}/plugin-styled-components/runtime`,
+                    config: {}
+                });
+                return {
+                    entrypoint,
+                    plugins
+                };
+            });
+        }
+    });
+const src = styledComponentsPlugin;
+exports["default"] = __webpack_exports__["default"];
+exports.styledComponentsPlugin = __webpack_exports__.styledComponentsPlugin;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default",
+    "styledComponentsPlugin"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_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 ("u" > 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 __rspack_i in __webpack_exports__)if (-1 === [
+    "styledComponentsPlugin"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/styled.js

@@ -0,0 +1,71 @@
+"use strict";
+var __webpack_modules__ = {
+    "styled-components" (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 ("u" > 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 __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);
+    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 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_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 { StyledCollector, string_RenderLevel as RenderLevel };

package/dist/esm/index.mjs

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

package/dist/esm/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/styled.mjs

@@ -0,0 +1,10 @@
+import * as __rspack_external_styled_components_326b429a from "styled-components";
+export * 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 default src_styled;

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

@@ -0,0 +1,24 @@
+import "node:module";
+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,62 @@
+import "node:module";
+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 { StyledCollector, string_RenderLevel as RenderLevel };

package/dist/esm-node/index.mjs

@@ -0,0 +1,41 @@
+import __rslib_shim_module__ from "node:module";
+const require = /*#__PURE__*/ __rslib_shim_module__.createRequire(/*#__PURE__*/ (()=>import.meta.url)());
+import { pluginStyledComponents } from "@rsbuild/plugin-styled-components";
+const styledComponentsPlugin = (options)=>({
+        name: '@modern-js/plugin-styled-components',
+        setup (api) {
+            api.config(()=>{
+                const { metaName } = api.getAppContext();
+                return {
+                    builderPlugins: [
+                        pluginStyledComponents({
+                            ...options,
+                            topLevelImportPaths: [
+                                `@${metaName}/plugin-styled-components/styled`
+                            ]
+                        })
+                    ],
+                    resolve: {
+                        alias: {
+                            'styled-components': require.resolve('styled-components')
+                        }
+                    }
+                };
+            });
+            api._internalRuntimePlugins(async ({ entrypoint, plugins })=>{
+                const { metaName } = api.getAppContext();
+                plugins.push({
+                    name: 'styledComponents',
+                    path: `@${metaName}/plugin-styled-components/runtime`,
+                    config: {}
+                });
+                return {
+                    entrypoint,
+                    plugins
+                };
+            });
+        }
+    });
+const src = styledComponentsPlugin;
+export default src;
+export { styledComponentsPlugin };

package/dist/esm-node/runtime.mjs

@@ -0,0 +1,11 @@
+import "node:module";
+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,11 @@
+import "node:module";
+import * as __rspack_external_styled_components_326b429a from "styled-components";
+export * 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 default src_styled;

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,21 @@
+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").JSX.Element;
+    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,158 @@
+import * as styledComponents from 'styled-components';
+declare const styled: (<Target extends styledComponents.WebTarget, InjectedProps extends object = import("styled-components/dist/types").BaseObject>(tag: Target) => styledComponents.StyledInstance<"web", Target, Target extends import("styled-components/dist/types").KnownTarget ? React.ComponentPropsWithRef<Target> & InjectedProps : InjectedProps, import("styled-components/dist/types").BaseObject, never>) & {
+    symbol: styledComponents.StyledInstance<"web", "symbol", import("react").SVGProps<SVGSymbolElement>, import("styled-components/dist/types").BaseObject, never>;
+    object: styledComponents.StyledInstance<"web", "object", import("react").DetailedHTMLProps<import("react").ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, import("styled-components/dist/types").BaseObject, never>;
+    main: styledComponents.StyledInstance<"web", "main", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    output: styledComponents.StyledInstance<"web", "output", import("react").DetailedHTMLProps<import("react").OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>, import("styled-components/dist/types").BaseObject, never>;
+    search: styledComponents.StyledInstance<"web", "search", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    small: styledComponents.StyledInstance<"web", "small", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    sub: styledComponents.StyledInstance<"web", "sub", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    sup: styledComponents.StyledInstance<"web", "sup", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    map: styledComponents.StyledInstance<"web", "map", import("react").DetailedHTMLProps<import("react").MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>, import("styled-components/dist/types").BaseObject, never>;
+    filter: styledComponents.StyledInstance<"web", "filter", import("react").SVGProps<SVGFilterElement>, import("styled-components/dist/types").BaseObject, never>;
+    label: styledComponents.StyledInstance<"web", "label", import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, import("styled-components/dist/types").BaseObject, never>;
+    pre: styledComponents.StyledInstance<"web", "pre", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLPreElement>, HTMLPreElement>, import("styled-components/dist/types").BaseObject, never>;
+    use: styledComponents.StyledInstance<"web", "use", import("react").SVGProps<SVGUseElement>, import("styled-components/dist/types").BaseObject, never>;
+    html: styledComponents.StyledInstance<"web", "html", import("react").DetailedHTMLProps<import("react").HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>, import("styled-components/dist/types").BaseObject, never>;
+    option: styledComponents.StyledInstance<"web", "option", import("react").DetailedHTMLProps<import("react").OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, import("styled-components/dist/types").BaseObject, never>;
+    header: styledComponents.StyledInstance<"web", "header", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    body: styledComponents.StyledInstance<"web", "body", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>, import("styled-components/dist/types").BaseObject, never>;
+    a: styledComponents.StyledInstance<"web", "a", import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, import("styled-components/dist/types").BaseObject, never>;
+    b: styledComponents.StyledInstance<"web", "b", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    code: styledComponents.StyledInstance<"web", "code", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    path: styledComponents.StyledInstance<"web", "path", import("react").SVGProps<SVGPathElement>, import("styled-components/dist/types").BaseObject, never>;
+    form: styledComponents.StyledInstance<"web", "form", import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, import("styled-components/dist/types").BaseObject, never>;
+    text: styledComponents.StyledInstance<"web", "text", import("react").SVGTextElementAttributes<SVGTextElement>, import("styled-components/dist/types").BaseObject, never>;
+    data: styledComponents.StyledInstance<"web", "data", import("react").DetailedHTMLProps<import("react").DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>, import("styled-components/dist/types").BaseObject, never>;
+    svg: styledComponents.StyledInstance<"web", "svg", import("react").SVGProps<SVGSVGElement>, import("styled-components/dist/types").BaseObject, never>;
+    template: styledComponents.StyledInstance<"web", "template", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>, import("styled-components/dist/types").BaseObject, never>;
+    summary: styledComponents.StyledInstance<"web", "summary", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    footer: styledComponents.StyledInstance<"web", "footer", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    var: styledComponents.StyledInstance<"web", "var", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    u: styledComponents.StyledInstance<"web", "u", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    input: styledComponents.StyledInstance<"web", "input", import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, import("styled-components/dist/types").BaseObject, never>;
+    circle: styledComponents.StyledInstance<"web", "circle", import("react").SVGProps<SVGCircleElement>, import("styled-components/dist/types").BaseObject, never>;
+    table: styledComponents.StyledInstance<"web", "table", import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, import("styled-components/dist/types").BaseObject, never>;
+    abbr: styledComponents.StyledInstance<"web", "abbr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    address: styledComponents.StyledInstance<"web", "address", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    area: styledComponents.StyledInstance<"web", "area", import("react").DetailedHTMLProps<import("react").AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>, import("styled-components/dist/types").BaseObject, never>;
+    article: styledComponents.StyledInstance<"web", "article", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    aside: styledComponents.StyledInstance<"web", "aside", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    audio: styledComponents.StyledInstance<"web", "audio", import("react").DetailedHTMLProps<import("react").AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, import("styled-components/dist/types").BaseObject, never>;
+    bdi: styledComponents.StyledInstance<"web", "bdi", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    bdo: styledComponents.StyledInstance<"web", "bdo", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    blockquote: styledComponents.StyledInstance<"web", "blockquote", import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, import("styled-components/dist/types").BaseObject, never>;
+    br: styledComponents.StyledInstance<"web", "br", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBRElement>, HTMLBRElement>, import("styled-components/dist/types").BaseObject, never>;
+    button: styledComponents.StyledInstance<"web", "button", import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("styled-components/dist/types").BaseObject, never>;
+    canvas: styledComponents.StyledInstance<"web", "canvas", import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, import("styled-components/dist/types").BaseObject, never>;
+    caption: styledComponents.StyledInstance<"web", "caption", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    cite: styledComponents.StyledInstance<"web", "cite", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    col: styledComponents.StyledInstance<"web", "col", import("react").DetailedHTMLProps<import("react").ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, import("styled-components/dist/types").BaseObject, never>;
+    colgroup: styledComponents.StyledInstance<"web", "colgroup", import("react").DetailedHTMLProps<import("react").ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, import("styled-components/dist/types").BaseObject, never>;
+    datalist: styledComponents.StyledInstance<"web", "datalist", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>, import("styled-components/dist/types").BaseObject, never>;
+    dd: styledComponents.StyledInstance<"web", "dd", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    del: styledComponents.StyledInstance<"web", "del", import("react").DetailedHTMLProps<import("react").DelHTMLAttributes<HTMLModElement>, HTMLModElement>, import("styled-components/dist/types").BaseObject, never>;
+    details: styledComponents.StyledInstance<"web", "details", import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, import("styled-components/dist/types").BaseObject, never>;
+    dfn: styledComponents.StyledInstance<"web", "dfn", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    dialog: styledComponents.StyledInstance<"web", "dialog", import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, import("styled-components/dist/types").BaseObject, never>;
+    div: styledComponents.StyledInstance<"web", "div", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("styled-components/dist/types").BaseObject, never>;
+    dl: styledComponents.StyledInstance<"web", "dl", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, import("styled-components/dist/types").BaseObject, never>;
+    dt: styledComponents.StyledInstance<"web", "dt", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    em: styledComponents.StyledInstance<"web", "em", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    embed: styledComponents.StyledInstance<"web", "embed", import("react").DetailedHTMLProps<import("react").EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>, import("styled-components/dist/types").BaseObject, never>;
+    fieldset: styledComponents.StyledInstance<"web", "fieldset", import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, import("styled-components/dist/types").BaseObject, never>;
+    figcaption: styledComponents.StyledInstance<"web", "figcaption", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    figure: styledComponents.StyledInstance<"web", "figure", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    h1: styledComponents.StyledInstance<"web", "h1", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("styled-components/dist/types").BaseObject, never>;
+    h2: styledComponents.StyledInstance<"web", "h2", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("styled-components/dist/types").BaseObject, never>;
+    h3: styledComponents.StyledInstance<"web", "h3", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("styled-components/dist/types").BaseObject, never>;
+    h4: styledComponents.StyledInstance<"web", "h4", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("styled-components/dist/types").BaseObject, never>;
+    h5: styledComponents.StyledInstance<"web", "h5", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("styled-components/dist/types").BaseObject, never>;
+    h6: styledComponents.StyledInstance<"web", "h6", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("styled-components/dist/types").BaseObject, never>;
+    hgroup: styledComponents.StyledInstance<"web", "hgroup", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    hr: styledComponents.StyledInstance<"web", "hr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, import("styled-components/dist/types").BaseObject, never>;
+    i: styledComponents.StyledInstance<"web", "i", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    iframe: styledComponents.StyledInstance<"web", "iframe", import("react").DetailedHTMLProps<import("react").IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, import("styled-components/dist/types").BaseObject, never>;
+    img: styledComponents.StyledInstance<"web", "img", import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, import("styled-components/dist/types").BaseObject, never>;
+    ins: styledComponents.StyledInstance<"web", "ins", import("react").DetailedHTMLProps<import("react").InsHTMLAttributes<HTMLModElement>, HTMLModElement>, import("styled-components/dist/types").BaseObject, never>;
+    kbd: styledComponents.StyledInstance<"web", "kbd", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    legend: styledComponents.StyledInstance<"web", "legend", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, import("styled-components/dist/types").BaseObject, never>;
+    li: styledComponents.StyledInstance<"web", "li", import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, import("styled-components/dist/types").BaseObject, never>;
+    mark: styledComponents.StyledInstance<"web", "mark", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    menu: styledComponents.StyledInstance<"web", "menu", import("react").DetailedHTMLProps<import("react").MenuHTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    meter: styledComponents.StyledInstance<"web", "meter", import("react").DetailedHTMLProps<import("react").MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>, import("styled-components/dist/types").BaseObject, never>;
+    nav: styledComponents.StyledInstance<"web", "nav", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    ol: styledComponents.StyledInstance<"web", "ol", import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, import("styled-components/dist/types").BaseObject, never>;
+    optgroup: styledComponents.StyledInstance<"web", "optgroup", import("react").DetailedHTMLProps<import("react").OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>, import("styled-components/dist/types").BaseObject, never>;
+    p: styledComponents.StyledInstance<"web", "p", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, import("styled-components/dist/types").BaseObject, never>;
+    picture: styledComponents.StyledInstance<"web", "picture", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    progress: styledComponents.StyledInstance<"web", "progress", import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>, import("styled-components/dist/types").BaseObject, never>;
+    q: styledComponents.StyledInstance<"web", "q", import("react").DetailedHTMLProps<import("react").QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, import("styled-components/dist/types").BaseObject, never>;
+    rp: styledComponents.StyledInstance<"web", "rp", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    rt: styledComponents.StyledInstance<"web", "rt", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    ruby: styledComponents.StyledInstance<"web", "ruby", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    s: styledComponents.StyledInstance<"web", "s", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    samp: styledComponents.StyledInstance<"web", "samp", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    section: styledComponents.StyledInstance<"web", "section", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    select: styledComponents.StyledInstance<"web", "select", import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, import("styled-components/dist/types").BaseObject, never>;
+    slot: styledComponents.StyledInstance<"web", "slot", import("react").DetailedHTMLProps<import("react").SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>, import("styled-components/dist/types").BaseObject, never>;
+    span: styledComponents.StyledInstance<"web", "span", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("styled-components/dist/types").BaseObject, never>;
+    strong: styledComponents.StyledInstance<"web", "strong", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    tbody: styledComponents.StyledInstance<"web", "tbody", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, import("styled-components/dist/types").BaseObject, never>;
+    td: styledComponents.StyledInstance<"web", "td", import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, import("styled-components/dist/types").BaseObject, never>;
+    textarea: styledComponents.StyledInstance<"web", "textarea", import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, import("styled-components/dist/types").BaseObject, never>;
+    tfoot: styledComponents.StyledInstance<"web", "tfoot", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, import("styled-components/dist/types").BaseObject, never>;
+    th: styledComponents.StyledInstance<"web", "th", import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, import("styled-components/dist/types").BaseObject, never>;
+    thead: styledComponents.StyledInstance<"web", "thead", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, import("styled-components/dist/types").BaseObject, never>;
+    time: styledComponents.StyledInstance<"web", "time", import("react").DetailedHTMLProps<import("react").TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>, import("styled-components/dist/types").BaseObject, never>;
+    tr: styledComponents.StyledInstance<"web", "tr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, import("styled-components/dist/types").BaseObject, never>;
+    ul: styledComponents.StyledInstance<"web", "ul", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, import("styled-components/dist/types").BaseObject, never>;
+    video: styledComponents.StyledInstance<"web", "video", import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, import("styled-components/dist/types").BaseObject, never>;
+    wbr: styledComponents.StyledInstance<"web", "wbr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("styled-components/dist/types").BaseObject, never>;
+    clipPath: styledComponents.StyledInstance<"web", "clipPath", import("react").SVGProps<SVGClipPathElement>, import("styled-components/dist/types").BaseObject, never>;
+    defs: styledComponents.StyledInstance<"web", "defs", import("react").SVGProps<SVGDefsElement>, import("styled-components/dist/types").BaseObject, never>;
+    ellipse: styledComponents.StyledInstance<"web", "ellipse", import("react").SVGProps<SVGEllipseElement>, import("styled-components/dist/types").BaseObject, never>;
+    feBlend: styledComponents.StyledInstance<"web", "feBlend", import("react").SVGProps<SVGFEBlendElement>, import("styled-components/dist/types").BaseObject, never>;
+    feColorMatrix: styledComponents.StyledInstance<"web", "feColorMatrix", import("react").SVGProps<SVGFEColorMatrixElement>, import("styled-components/dist/types").BaseObject, never>;
+    feComponentTransfer: styledComponents.StyledInstance<"web", "feComponentTransfer", import("react").SVGProps<SVGFEComponentTransferElement>, import("styled-components/dist/types").BaseObject, never>;
+    feComposite: styledComponents.StyledInstance<"web", "feComposite", import("react").SVGProps<SVGFECompositeElement>, import("styled-components/dist/types").BaseObject, never>;
+    feConvolveMatrix: styledComponents.StyledInstance<"web", "feConvolveMatrix", import("react").SVGProps<SVGFEConvolveMatrixElement>, import("styled-components/dist/types").BaseObject, never>;
+    feDiffuseLighting: styledComponents.StyledInstance<"web", "feDiffuseLighting", import("react").SVGProps<SVGFEDiffuseLightingElement>, import("styled-components/dist/types").BaseObject, never>;
+    feDisplacementMap: styledComponents.StyledInstance<"web", "feDisplacementMap", import("react").SVGProps<SVGFEDisplacementMapElement>, import("styled-components/dist/types").BaseObject, never>;
+    feDistantLight: styledComponents.StyledInstance<"web", "feDistantLight", import("react").SVGProps<SVGFEDistantLightElement>, import("styled-components/dist/types").BaseObject, never>;
+    feDropShadow: styledComponents.StyledInstance<"web", "feDropShadow", import("react").SVGProps<SVGFEDropShadowElement>, import("styled-components/dist/types").BaseObject, never>;
+    feFlood: styledComponents.StyledInstance<"web", "feFlood", import("react").SVGProps<SVGFEFloodElement>, import("styled-components/dist/types").BaseObject, never>;
+    feFuncA: styledComponents.StyledInstance<"web", "feFuncA", import("react").SVGProps<SVGFEFuncAElement>, import("styled-components/dist/types").BaseObject, never>;
+    feFuncB: styledComponents.StyledInstance<"web", "feFuncB", import("react").SVGProps<SVGFEFuncBElement>, import("styled-components/dist/types").BaseObject, never>;
+    feFuncG: styledComponents.StyledInstance<"web", "feFuncG", import("react").SVGProps<SVGFEFuncGElement>, import("styled-components/dist/types").BaseObject, never>;
+    feFuncR: styledComponents.StyledInstance<"web", "feFuncR", import("react").SVGProps<SVGFEFuncRElement>, import("styled-components/dist/types").BaseObject, never>;
+    feGaussianBlur: styledComponents.StyledInstance<"web", "feGaussianBlur", import("react").SVGProps<SVGFEGaussianBlurElement>, import("styled-components/dist/types").BaseObject, never>;
+    feImage: styledComponents.StyledInstance<"web", "feImage", import("react").SVGProps<SVGFEImageElement>, import("styled-components/dist/types").BaseObject, never>;
+    feMerge: styledComponents.StyledInstance<"web", "feMerge", import("react").SVGProps<SVGFEMergeElement>, import("styled-components/dist/types").BaseObject, never>;
+    feMergeNode: styledComponents.StyledInstance<"web", "feMergeNode", import("react").SVGProps<SVGFEMergeNodeElement>, import("styled-components/dist/types").BaseObject, never>;
+    feMorphology: styledComponents.StyledInstance<"web", "feMorphology", import("react").SVGProps<SVGFEMorphologyElement>, import("styled-components/dist/types").BaseObject, never>;
+    feOffset: styledComponents.StyledInstance<"web", "feOffset", import("react").SVGProps<SVGFEOffsetElement>, import("styled-components/dist/types").BaseObject, never>;
+    fePointLight: styledComponents.StyledInstance<"web", "fePointLight", import("react").SVGProps<SVGFEPointLightElement>, import("styled-components/dist/types").BaseObject, never>;
+    feSpecularLighting: styledComponents.StyledInstance<"web", "feSpecularLighting", import("react").SVGProps<SVGFESpecularLightingElement>, import("styled-components/dist/types").BaseObject, never>;
+    feSpotLight: styledComponents.StyledInstance<"web", "feSpotLight", import("react").SVGProps<SVGFESpotLightElement>, import("styled-components/dist/types").BaseObject, never>;
+    feTile: styledComponents.StyledInstance<"web", "feTile", import("react").SVGProps<SVGFETileElement>, import("styled-components/dist/types").BaseObject, never>;
+    feTurbulence: styledComponents.StyledInstance<"web", "feTurbulence", import("react").SVGProps<SVGFETurbulenceElement>, import("styled-components/dist/types").BaseObject, never>;
+    foreignObject: styledComponents.StyledInstance<"web", "foreignObject", import("react").SVGProps<SVGForeignObjectElement>, import("styled-components/dist/types").BaseObject, never>;
+    g: styledComponents.StyledInstance<"web", "g", import("react").SVGProps<SVGGElement>, import("styled-components/dist/types").BaseObject, never>;
+    image: styledComponents.StyledInstance<"web", "image", import("react").SVGProps<SVGImageElement>, import("styled-components/dist/types").BaseObject, never>;
+    line: styledComponents.StyledInstance<"web", "line", import("react").SVGLineElementAttributes<SVGLineElement>, import("styled-components/dist/types").BaseObject, never>;
+    linearGradient: styledComponents.StyledInstance<"web", "linearGradient", import("react").SVGProps<SVGLinearGradientElement>, import("styled-components/dist/types").BaseObject, never>;
+    marker: styledComponents.StyledInstance<"web", "marker", import("react").SVGProps<SVGMarkerElement>, import("styled-components/dist/types").BaseObject, never>;
+    mask: styledComponents.StyledInstance<"web", "mask", import("react").SVGProps<SVGMaskElement>, import("styled-components/dist/types").BaseObject, never>;
+    pattern: styledComponents.StyledInstance<"web", "pattern", import("react").SVGProps<SVGPatternElement>, import("styled-components/dist/types").BaseObject, never>;
+    polygon: styledComponents.StyledInstance<"web", "polygon", import("react").SVGProps<SVGPolygonElement>, import("styled-components/dist/types").BaseObject, never>;
+    polyline: styledComponents.StyledInstance<"web", "polyline", import("react").SVGProps<SVGPolylineElement>, import("styled-components/dist/types").BaseObject, never>;
+    radialGradient: styledComponents.StyledInstance<"web", "radialGradient", import("react").SVGProps<SVGRadialGradientElement>, import("styled-components/dist/types").BaseObject, never>;
+    rect: styledComponents.StyledInstance<"web", "rect", import("react").SVGProps<SVGRectElement>, import("styled-components/dist/types").BaseObject, never>;
+    stop: styledComponents.StyledInstance<"web", "stop", import("react").SVGProps<SVGStopElement>, import("styled-components/dist/types").BaseObject, never>;
+    switch: styledComponents.StyledInstance<"web", "switch", import("react").SVGProps<SVGSwitchElement>, import("styled-components/dist/types").BaseObject, never>;
+    textPath: styledComponents.StyledInstance<"web", "textPath", import("react").SVGProps<SVGTextPathElement>, import("styled-components/dist/types").BaseObject, never>;
+    tspan: styledComponents.StyledInstance<"web", "tspan", import("react").SVGProps<SVGTSpanElement>, import("styled-components/dist/types").BaseObject, never>;
+};
+export default styled;
+export * from 'styled-components';

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@bleedingdev/modern-js-plugin-styled-components",
+  "description": "A Modern.js plugin for styled-components.",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "framework",
+    "modern",
+    "modern.js"
+  ],
+  "version": "3.2.0-ultramodern.0",
+  "types": "./src/index.ts",
+  "main": "./dist/cjs/index.js",
+  "export": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "node": {
+        "import": "./dist/esm-node/index.mjs",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/cjs/index.js"
+    },
+    "./runtime": {
+      "types": "./dist/types/runtime.d.ts",
+      "default": "./dist/esm/runtime.mjs"
+    }
+  },
+  "dependencies": {
+    "@rsbuild/plugin-styled-components": "1.6.1",
+    "@swc/helpers": "^0.5.21"
+  },
+  "devDependencies": {
+    "@rslib/core": "0.21.5",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^25.8.0",
+    "@types/styled-components": "^5.1.36",
+    "@typescript/native-preview": "7.0.0-dev.20260516.1",
+    "styled-components": "^6.4.1",
+    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.0",
+    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.0"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.3.1"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "node": {
+        "import": "./dist/esm-node/index.mjs",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/cjs/index.js"
+    },
+    "./runtime": {
+      "types": "./dist/types/runtime.d.ts",
+      "default": "./dist/esm/runtime.mjs"
+    },
+    "./styled": {
+      "types": "./dist/types/styled.d.ts",
+      "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"
+  },
+  "homepage": "https://github.com/BleedingDev/ultramodern.js#readme",
+  "bugs": {
+    "url": "https://github.com/BleedingDev/ultramodern.js/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BleedingDev/ultramodern.js.git"
+  }
+}

package/rslib.config.mts

@@ -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,47 @@
+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(() => {
+      const { metaName } = api.getAppContext();
+
+      return {
+        builderPlugins: [
+          pluginStyledComponents({
+            ...options,
+            // https://github.com/styled-components/babel-plugin-styled-components/issues/287
+            topLevelImportPaths: [
+              `@${metaName}/plugin-styled-components/styled`,
+            ],
+          }),
+        ],
+        resolve: {
+          alias: {
+            'styled-components': require.resolve('styled-components'),
+          },
+        },
+      };
+    });
+
+    api._internalRuntimePlugins(async ({ entrypoint, plugins }) => {
+      const { metaName } = api.getAppContext();
+
+      plugins.push({
+        name: 'styledComponents',
+        path: `@${metaName}/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,23 @@
+import * as styledComponents from 'styled-components';
+
+type StyledExport = typeof styledComponents.default;
+
+/**
+ * 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(): StyledExport {
+  const moduleExports = styledComponents as any;
+
+  if (moduleExports.default?.default !== undefined) {
+    return moduleExports.default.default;
+  }
+
+  return moduleExports.default ?? moduleExports;
+}
+
+const styled = resolveStyledComponents();
+
+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"]
+}