styled-components 6.4.0-prerelease.7 → 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.7";
+    const SC_VERSION = "6.4.0-prerelease.9";
     const SPLITTER = '/*!sc*/\n';
     const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
     function readSpeedyFlag(name) {
@@ -723,6 +723,7 @@
         return isFunction(test) && !(test.prototype && test.prototype.isReactComponent);
     }
 
+    /** Type guard that returns true if the target is a styled component. */
     function isStyledComponent(target) {
         return typeof target === 'object' && 'styledComponentId' in target;
     }
@@ -1292,6 +1293,7 @@
     function useStyleSheetContext() {
         return React.useContext(StyleSheetContext);
     }
+    /** Configure style injection for descendant styled components (target element, stylis plugins, prop forwarding). */
     function StyleSheetManager(props) {
         // In RSC environments without context support, StyleSheetManager becomes a no-op
         if (!React.useMemo) {
@@ -1482,6 +1484,16 @@
         return addTag(flatten(interleave(styleStringArray, interpolations)));
     }
 
+    /**
+     * Create a component that injects global CSS when mounted. Supports theming and dynamic props.
+     *
+     * ```tsx
+     * const GlobalStyle = createGlobalStyle`
+     *   body { margin: 0; font-family: system-ui; }
+     * `;
+     * // Render <GlobalStyle /> at the root of your app
+     * ```
+     */
     function createGlobalStyle(strings, ...interpolations) {
         const rules = css(strings, ...interpolations);
         const styledComponentId = `sc-global-${generateComponentId(JSON.stringify(rules))}`;
@@ -1527,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 () => {
@@ -1713,6 +1732,17 @@
     }
     _a = KEYFRAMES_SYMBOL;
 
+    /**
+     * Define a CSS `@keyframes` animation with an automatically scoped name.
+     *
+     * ```tsx
+     * const rotate = keyframes`
+     *   from { transform: rotate(0deg); }
+     *   to { transform: rotate(360deg); }
+     * `;
+     * const Spinner = styled.div`animation: ${rotate} 1s linear infinite;`;
+     * ```
+     */
     function keyframes(strings, ...interpolations) {
         /* Warning if you've used keyframes on React Native */
         if (typeof navigator !== 'undefined' &&
@@ -1818,6 +1848,7 @@
         return targetComponent;
     }
 
+    /** Higher-order component that injects the current theme as a prop. Prefer `useTheme` in function components. */
     function withTheme(Component) {
         const WithTheme = React.forwardRef((props, ref) => {
             const theme = React.useContext(ThemeContext) ;
@@ -1831,6 +1862,16 @@
         return hoistNonReactStatics(WithTheme, Component);
     }
 
+    /**
+     * Collect styled-components CSS during server-side rendering.
+     *
+     * ```tsx
+     * const sheet = new ServerStyleSheet();
+     * const html = renderToString(sheet.collectStyles(<App />));
+     * const styleTags = sheet.getStyleTags();
+     * sheet.seal();
+     * ```
+     */
     class ServerStyleSheet {
         constructor({ nonce } = {}) {
             this._emitSheetCSS = () => {
@@ -2226,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];
@@ -2246,6 +2288,7 @@
                     propsKeyCount,
                     context,
                     generatedClassName,
+                    componentStyle,
                 ];
             }
         }
@@ -2377,6 +2420,14 @@
         return templateFunction;
     }
 
+    /**
+     * Create a styled component from an HTML element or React component.
+     *
+     * ```tsx
+     * const Button = styled.button`color: red;`;
+     * const Link = styled(RouterLink)`text-decoration: none;`;
+     * ```
+     */
     const baseStyled = (tag) => constructWithOptions(createStyledComponent, tag);
     const styled = baseStyled;
     // Shorthands for all valid HTML Elements