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

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.5";
+    const SC_VERSION = "6.4.0-prerelease.8";
     const SPLITTER = '/*!sc*/\n';
     const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
     function readSpeedyFlag(name) {
@@ -273,11 +273,11 @@
                 continue;
             const selector = SC_ATTR + '.g' + group + '[id="' + id + '"]';
             let content = '';
-            names.forEach(name => {
+            for (const name of names) {
                 if (name.length > 0) {
                     content += name + ',';
                 }
-            });
+            }
             // NOTE: It's easier to collect rules and have the marker
             // after the actual rules to simplify the rehydration
             css += rules + selector + '{content:"' + content + '"}' + SPLITTER;
@@ -658,7 +658,7 @@
             return '';
         }
         if (typeof value === 'number' && value !== 0 && !(name in unitless) && !name.startsWith('--')) {
-            return `${value}px`; // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
+            return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
         }
         return String(value).trim();
     }
@@ -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;
     }
@@ -739,13 +740,13 @@
                 continue;
             // @ts-expect-error Property 'isCss' does not exist on type 'any[]'
             if ((Array.isArray(val) && val.isCss) || isFunction(val)) {
-                rules.push(`${hyphenateStyleName(key)}:`, val, ';');
+                rules.push(hyphenateStyleName(key) + ':', val, ';');
             }
             else if (isPlainObject(val)) {
-                rules.push(`${key} {`, ...objToCssArray(val), '}');
+                rules.push(key + ' {', ...objToCssArray(val), '}');
             }
             else {
-                rules.push(`${hyphenateStyleName(key)}: ${addUnitIfNeeded(key, val)};`);
+                rules.push(hyphenateStyleName(key) + ': ' + addUnitIfNeeded(key, val) + ';');
             }
         }
         return rules;
@@ -825,7 +826,7 @@
      * Convenience function for joining strings to form className chains
      */
     function joinStrings(a, b) {
-        return a && b ? `${a} ${b}` : a || b || '';
+        return a && b ? a + ' ' + b : a || b || '';
     }
     function joinStringArray(arr, sep) {
         return arr.join(sep || '');
@@ -898,9 +899,9 @@
         rebuildGroup(styleSheet) {
             const id = this.componentId;
             styleSheet.clearRules(id);
-            this.instanceRules.forEach(entry => {
+            for (const entry of this.instanceRules.values()) {
                 styleSheet.insertRules(id, entry.name, entry.rules);
-            });
+            }
         }
     }
 
@@ -1167,22 +1168,26 @@
      * Takes an element and recurses through it's rules added the namespace to the start of each selector.
      * Takes into account media queries by recursing through child rules if they are present.
      */
-    function recursivelySetNamepace(compiled, namespace) {
-        return compiled.map(rule => {
+    function recursivelySetNamespace(compiled, namespace) {
+        for (let i = 0; i < compiled.length; i++) {
+            const rule = compiled[i];
             if (rule.type === 'rule') {
                 // add the namespace to the start
-                rule.value = `${namespace} ${rule.value}`;
+                rule.value = namespace + ' ' + rule.value;
                 // add the namespace after each comma for subsequent selectors.
-                rule.value = rule.value.replaceAll(',', `,${namespace} `);
-                rule.props = rule.props.map(prop => {
-                    return `${namespace} ${prop}`;
-                });
+                rule.value = rule.value.replaceAll(',', ',' + namespace + ' ');
+                const props = rule.props;
+                const newProps = [];
+                for (let j = 0; j < props.length; j++) {
+                    newProps[j] = namespace + ' ' + props[j];
+                }
+                rule.props = newProps;
             }
             if (Array.isArray(rule.children) && rule.type !== '@keyframes') {
-                rule.children = recursivelySetNamepace(rule.children, namespace);
+                rule.children = recursivelySetNamespace(rule.children, namespace);
             }
-            return rule;
-        });
+        }
+        return compiled;
     }
     function createStylisInstance({ options = EMPTY_OBJECT, plugins = EMPTY_ARRAY, } = EMPTY_OBJECT) {
         let _componentId;
@@ -1251,9 +1256,9 @@
             _selector = selector;
             _selectorRegexp = undefined; // Reset for lazy creation per call
             const flatCSS = sanitizeCSS(stripLineComments(css));
-            let compiled = ue(prefix || selector ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS);
+            let compiled = ue(prefix || selector ? prefix + ' ' + selector + ' { ' + flatCSS + ' }' : flatCSS);
             if (options.namespace) {
-                compiled = recursivelySetNamepace(compiled, options.namespace);
+                compiled = recursivelySetNamespace(compiled, options.namespace);
             }
             _stack = [];
             ve(compiled, _middleware);
@@ -1286,9 +1291,9 @@
     const StylisContext = React.createContext(undefined)
         ;
     function useStyleSheetContext() {
-        // Skip useContext if we're in an RSC environment without context support
-        return React.useContext(StyleSheetContext) ;
+        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) {
@@ -1479,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))}`;
@@ -1710,6 +1725,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' &&
@@ -1815,6 +1841,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) ;
@@ -1828,6 +1855,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 = () => {
@@ -1990,10 +2027,6 @@
     // Control characters and non-letter first symbols are not supported
     const escapeRegex = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
     const dashesAtEnds = /(^-|-$)/g;
-    /**
-     * TODO: Explore using CSS.escape when it becomes more available
-     * in evergreen browsers.
-     */
     function escape(str) {
         return str // Replace all possible CSS selectors
             .replace(escapeRegex, '-') // Remove extraneous hyphens at the start and end
@@ -2047,9 +2080,6 @@
     class ComponentStyle {
         constructor(rules, componentId, baseStyle) {
             this.rules = rules;
-            this.staticRulesId = '';
-            this.isStatic =
-                "development" === 'production'  ;
             this.componentId = componentId;
             this.baseHash = phash(SEED, componentId);
             this.baseStyle = baseStyle;
@@ -2061,42 +2091,48 @@
             let names = this.baseStyle
                 ? this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis)
                 : '';
-            // force dynamic classnames if user-supplied stylis plugins are in use
-            if (this.isStatic && !stylis.hash) {
-                if (this.staticRulesId && styleSheet.hasNameForId(this.componentId, this.staticRulesId)) {
-                    names = joinStrings(names, this.staticRulesId);
-                }
-                else {
-                    const cssStatic = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
-                    const name = generateAlphabeticName(phash(this.baseHash, cssStatic) >>> 0);
-                    if (!styleSheet.hasNameForId(this.componentId, name)) {
-                        const cssStaticFormatted = stylis(cssStatic, '.' + name, undefined, this.componentId);
-                        styleSheet.insertRules(this.componentId, name, cssStaticFormatted);
-                    }
-                    names = joinStrings(names, name);
-                    this.staticRulesId = name;
-                }
-            }
-            else {
-                let dynamicHash = phash(this.baseHash, stylis.hash);
+            {
                 let css = '';
                 for (let i = 0; i < this.rules.length; i++) {
                     const partRule = this.rules[i];
                     if (typeof partRule === 'string') {
                         css += partRule;
-                        dynamicHash = phash(dynamicHash, partRule);
                     }
                     else if (partRule) {
-                        const partString = joinStringArray(flatten(partRule, executionContext, styleSheet, stylis));
-                        // The same value can switch positions in the array, so we include "i" in the hash.
-                        // Split into two phash calls to avoid temp string allocation (partString + i).
-                        // phash processes right-to-left, so phash(h, a+b) === phash(phash(h, b), a).
-                        dynamicHash = phash(phash(dynamicHash, String(i)), partString);
-                        css += partString;
+                        // Fast path: inline function call for the common case (interpolation
+                        // returning a string). Avoids flatten's type dispatch and array alloc.
+                        if (isStatelessFunction(partRule)) {
+                            const fnResult = partRule(executionContext);
+                            if (typeof fnResult === 'string') {
+                                css += fnResult;
+                            }
+                            else if (fnResult !== undefined && fnResult !== null && fnResult !== false) {
+                                if (typeof fnResult === 'object' &&
+                                    !Array.isArray(fnResult) &&
+                                    !isKeyframes(fnResult) &&
+                                    !isPlainObject(fnResult)) {
+                                    console.error(`${getComponentName(partRule)} is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.`);
+                                }
+                                css += joinStringArray(flatten(fnResult, executionContext, styleSheet, stylis));
+                            }
+                        }
+                        else {
+                            css += joinStringArray(flatten(partRule, executionContext, styleSheet, stylis));
+                        }
                     }
                 }
                 if (css) {
-                    const name = generateAlphabeticName(dynamicHash >>> 0);
+                    // Cache css->name to skip phash+generateName for repeat CSS strings.
+                    // The CSS string fully determines the class name for a given component,
+                    // so a Map lookup replaces O(cssLen) hashing on cache hit.
+                    if (!this.dynamicNameCache)
+                        this.dynamicNameCache = new Map();
+                    const cacheKey = stylis.hash ? stylis.hash + css : css;
+                    let name = this.dynamicNameCache.get(cacheKey);
+                    if (!name) {
+                        name = generateAlphabeticName(phash(phash(this.baseHash, stylis.hash), css) >>> 0);
+                        this.dynamicNameCache.set(cacheKey, name);
+                    }
                     if (!styleSheet.hasNameForId(this.componentId, name)) {
                         const cssFormatted = stylis(css, '.' + name, undefined, this.componentId);
                         styleSheet.insertRules(this.componentId, name, cssFormatted);
@@ -2108,17 +2144,37 @@
         }
     }
 
+    const hasOwn = Object.prototype.hasOwnProperty;
     const identifiers = {};
     /* We depend on components having unique IDs */
     function generateId(displayName, parentComponentId) {
         const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);
         // Ensure that no displayName can lead to duplicate componentIds
         identifiers[name] = (identifiers[name] || 0) + 1;
-        const componentId = `${name}-${generateComponentId(
-    // SC_VERSION gives us isolation between multiple runtimes on the page at once
-    // this is improved further with use of the babel plugin "namespace" feature
-    SC_VERSION + name + identifiers[name])}`;
-        return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;
+        const componentId = name +
+            '-' +
+            generateComponentId(
+            // SC_VERSION gives us isolation between multiple runtimes on the page at once
+            // this is improved further with use of the babel plugin "namespace" feature
+            SC_VERSION + name + identifiers[name]);
+        return parentComponentId ? parentComponentId + '-' + componentId : componentId;
+    }
+    /**
+     * Shallow-compare two context objects using a stored key count to avoid
+     * a second iteration pass. Returns true if all own-property values match.
+     */
+    function shallowEqualContext(prev, next, prevKeyCount) {
+        const a = prev;
+        const b = next;
+        let nextKeyCount = 0;
+        for (const key in b) {
+            if (hasOwn.call(b, key)) {
+                nextKeyCount++;
+                if (a[key] !== b[key])
+                    return false;
+            }
+        }
+        return nextKeyCount === prevKeyCount;
     }
     function useInjectedStyle(componentStyle, resolvedAttrs, styleSheet, stylis) {
         const className = componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);
@@ -2131,9 +2187,8 @@
         const context = Object.assign(Object.assign({}, props), { 
             // unset, add `props.className` back at the end so props always "wins"
             className: undefined, theme });
-        let attrDef;
-        for (let i = 0; i < attrs.length; i += 1) {
-            attrDef = attrs[i];
+        for (let i = 0; i < attrs.length; i++) {
+            const attrDef = attrs[i];
             // Pass a shallow copy to function attrs so the callback's captured
             // reference isn't mutated by subsequent attrs processing (#3336).
             const resolvedAttrDef = isFunction(attrDef) ? attrDef(Object.assign({}, context)) : attrDef;
@@ -2158,46 +2213,81 @@
         return context;
     }
     let seenUnknownProps = new Set();
-    function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
-        const { attrs: componentAttrs, componentStyle, defaultProps, foldedComponentIds, styledComponentId, target, } = forwardedComponent;
-        const contextTheme = React.useContext(ThemeContext) ;
-        const ssc = useStyleSheetContext();
-        const shouldForwardProp = forwardedComponent.shouldForwardProp || ssc.shouldForwardProp;
-        if (React.useDebugValue) {
-            React.useDebugValue(styledComponentId);
-        }
-        // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
-        // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
-        // should be an immutable value, but behave for now.
-        const theme = determineTheme(props, contextTheme, defaultProps) || (EMPTY_OBJECT);
-        const context = resolveContext(componentAttrs, props, theme);
-        const elementToBeCreated = context.as || target;
+    function buildPropsForElement(context, elementToBeCreated, theme, shouldForwardProp) {
         const propsForElement = {};
         for (const key in context) {
-            // @ts-expect-error context may have arbitrary properties from attrs
             if (context[key] === undefined) ;
             else if (key[0] === '$' || key === 'as' || (key === 'theme' && context.theme === theme)) ;
             else if (key === 'forwardedAs') {
                 propsForElement.as = context.forwardedAs;
             }
             else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
-                // @ts-expect-error context may have arbitrary properties from attrs
                 propsForElement[key] = context[key];
                 if (!shouldForwardProp &&
                     "development" === 'development' &&
                     !isPropValid(key) &&
                     !seenUnknownProps.has(key) &&
-                    // Only warn on DOM Element.
                     domElements.has(elementToBeCreated)) {
                     seenUnknownProps.add(key);
                     console.warn(`styled-components: it looks like an unknown prop "${key}" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via \`<StyleSheetManager shouldForwardProp={...}>\` (connect an API like \`@emotion/is-prop-valid\`) or consider using transient props (\`$\` prefix for automatic filtering.)`);
                 }
             }
         }
-        const generatedClassName = useInjectedStyle(componentStyle, context, ssc.styleSheet, ssc.stylis);
+        return propsForElement;
+    }
+    function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
+        const { attrs: componentAttrs, componentStyle, defaultProps, foldedComponentIds, styledComponentId, target, } = forwardedComponent;
+        const contextTheme = React.useContext(ThemeContext) ;
+        const ssc = useStyleSheetContext();
+        const shouldForwardProp = forwardedComponent.shouldForwardProp || ssc.shouldForwardProp;
+        if (React.useDebugValue) {
+            React.useDebugValue(styledComponentId);
+        }
+        // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
+        // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
+        // should be an immutable value, but behave for now.
+        const theme = determineTheme(props, contextTheme, defaultProps) || (EMPTY_OBJECT);
+        let context;
+        let generatedClassName;
+        // Client-only render cache: skip resolveContext and generateAndInjectStyles
+        // when props+theme haven't changed. propsForElement is always rebuilt since
+        // it's mutated with className/ref after construction.
+        // false and IS_RSC are build/module-level constants for dead-code elimination.
+        {
+            const renderCacheRef = React.useRef(null);
+            const prev = renderCacheRef.current;
+            if (prev !== null &&
+                prev[1] === theme &&
+                prev[2] === ssc.styleSheet &&
+                prev[3] === ssc.stylis &&
+                shallowEqualContext(prev[0], props, prev[4])) {
+                context = prev[5];
+                generatedClassName = prev[6];
+            }
+            else {
+                context = resolveContext(componentAttrs, props, theme);
+                generatedClassName = useInjectedStyle(componentStyle, context, ssc.styleSheet, ssc.stylis);
+                let propsKeyCount = 0;
+                for (const key in props) {
+                    if (hasOwn.call(props, key))
+                        propsKeyCount++;
+                }
+                renderCacheRef.current = [
+                    props,
+                    theme,
+                    ssc.styleSheet,
+                    ssc.stylis,
+                    propsKeyCount,
+                    context,
+                    generatedClassName,
+                ];
+            }
+        }
         if (forwardedComponent.warnTooManyClasses) {
             forwardedComponent.warnTooManyClasses(generatedClassName);
         }
+        const elementToBeCreated = context.as || target;
+        const propsForElement = buildPropsForElement(context, elementToBeCreated, theme, shouldForwardProp);
         let classString = joinStrings(foldedComponentIds, styledComponentId);
         if (generatedClassName) {
             classString += ' ' + generatedClassName;
@@ -2205,15 +2295,10 @@
         if (context.className) {
             classString += ' ' + context.className;
         }
-        propsForElement[
-        // handle custom elements which React doesn't properly alias
-        isTag(elementToBeCreated) &&
+        propsForElement[isTag(elementToBeCreated) &&
             !domElements.has(elementToBeCreated)
             ? 'class'
             : 'className'] = classString;
-        // forwardedRef is coming from React.forwardRef.
-        // But it might not exist. Since React 19 handles `ref` like a prop, it only define it if there is a value.
-        // We don't want to inject an empty ref.
         if (forwardedRef) {
             propsForElement.ref = forwardedRef;
         }
@@ -2226,7 +2311,7 @@
         const isCompositeComponent = !isTag(target);
         const { attrs = EMPTY_ARRAY, componentId = generateId(options.displayName, options.parentComponentId), displayName = generateDisplayName(target), } = options;
         const styledComponentId = options.displayName && options.componentId
-            ? `${escape(options.displayName)}-${options.componentId}`
+            ? escape(options.displayName) + '-' + options.componentId
             : options.componentId || componentId;
         // fold the underlying StyledComponent attrs up (implicit extend)
         const finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
@@ -2326,6 +2411,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