styled-components 6.4.0-prerelease.8 → 6.4.0-prerelease.9

package/dist/styled-components.js

@@ -11,7 +11,7 @@
         'data-styled';
     const SC_ATTR_ACTIVE = 'active';
     const SC_ATTR_VERSION = 'data-styled-version';
-    const SC_VERSION = "6.4.0-prerelease.8";
+    const SC_VERSION = "6.4.0-prerelease.9";
     const SPLITTER = '/*!sc*/\n';
     const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
     function readSpeedyFlag(name) {
@@ -1539,16 +1539,23 @@
             // 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.
+                // globalStyle is included in deps so HMR-induced module re-evaluation
+                // (which creates a new GlobalStyle instance) triggers effect re-run.
+                // For static rules, renderStyles exits early after the first injection
+                // (via hasNameForId check), so the extra dep is effectively free at runtime.
                 // eslint-disable-next-line react-hooks/exhaustive-deps
                 const effectDeps = globalStyle.isStatic
-                    ? [instance, ssc.styleSheet]
-                    : [instance, props, ssc.styleSheet, theme, ssc.stylis];
+                    ? [instance, ssc.styleSheet, globalStyle]
+                    : [instance, props, ssc.styleSheet, theme, ssc.stylis, globalStyle];
+                const prevGlobalStyleRef = React.useRef(globalStyle);
                 React.useLayoutEffect(() => {
                     if (!ssc.styleSheet.server) {
+                        // HMR creates a new globalStyle instance but the componentId stays stable
+                        // (SWC plugin assigns by file location), so stale hasNameForId hits skip injection.
+                        if (prevGlobalStyleRef.current !== globalStyle) {
+                            ssc.styleSheet.clearRules(styledComponentId);
+                            prevGlobalStyleRef.current = globalStyle;
+                        }
                         renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
                     }
                     return () => {
@@ -2260,6 +2267,7 @@
                 prev[1] === theme &&
                 prev[2] === ssc.styleSheet &&
                 prev[3] === ssc.stylis &&
+                prev[7] === componentStyle &&
                 shallowEqualContext(prev[0], props, prev[4])) {
                 context = prev[5];
                 generatedClassName = prev[6];
@@ -2280,6 +2288,7 @@
                     propsKeyCount,
                     context,
                     generatedClassName,
+                    componentStyle,
                 ];
             }
         }