styled-components 6.4.0-prerelease.2 → 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.2";
+    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);
@@ -1609,6 +1619,14 @@
             // 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.
             {
+                // For static global styles, renderStyles exits early after the first injection
+                // (via hasNameForId check in GlobalStyle.renderStyles). We still need the effect
+                // for initial injection and unmount cleanup, but we use a narrow deps array
+                // to avoid unnecessary effect re-runs on every render.
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                var effectDeps = globalStyle.isStatic
+                    ? [instance, ssc.styleSheet]
+                    : [instance, props, ssc.styleSheet, theme, ssc.stylis];
                 React.useLayoutEffect(function () {
                     if (!ssc.styleSheet.server) {
                         renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
@@ -1616,7 +1634,7 @@
                     return function () {
                         globalStyle.removeStyles(instance, ssc.styleSheet);
                     };
-                }, [instance, props, ssc.styleSheet, theme, ssc.stylis]);
+                }, effectDeps);
             }
             // Clean up server instance cache — no useLayoutEffect cleanup runs on the
             // server, so instanceRules would grow unboundedly across SSR requests.
@@ -1637,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) {
@@ -1650,7 +1787,7 @@
                 }
             };
             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.
@@ -1902,6 +2039,7 @@
         ThemeProvider: ThemeProvider,
         __PRIVATE__: __PRIVATE__,
         createGlobalStyle: createGlobalStyle,
+        createTheme: createTheme,
         css: css,
         isStyledComponent: isStyledComponent,
         keyframes: keyframes,
@@ -2193,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) {
@@ -2204,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);
@@ -2232,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;
     }());
@@ -2259,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), { 
@@ -2334,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);
         }