styled-components 6.4.0-prerelease.0 → 6.4.0-prerelease.2

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.0";
+    var SC_VERSION = "6.4.0-prerelease.2";
     var SPLITTER = '/*!sc*/\n';
     var IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
     var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -902,40 +902,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 +1576,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 +1599,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.
             {
@@ -1572,6 +1618,11 @@
                     };
                 }, [instance, props, ssc.styleSheet, theme, ssc.stylis]);
             }
+            // 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) {
@@ -1601,6 +1652,11 @@
             this.name = name;
             this.id = "sc-keyframes-".concat(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));
             });