styled-components 6.4.0-prerelease.1 → 6.4.0-prerelease.3

package/dist/styled-components.js

@@ -10,7 +10,7 @@
         'data-styled';
     var SC_ATTR_ACTIVE = 'active';
     var SC_ATTR_VERSION = 'data-styled-version';
-    var SC_VERSION = "6.4.0-prerelease.1";
+    var SC_VERSION = "6.4.0-prerelease.3";
     var SPLITTER = '/*!sc*/\n';
     var IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
     var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -30,6 +30,7 @@
                     ? false
                     : process.env.SC_DISABLE_SPEEDY
                 : "development" !== 'production');
+    var KEYFRAMES_ID_PREFIX = 'sc-keyframes-';
     // Shared empty execution context when generating static styles
     var STATIC_EXECUTION_CONTEXT = {};
 
@@ -71,6 +72,10 @@
         return to.concat(ar || Array.prototype.slice.call(from));
     }
 
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+        return cooked;
+    }
     typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
         var e = new Error(message);
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -585,6 +590,7 @@
             var _this = this;
             this.options = __assign(__assign({}, defaultOptions), options);
             this.gs = globalStyles;
+            this.keyframeIds = new Set();
             this.names = new Map(names);
             this.server = !!options.isServer;
             // We rehydrate only once and use the sheet that is created first
@@ -606,6 +612,7 @@
         StyleSheet.prototype.reconstructWithOptions = function (options, withNames) {
             if (withNames === void 0) { withNames = true; }
             var newSheet = new StyleSheet(__assign(__assign({}, this.options), options), this.gs, (withNames && this.names) || undefined);
+            newSheet.keyframeIds = new Set(this.keyframeIds);
             // If we're reconstructing with a new target on the client, check if the container changed
             // This handles the case where StyleSheetManager's target prop changes (e.g., from undefined to shadowRoot)
             // We only rehydrate if the container (Document or ShadowRoot) actually changes
@@ -633,6 +640,9 @@
         /** Mark a group's name as known for caching */
         StyleSheet.prototype.registerName = function (id, name) {
             getGroupForId(id);
+            if (id.startsWith(KEYFRAMES_ID_PREFIX)) {
+                this.keyframeIds.add(id);
+            }
             var existing = this.names.get(id);
             if (existing) {
                 existing.add(name);
@@ -902,40 +912,74 @@
 
     var GlobalStyle = /** @class */ (function () {
         function GlobalStyle(rules, componentId) {
+            /** @internal Per-instance rule cache for shared-group rebuild. */
+            this.instanceRules = new Map();
             this.rules = rules;
             this.componentId = componentId;
             this.isStatic = isStaticRules(rules);
-            // pre-register the first instance to ensure global styles
-            // load before component ones
-            StyleSheet.registerId(this.componentId + 1);
+            // Pre-register the shared group so global styles defined before
+            // components always appear before them in the stylesheet.
+            StyleSheet.registerId(this.componentId);
         }
-        GlobalStyle.prototype.createStyles = function (instance, executionContext, styleSheet, stylis) {
-            var flatCSS = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
-            var css = stylis(flatCSS, '');
-            var id = this.componentId + instance;
-            // NOTE: We use the id as a name as well, since these rules never change
-            styleSheet.insertRules(id, id, css);
-        };
         GlobalStyle.prototype.removeStyles = function (instance, styleSheet) {
-            styleSheet.clearRules(this.componentId + instance);
+            this.instanceRules.delete(instance);
+            this.rebuildGroup(styleSheet);
         };
         GlobalStyle.prototype.renderStyles = function (instance, executionContext, styleSheet, stylis) {
-            if (instance > 2)
-                StyleSheet.registerId(this.componentId + instance);
-            var id = this.componentId + instance;
-            // For static styles that don't change based on props,
-            // only inject once and don't remove/re-add on every render.
-            // This prevents issues with React StrictMode where the effect cleanup
-            // from the simulated unmount runs after the re-render.
+            var id = this.componentId;
             if (this.isStatic) {
-                if (!styleSheet.hasNameForId(id, id)) {
-                    this.createStyles(instance, executionContext, styleSheet, stylis);
+                if (!styleSheet.hasNameForId(id, id + instance)) {
+                    var entry = this.computeRules(instance, executionContext, styleSheet, stylis);
+                    styleSheet.insertRules(id, entry.name, entry.rules);
+                }
+                else if (!this.instanceRules.has(instance)) {
+                    // Rehydrated style: populate cache so rebuildGroup can restore
+                    // survivors if another instance unmounts.
+                    this.computeRules(instance, executionContext, styleSheet, stylis);
                 }
                 return;
             }
-            // NOTE: Remove old styles, then inject the new ones
-            this.removeStyles(instance, styleSheet);
-            this.createStyles(instance, executionContext, styleSheet, stylis);
+            // Compute new rules; skip CSSOM rebuild if CSS is unchanged.
+            // The fast-path is only safe on the client where the tag persists between renders.
+            // During SSR, clearTag() destroys the tag between requests, so we must always rebuild.
+            var prev = this.instanceRules.get(instance);
+            this.computeRules(instance, executionContext, styleSheet, stylis);
+            if (!styleSheet.server && prev) {
+                var a = prev.rules;
+                var b = this.instanceRules.get(instance).rules;
+                if (a.length === b.length) {
+                    var same = true;
+                    for (var i = 0; i < a.length; i++) {
+                        if (a[i] !== b[i]) {
+                            same = false;
+                            break;
+                        }
+                    }
+                    if (same)
+                        return;
+                }
+            }
+            this.rebuildGroup(styleSheet);
+        };
+        GlobalStyle.prototype.computeRules = function (instance, executionContext, styleSheet, stylis) {
+            var flatCSS = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
+            var entry = {
+                name: this.componentId + instance,
+                rules: stylis(flatCSS, ''),
+            };
+            this.instanceRules.set(instance, entry);
+            return entry;
+        };
+        /**
+         * Clear all CSS rules in the shared group and re-insert from surviving instances.
+         * Must run synchronously — no yielding between clear and re-insert.
+         */
+        GlobalStyle.prototype.rebuildGroup = function (styleSheet) {
+            var id = this.componentId;
+            styleSheet.clearRules(id);
+            this.instanceRules.forEach(function (entry) {
+                styleSheet.insertRules(id, entry.name, entry.rules);
+            });
         };
         return GlobalStyle;
     }());
@@ -1542,16 +1586,21 @@
         {
             checkDynamicCreation(styledComponentId);
         }
-        // Use a WeakMap to maintain stable instances per stylesheet
-        var instanceMap = new WeakMap();
         var GlobalStyleComponent = function (props) {
             var ssc = useStyleSheetContext();
             var theme = React.useContext(ThemeContext) ;
-            // Get or create instance ID for this stylesheet
-            var instance = instanceMap.get(ssc.styleSheet);
-            if (instance === undefined) {
-                instance = ssc.styleSheet.allocateGSInstance(styledComponentId);
-                instanceMap.set(ssc.styleSheet, instance);
+            // Each mount needs a unique instance ID for the shared-group instanceRules cache.
+            // false is a build-time constant: the dead branch is entirely eliminated,
+            // so React never sees a conditional hook call.
+            // Server bundle: direct allocation (one-shot renders, no stability needed).
+            // Browser bundle: useRef for stable ID across re-renders + useLayoutEffect cleanup.
+            var instance;
+            {
+                var instanceRef = React.useRef(null);
+                if (instanceRef.current === null) {
+                    instanceRef.current = ssc.styleSheet.allocateGSInstance(styledComponentId);
+                }
+                instance = instanceRef.current;
             }
             if (// @ts-expect-error invariant check
                 React.Children.count(props.children)) {
@@ -1560,6 +1609,13 @@
             if (rules.some(function (rule) { return typeof rule === 'string' && rule.indexOf('@import') !== -1; })) {
                 console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.");
             }
+            // Render styles during component execution for server environments.
+            // Uses false (build-time constant) OR styleSheet.server (runtime flag set by
+            // ServerStyleSheet) because some bundlers (Turbopack) resolve the browser entry
+            // for SSR of client components, making false false on the server.
+            if (ssc.styleSheet.server) {
+                renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
+            }
             // Client-side lifecycle: render styles in effect and clean up on unmount.
             // false and IS_RSC are build/module-level constants, so this doesn't violate rules of hooks.
             {
@@ -1580,6 +1636,11 @@
                     };
                 }, effectDeps);
             }
+            // Clean up server instance cache — no useLayoutEffect cleanup runs on the
+            // server, so instanceRules would grow unboundedly across SSR requests.
+            if (ssc.styleSheet.server) {
+                globalStyle.instanceRules.delete(instance);
+            }
             return null;
         };
         function renderStyles(instance, props, styleSheet, theme, stylis) {
@@ -1594,6 +1655,125 @@
         return React.memo(GlobalStyleComponent);
     }
 
+    /** Shared recursive traversal — calls `leafFn` for each leaf, recurses for objects. */
+    function walkTheme(obj, varPrefix, result, leafFn, path) {
+        for (var key in obj) {
+            var val = obj[key];
+            var fullPath = path ? path + '-' + key : key;
+            if (typeof val === 'object' && val !== null) {
+                var nested = {};
+                walkTheme(val, varPrefix, nested, leafFn, fullPath);
+                result[key] = nested;
+            }
+            else {
+                result[key] = leafFn(fullPath, val, key);
+            }
+        }
+    }
+    /** Build `var(--prefix-a-b, fallback)` accessor object */
+    function buildVars(obj, varPrefix) {
+        var result = {};
+        walkTheme(obj, varPrefix, result, function (fullPath, val) {
+            {
+                var str = String(val);
+                var depth = 0;
+                for (var i = 0; i < str.length; i++) {
+                    if (str.charCodeAt(i) === 40)
+                        depth++;
+                    else if (str.charCodeAt(i) === 41)
+                        depth--;
+                    if (depth < 0)
+                        break;
+                }
+                if (depth !== 0) {
+                    console.warn("createTheme: value \"".concat(str, "\" at \"").concat(fullPath, "\" contains unbalanced parentheses and may break the var() fallback"));
+                }
+            }
+            return 'var(--' + varPrefix + fullPath + ', ' + val + ')';
+        });
+        return result;
+    }
+    /** Read computed CSS variable values from the DOM */
+    function resolveVars(obj, varPrefix, styles) {
+        var result = {};
+        walkTheme(obj, varPrefix, result, function (fullPath, val) {
+            var resolved = styles.getPropertyValue('--' + varPrefix + fullPath).trim();
+            return resolved || val;
+        });
+        return result;
+    }
+    /**
+     * Emit CSS var declarations by walking `shape` for structure and reading
+     * values from `theme`. This avoids hardcoded skip lists — only keys
+     * present in the original theme shape are traversed.
+     */
+    function emitVarDeclarations(shape, theme, varPrefix, path) {
+        var css = '';
+        for (var key in shape) {
+            var shapeVal = shape[key];
+            var themeVal = theme[key];
+            var fullPath = path ? path + '-' + key : key;
+            if (typeof shapeVal === 'object' && shapeVal !== null) {
+                if (typeof themeVal === 'object' && themeVal !== null) {
+                    css += emitVarDeclarations(shapeVal, themeVal, varPrefix, fullPath);
+                }
+            }
+            else if (themeVal !== undefined && typeof themeVal !== 'function') {
+                css += '--' + varPrefix + fullPath + ':' + themeVal + ';';
+            }
+        }
+        return css;
+    }
+    /**
+     * Create a theme contract that bridges `ThemeProvider` and CSS custom properties.
+     *
+     * Returns an object with the same shape as the input theme, but every leaf value
+     * is a `var(--prefix-*, fallback)` CSS string. Use these in styled component
+     * templates — they work in both client and RSC contexts.
+     *
+     * Mount the returned `GlobalStyle` component inside your `ThemeProvider` to emit
+     * the CSS variables. When the theme changes (e.g. light → dark), the variables
+     * update automatically.
+     *
+     * @example
+     * ```tsx
+     * const theme = createTheme({
+     *   colors: { primary: '#0070f3', text: '#111' },
+     * });
+     *
+     * // Root layout (client):
+     * <ThemeProvider theme={themes[preset]}>
+     *   <theme.GlobalStyle />
+     *   {children}
+     * </ThemeProvider>
+     *
+     * // Any RSC file:
+     * const Card = styled.div`
+     *   color: ${theme.colors.primary};
+     *   // → "var(--sc-colors-primary, #0070f3)"
+     * `;
+     * ```
+     */
+    function createTheme(defaultTheme, options) {
+        var _a, _b;
+        var pfx = ((_a = options === null || options === void 0 ? void 0 : options.prefix) !== null && _a !== void 0 ? _a : 'sc') + '-';
+        var sel = (_b = options === null || options === void 0 ? void 0 : options.selector) !== null && _b !== void 0 ? _b : ':root';
+        var vars = buildVars(defaultTheme, pfx);
+        var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " {\n      ", "\n    }\n  "], ["\n    ", " {\n      ", "\n    }\n  "])), sel, function (p) { return emitVarDeclarations(defaultTheme, p.theme, pfx); });
+        return Object.assign(vars, {
+            GlobalStyle: GlobalStyle,
+            raw: defaultTheme,
+            resolve: function (el) {
+                if (!IS_BROWSER) {
+                    throw new Error('createTheme.resolve() is client-only');
+                }
+                var target = el !== null && el !== void 0 ? el : document.documentElement;
+                return resolveVars(defaultTheme, pfx, getComputedStyle(target));
+            },
+        });
+    }
+    var templateObject_1;
+
     var _a$1;
     var Keyframes = /** @class */ (function () {
         function Keyframes(name, rules) {
@@ -1607,8 +1787,13 @@
                 }
             };
             this.name = name;
-            this.id = "sc-keyframes-".concat(name);
+            this.id = KEYFRAMES_ID_PREFIX + name;
             this.rules = rules;
+            // Eagerly register the group so keyframes defined before components
+            // get a lower group ID and appear before them in the stylesheet.
+            // Uses getGroupForId directly (not StyleSheet.registerId) because
+            // GroupIDAllocator is pure JS — safe for native builds.
+            getGroupForId(this.id);
             setToString(this, function () {
                 throw throwStyledComponentsError(12, String(_this.name));
             });
@@ -1854,6 +2039,7 @@
         ThemeProvider: ThemeProvider,
         __PRIVATE__: __PRIVATE__,
         createGlobalStyle: createGlobalStyle,
+        createTheme: createTheme,
         css: css,
         isStyledComponent: isStyledComponent,
         keyframes: keyframes,
@@ -2145,7 +2331,7 @@
         }
         ComponentStyle.prototype.generateAndInjectStyles = function (executionContext, styleSheet, stylis) {
             var names = this.baseStyle
-                ? this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis).className
+                ? this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis)
                 : '';
             // force dynamic classnames if user-supplied stylis plugins are in use
             if (this.isStatic && !stylis.hash) {
@@ -2156,7 +2342,7 @@
                     var cssStatic = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
                     var name_1 = generateAlphabeticName(phash(this.baseHash, cssStatic) >>> 0);
                     if (!styleSheet.hasNameForId(this.componentId, name_1)) {
-                        var cssStaticFormatted = stylis(cssStatic, ".".concat(name_1), undefined, this.componentId);
+                        var cssStaticFormatted = stylis(cssStatic, '.' + name_1, undefined, this.componentId);
                         styleSheet.insertRules(this.componentId, name_1, cssStaticFormatted);
                     }
                     names = joinStrings(names, name_1);
@@ -2184,17 +2370,13 @@
                 if (css) {
                     var name_2 = generateAlphabeticName(dynamicHash >>> 0);
                     if (!styleSheet.hasNameForId(this.componentId, name_2)) {
-                        var cssFormatted = stylis(css, ".".concat(name_2), undefined, this.componentId);
+                        var cssFormatted = stylis(css, '.' + name_2, undefined, this.componentId);
                         styleSheet.insertRules(this.componentId, name_2, cssFormatted);
                     }
                     names = joinStrings(names, name_2);
                 }
             }
-            // Retrieve CSS from Tag for RSC rendering
-            var generatedCSS = typeof window === 'undefined'
-                ? styleSheet.getTag().getGroup(getGroupForId(this.componentId))
-                : '';
-            return { className: names, css: generatedCSS };
+            return names;
         };
         return ComponentStyle;
     }());
@@ -2211,13 +2393,12 @@
         SC_VERSION + name + identifiers[name]));
         return parentComponentId ? "".concat(parentComponentId, "-").concat(componentId) : componentId;
     }
-    function useInjectedStyle(componentStyle, resolvedAttrs) {
-        var ssc = useStyleSheetContext();
-        var result = componentStyle.generateAndInjectStyles(resolvedAttrs, ssc.styleSheet, ssc.stylis);
+    function useInjectedStyle(componentStyle, resolvedAttrs, styleSheet, stylis) {
+        var className = componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);
         if (React.useDebugValue) {
-            React.useDebugValue(result.className);
+            React.useDebugValue(className);
         }
-        return result;
+        return className;
     }
     function resolveContext(attrs, props, theme) {
         var context = __assign(__assign({}, props), { 
@@ -2286,7 +2467,7 @@
                 }
             }
         }
-        var _a = useInjectedStyle(componentStyle, context), generatedClassName = _a.className;
+        var generatedClassName = useInjectedStyle(componentStyle, context, ssc.styleSheet, ssc.stylis);
         if (forwardedComponent.warnTooManyClasses) {
             forwardedComponent.warnTooManyClasses(generatedClassName);
         }