styled-components 6.0.0-beta.13 → 6.0.0-beta.14

package/dist/styled-components.js

@@ -8,7 +8,7 @@
         'data-styled';
     var SC_ATTR_ACTIVE = 'active';
     var SC_ATTR_VERSION = 'data-styled-version';
-    var SC_VERSION = "6.0.0-beta.13";
+    var SC_VERSION = "6.0.0-beta.14";
     var SPLITTER = '/*!sc*/\n';
     var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
     var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -160,17 +160,10 @@
                 }
             }
             var ruleIndex = this.indexOfGroup(group + 1);
-            if (Array.isArray(rules)) {
-                for (var i = 0, l = rules.length; i < l; i++) {
-                    if (this.tag.insertRule(ruleIndex, rules[i])) {
-                        this.groupSizes[group]++;
-                        ruleIndex++;
-                    }
-                }
-            }
-            else {
-                if (this.tag.insertRule(ruleIndex, rules)) {
+            for (var i = 0, l = rules.length; i < l; i++) {
+                if (this.tag.insertRule(ruleIndex, rules[i])) {
                     this.groupSizes[group]++;
+                    ruleIndex++;
                 }
             }
         };
@@ -372,10 +365,10 @@
     };
     var CSSOMTag = /** @class */ (function () {
         function CSSOMTag(target) {
-            var element = (this.element = makeStyleTag(target));
+            this.element = makeStyleTag(target);
             // Avoid Edge bug where empty style elements don't create sheets
-            element.appendChild(document.createTextNode(''));
-            this.sheet = getSheet(element);
+            this.element.appendChild(document.createTextNode(''));
+            this.sheet = getSheet(this.element);
             this.length = 0;
         }
         CSSOMTag.prototype.insertRule = function (index, rule) {
@@ -395,7 +388,7 @@
         CSSOMTag.prototype.getRule = function (index) {
             var rule = this.sheet.cssRules[index];
             // Avoid IE11 quirk where cssText is inaccessible on some invalid rules
-            if (rule !== undefined && typeof rule.cssText === 'string') {
+            if (rule && rule.cssText) {
                 return rule.cssText;
             }
             else {
@@ -407,8 +400,8 @@
     /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
     var TextTag = /** @class */ (function () {
         function TextTag(target) {
-            var element = (this.element = makeStyleTag(target));
-            this.nodes = element.childNodes;
+            this.element = makeStyleTag(target);
+            this.nodes = this.element.childNodes;
             this.length = 0;
         }
         TextTag.prototype.insertRule = function (index, rule) {
@@ -620,7 +613,13 @@
      * separated when using CSSOM injection.
      */
     function serialize(children, callback) {
-        return children.map(function (c, i) { return callback(c, i, children, callback); }).filter(Boolean);
+        var ret = [];
+        for (var i = 0, result = void 0; i < children.length; i += 1) {
+            result = callback(children[i], i, children, callback);
+            if (result)
+                ret.push(result);
+        }
+        return ret;
     }
     /**
      * Takes an element and recurses through it's rules added the namespace to the start of each selector.
@@ -673,10 +672,17 @@
          */
         var selfReferenceReplacementPlugin = function (element) {
             if (element.type === c && element.value.includes('&')) {
-                var props = element.props;
-                props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);
+                element.props[0] = element.props[0].replace(_selectorRegexp, selfReferenceReplacer);
             }
         };
+        var middlewares = plugins.slice();
+        /**
+         * Enables automatic vendor-prefixing for styles.
+         */
+        if (options.prefix) {
+            middlewares.unshift(pe);
+        }
+        middlewares.push(selfReferenceReplacementPlugin, oe);
         var stringifyRules = function (css, selector, 
         /**
          * This "prefix" referes to a _selector_ prefix.
@@ -685,7 +691,6 @@
             if (selector === void 0) { selector = ''; }
             if (prefix === void 0) { prefix = ''; }
             if (componentId === void 0) { componentId = '&'; }
-            var flatCSS = css.replace(COMMENT_REGEX, '');
             // stylis has no concept of state to be passed to plugins
             // but since JS is single-threaded, we can rely on that to ensure
             // these properties stay in sync with the current stylis run
@@ -693,14 +698,7 @@
             _selector = selector;
             _selectorRegexp = new RegExp("\\".concat(_selector, "\\b"), 'g');
             _consecutiveSelfRefRegExp = new RegExp("(\\".concat(_selector, "\\b){2,}"));
-            var middlewares = plugins.slice();
-            /**
-             * Enables automatic vendor-prefixing for styles.
-             */
-            if (options.prefix || options.prefix === undefined) {
-                middlewares.unshift(pe);
-            }
-            middlewares.push(selfReferenceReplacementPlugin, oe);
+            var flatCSS = css.replace(COMMENT_REGEX, '');
             var compiled = ne(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS);
             if (options.namespace) {
                 compiled = recursivelySetNamepace(compiled, options.namespace);
@@ -720,28 +718,23 @@
         return stringifyRules;
     }
 
+    var mainSheet = new StyleSheet();
+    var mainStylis = createStylisInstance();
     var StyleSheetContext = React.createContext({
         shouldForwardProp: undefined,
-        styleSheet: undefined,
+        styleSheet: mainSheet,
+        stylis: mainStylis,
     });
     var StyleSheetConsumer = StyleSheetContext.Consumer;
     var StylisContext = React.createContext(undefined);
-    var mainSheet = new StyleSheet();
-    var mainStylis = createStylisInstance();
-    function useShouldForwardProp() {
-        return React.useContext(StyleSheetContext).shouldForwardProp;
-    }
-    function useStyleSheet() {
-        return React.useContext(StyleSheetContext).styleSheet || mainSheet;
-    }
-    function useStylis() {
-        return React.useContext(StylisContext) || mainStylis;
+    function useStyleSheetContext() {
+        return React.useContext(StyleSheetContext);
     }
     function StyleSheetManager(props) {
         var _a = React.useState(props.stylisPlugins), plugins = _a[0], setPlugins = _a[1];
-        var contextStyleSheet = useStyleSheet();
-        var styleSheet = React.useMemo(function () {
-            var sheet = contextStyleSheet;
+        var styleSheet = useStyleSheetContext().styleSheet;
+        var resolvedStyleSheet = React.useMemo(function () {
+            var sheet = styleSheet;
             if (props.sheet) {
                 sheet = props.sheet;
             }
@@ -752,20 +745,19 @@
                 sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });
             }
             return sheet;
-        }, [props.disableCSSOMInjection, props.sheet, props.target]);
+        }, [props.disableCSSOMInjection, props.sheet, props.target, styleSheet]);
         var stylis = React.useMemo(function () {
             return createStylisInstance({
-                options: { namespace: props.namespace, prefix: !props.disableVendorPrefixes },
+                options: { namespace: props.namespace, prefix: props.enableVendorPrefixes },
                 plugins: plugins,
             });
-        }, [props.disableVendorPrefixes, props.namespace, plugins]);
+        }, [props.enableVendorPrefixes, props.namespace, plugins]);
         React.useEffect(function () {
             if (!shallowequal(plugins, props.stylisPlugins))
                 setPlugins(props.stylisPlugins);
         }, [props.stylisPlugins]);
-        return (React.createElement(StyleSheetContext.Provider, { value: { shouldForwardProp: props.shouldForwardProp, styleSheet: styleSheet } },
-            React.createElement(StylisContext.Provider, { value: stylis }, React.Children.only(props.children)
-                )));
+        return (React.createElement(StyleSheetContext.Provider, { value: { shouldForwardProp: props.shouldForwardProp, styleSheet: resolvedStyleSheet, stylis: stylis } },
+            React.createElement(StylisContext.Provider, { value: stylis }, props.children)));
     }
 
     var Keyframes = /** @class */ (function () {
@@ -860,14 +852,7 @@
             'Component');
     }
 
-    /**
-     * inlined version of
-     * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
-     */
-    var uppercaseCheck = /[A-Z]/;
-    var uppercasePattern = /[A-Z]/g;
-    var msPattern = /^ms-/;
-    var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase()); };
+    var isUpper = function (c) { return c >= 'A' && c <= 'Z'; };
     /**
      * Hyphenates a camelcased CSS property name, for example:
      *
@@ -882,9 +867,21 @@
      * is converted to `-ms-`.
      */
     function hyphenateStyleName(string) {
-        return uppercaseCheck.test(string) && !string.startsWith('--')
-            ? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-')
-            : string;
+        var output = '';
+        for (var i = 0; i < string.length; i++) {
+            var c = string[i];
+            // Check for CSS variable prefix
+            if (i === 1 && c === '-' && string[0] === '-') {
+                return string;
+            }
+            if (isUpper(c)) {
+                output += '-' + c.toLowerCase();
+            }
+            else {
+                output += c;
+            }
+        }
+        return output.startsWith('ms-') ? '-' + output : output;
     }
 
     function isFunction(test) {
@@ -894,16 +891,13 @@
     function isPlainObject(x) {
         return (x !== null &&
             typeof x === 'object' &&
-            /* a check for empty prototype would be more typical, but that
-               doesn't play well with objects created in different vm contexts */
-            (!x.constructor || x.constructor.name === 'Object') &&
-            (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' &&
+            x.constructor.name === Object.name &&
             /* check for reasonable markers that the object isn't an element for react & preact/compat */
-            !('props' in x && (x.$$typeof || x.constructor === undefined)));
+            !('props' in x && x.$$typeof));
     }
 
     function isStatelessFunction(test) {
-        return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);
+        return isFunction(test) && !(test.prototype && test.prototype.isReactComponent);
     }
 
     function isStyledComponent(target) {
@@ -916,34 +910,26 @@
     var isFalsish = function (chunk) {
         return chunk === undefined || chunk === null || chunk === false || chunk === '';
     };
-    var objToCssArray = function (obj, prevKey) {
+    var objToCssArray = function (obj) {
         var rules = [];
         for (var key in obj) {
-            if (!obj.hasOwnProperty(key) || isFalsish(obj[key]))
+            var val = obj[key];
+            if (!obj.hasOwnProperty(key) || isFalsish(val))
                 continue;
-            if ((Array.isArray(obj[key]) && obj[key].isCss) || isFunction(obj[key])) {
-                rules.push("".concat(hyphenateStyleName(key), ":"), obj[key], ';');
+            // @ts-expect-error Property 'isCss' does not exist on type 'any[]'
+            if ((Array.isArray(val) && val.isCss) || isFunction(val)) {
+                rules.push("".concat(hyphenateStyleName(key), ":"), val, ';');
             }
-            else if (isPlainObject(obj[key])) {
-                rules.push.apply(rules, objToCssArray(obj[key], key));
+            else if (isPlainObject(val)) {
+                rules.push.apply(rules, __spreadArray(__spreadArray(["".concat(key, " {")], objToCssArray(val), false), ['}'], false));
             }
             else {
-                rules.push("".concat(hyphenateStyleName(key), ": ").concat(addUnitIfNeeded(key, obj[key]), ";"));
+                rules.push("".concat(hyphenateStyleName(key), ": ").concat(addUnitIfNeeded(key, val), ";"));
             }
         }
-        return prevKey ? __spreadArray(__spreadArray(["".concat(prevKey, " {")], rules, true), ['}'], false) : rules;
+        return rules;
     };
     function flatten(chunk, executionContext, styleSheet, stylisInstance) {
-        if (Array.isArray(chunk)) {
-            var ruleSet = [];
-            for (var i = 0, len = chunk.length, result = void 0; i < len; i += 1) {
-                result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);
-                if (result.length === 0)
-                    continue;
-                ruleSet.push.apply(ruleSet, result);
-            }
-            return ruleSet;
-        }
         if (isFalsish(chunk)) {
             return [];
         }
@@ -954,14 +940,13 @@
         /* Either execute or defer the function */
         if (isFunction(chunk)) {
             if (isStatelessFunction(chunk) && executionContext) {
-                var chunkFn = chunk;
-                var result = chunkFn(executionContext);
+                var result = chunk(executionContext);
                 if (typeof result === 'object' &&
                     !Array.isArray(result) &&
                     !(result instanceof Keyframes) &&
                     !isPlainObject(result) &&
                     result !== null) {
-                    console.error("".concat(getComponentName(chunkFn), " 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."));
+                    console.error("".concat(getComponentName(chunk), " 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."));
                 }
                 return flatten(result, executionContext, styleSheet, stylisInstance);
             }
@@ -979,7 +964,16 @@
             }
         }
         /* Handle objects */
-        return isPlainObject(chunk) ? objToCssArray(chunk) : [chunk.toString()];
+        if (isPlainObject(chunk)) {
+            return objToCssArray(chunk);
+        }
+        if (!Array.isArray(chunk)) {
+            return [chunk.toString()];
+        }
+        /* Handle objects */
+        return chunk.flatMap(function (chunklet) {
+            return flatten(chunklet, executionContext, styleSheet, stylisInstance);
+        });
     }
 
     function isStaticRules(rules) {
@@ -994,6 +988,23 @@
         return true;
     }
 
+    /**
+     * Convenience function for joining strings to form className chains
+     */
+    function joinStrings(a, b) {
+        return a && b ? "".concat(a, " ").concat(b) : a || b || '';
+    }
+    function joinStringArray(arr, sep) {
+        if (arr.length === 0) {
+            return '';
+        }
+        var result = arr[0];
+        for (var i = 1; i < arr.length; i++) {
+            result += sep ? sep + arr[i] : arr[i];
+        }
+        return result;
+    }
+
     var GlobalStyle = /** @class */ (function () {
         function GlobalStyle(rules, componentId) {
             this.rules = rules;
@@ -1004,8 +1015,8 @@
             StyleSheet.registerId(this.componentId + 1);
         }
         GlobalStyle.prototype.createStyles = function (instance, executionContext, styleSheet, stylis) {
-            var flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);
-            var css = stylis(flatCSS.join(''), '');
+            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);
@@ -1042,11 +1053,14 @@
         }
         return outerTheme ? __assign(__assign({}, outerTheme), theme) : theme;
     }
+    function useTheme() {
+        return React.useContext(ThemeContext);
+    }
     /**
      * Provide a theme to an entire react component tree via context
      */
     function ThemeProvider(props) {
-        var outerTheme = React.useContext(ThemeContext);
+        var outerTheme = useTheme();
         var themeContext = React.useMemo(function () { return mergeTheme(props.theme, outerTheme); }, [props.theme, outerTheme]);
         if (!props.children) {
             return null;
@@ -1179,10 +1193,9 @@
             checkDynamicCreation(styledComponentId);
         }
         var GlobalStyleComponent = function (props) {
-            var styleSheet = useStyleSheet();
-            var stylis = useStylis();
-            var theme = React.useContext(ThemeContext);
-            var instanceRef = React.useRef(styleSheet.allocateGSInstance(styledComponentId));
+            var ssc = useStyleSheetContext();
+            var theme = useTheme();
+            var instanceRef = React.useRef(ssc.styleSheet.allocateGSInstance(styledComponentId));
             var instance = instanceRef.current;
             if (React.Children.count(props.children)) {
                 console.warn("The global style component ".concat(styledComponentId, " was given child JSX. createGlobalStyle does not render children."));
@@ -1190,17 +1203,17 @@
             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.");
             }
-            if (styleSheet.server) {
-                renderStyles(instance, props, styleSheet, theme, stylis);
+            if (ssc.styleSheet.server) {
+                renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
             }
             {
                 // @ts-expect-error still using React 17 types for the time being
                 (React.useInsertionEffect || React.useLayoutEffect)(function () {
-                    if (!styleSheet.server) {
-                        renderStyles(instance, props, styleSheet, theme, stylis);
-                        return function () { return globalStyle.removeStyles(instance, styleSheet); };
+                    if (!ssc.styleSheet.server) {
+                        renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
+                        return function () { return globalStyle.removeStyles(instance, ssc.styleSheet); };
                     }
-                }, [instance, props, styleSheet, theme, stylis]);
+                }, [instance, props, ssc.styleSheet, theme, ssc.stylis]);
             }
             return null;
         };
@@ -1226,7 +1239,7 @@
             navigator.product === 'ReactNative') {
             console.warn('`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.');
         }
-        var rules = css.apply(void 0, __spreadArray([strings], interpolations, false)).join('');
+        var rules = joinStringArray(css.apply(void 0, __spreadArray([strings], interpolations, false)));
         var name = generateComponentId(rules);
         return new Keyframes(name, rules);
     }
@@ -1338,7 +1351,7 @@
 
     function withTheme(Component) {
         var WithTheme = React.forwardRef(function (props, ref) {
-            var theme = React.useContext(ThemeContext);
+            var theme = useTheme();
             var themeProp = determineTheme(props, theme, Component.defaultProps);
             if (themeProp === undefined) {
                 console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"".concat(getComponentName(Component), "\""));
@@ -1349,8 +1362,6 @@
         return hoistNonReactStatics(WithTheme, Component);
     }
 
-    var useTheme = function () { return React.useContext(ThemeContext); };
-
     var ServerStyleSheet = /** @class */ (function () {
         function ServerStyleSheet() {
             var _this = this;
@@ -1362,7 +1373,7 @@
                     "".concat(SC_ATTR, "=\"true\""),
                     "".concat(SC_ATTR_VERSION, "=\"").concat(SC_VERSION, "\""),
                 ];
-                var htmlAttr = attrs.filter(Boolean).join(' ');
+                var htmlAttr = joinStringArray(attrs.filter(Boolean), ' ');
                 return "<style ".concat(htmlAttr, ">").concat(css, "</style>");
             };
             this.getStyleTags = function () {
@@ -1481,7 +1492,7 @@
     });
 
     // Thanks to ReactDOMFactories for this handy list!
-    var domElements = [
+    var domElements = new Set([
         'a',
         'abbr',
         'address',
@@ -1617,7 +1628,7 @@
         'svg',
         'text',
         'tspan',
-    ];
+    ]);
 
     // Source: https://www.w3.org/TR/cssom-1/#serialize-an-identifier
     // Control characters and non-letter first symbols are not supported
@@ -1643,17 +1654,6 @@
         return isTag(target) ? "styled.".concat(target) : "Styled(".concat(getComponentName(target), ")");
     }
 
-    /**
-     * Convenience function for joining strings to form className chains
-     */
-    function joinStrings() {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return args.filter(Boolean).join(' ');
-    }
-
     function mixinRecursively(target, source, forceMerge) {
         if (forceMerge === void 0) { forceMerge = false; }
         /* only merge into POJOs, Arrays, but for top level objects only
@@ -1696,74 +1696,61 @@
      */
     var ComponentStyle = /** @class */ (function () {
         function ComponentStyle(rules, componentId, baseStyle) {
-            this.names = [];
             this.rules = rules;
             this.staticRulesId = '';
             this.isStatic =
                 "development" === 'production'  ;
             this.componentId = componentId;
-            // 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
             this.baseHash = phash(SEED, componentId);
             this.baseStyle = baseStyle;
             // NOTE: This registers the componentId, which ensures a consistent order
             // for this component's styles compared to others
             StyleSheet.registerId(componentId);
         }
-        /*
-         * Flattens a rule set into valid CSS
-         * Hashes it, wraps the whole chunk in a .hash1234 {}
-         * Returns the hash to be injected on render()
-         * */
         ComponentStyle.prototype.generateAndInjectStyles = function (executionContext, styleSheet, stylis) {
-            var componentId = this.componentId;
-            this.names.length = 0;
-            if (this.baseStyle) {
-                this.names.push(this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis));
-            }
+            var 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(componentId, this.staticRulesId)) {
-                    this.names.push(this.staticRulesId);
+                if (this.staticRulesId && styleSheet.hasNameForId(this.componentId, this.staticRulesId)) {
+                    names = joinStrings(names, this.staticRulesId);
                 }
                 else {
-                    var cssStatic = flatten(this.rules, executionContext, styleSheet, stylis).join('');
+                    var cssStatic = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
                     var name_1 = generateAlphabeticName(phash(this.baseHash, cssStatic) >>> 0);
-                    if (!styleSheet.hasNameForId(componentId, name_1)) {
-                        var cssStaticFormatted = stylis(cssStatic, ".".concat(name_1), undefined, componentId);
-                        styleSheet.insertRules(componentId, name_1, cssStaticFormatted);
+                    if (!styleSheet.hasNameForId(this.componentId, name_1)) {
+                        var cssStaticFormatted = stylis(cssStatic, ".".concat(name_1), undefined, this.componentId);
+                        styleSheet.insertRules(this.componentId, name_1, cssStaticFormatted);
                     }
-                    this.names.push(name_1);
+                    names = joinStrings(names, name_1);
                     this.staticRulesId = name_1;
                 }
             }
             else {
-                var length_1 = this.rules.length;
                 var dynamicHash = phash(this.baseHash, stylis.hash);
                 var css = '';
-                for (var i = 0; i < length_1; i++) {
+                for (var i = 0; i < this.rules.length; i++) {
                     var partRule = this.rules[i];
                     if (typeof partRule === 'string') {
                         css += partRule;
                         dynamicHash = phash(dynamicHash, partRule);
                     }
                     else if (partRule) {
-                        var partChunk = flatten(partRule, executionContext, styleSheet, stylis);
-                        var partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;
+                        var partString = joinStringArray(flatten(partRule, executionContext, styleSheet, stylis));
                         dynamicHash = phash(dynamicHash, partString);
                         css += partString;
                     }
                 }
                 if (css) {
                     var name_2 = generateAlphabeticName(dynamicHash >>> 0);
-                    if (!styleSheet.hasNameForId(componentId, name_2)) {
-                        var cssFormatted = stylis(css, ".".concat(name_2), undefined, componentId);
-                        styleSheet.insertRules(componentId, name_2, cssFormatted);
+                    if (!styleSheet.hasNameForId(this.componentId, name_2)) {
+                        styleSheet.insertRules(this.componentId, name_2, stylis(css, ".".concat(name_2), undefined, this.componentId));
                     }
-                    this.names.push(name_2);
+                    names = joinStrings(names, name_2);
                 }
             }
-            return this.names.join(' ');
+            return names;
         };
         return ComponentStyle;
     }());
@@ -1780,64 +1767,75 @@
         SC_VERSION + name + identifiers[name]));
         return parentComponentId ? "".concat(parentComponentId, "-").concat(componentId) : componentId;
     }
-    function useInjectedStyle(componentStyle, isStatic, resolvedAttrs, warnTooManyClasses) {
-        var styleSheet = useStyleSheet();
-        var stylis = useStylis();
-        var className = componentStyle.generateAndInjectStyles(isStatic ? EMPTY_OBJECT : resolvedAttrs, styleSheet, stylis);
+    function useInjectedStyle(componentStyle, isStatic, resolvedAttrs) {
+        var ssc = useStyleSheetContext();
+        var className = componentStyle.generateAndInjectStyles(isStatic ? EMPTY_OBJECT : resolvedAttrs, ssc.styleSheet, ssc.stylis);
         React.useDebugValue(className);
-        if (!isStatic && warnTooManyClasses) {
-            warnTooManyClasses(className);
-        }
         return className;
     }
+    function resolveContext(attrs, props, theme) {
+        var context = __assign(__assign({}, props), { 
+            // unset, add `props.className` back at the end so props always "wins"
+            className: undefined, theme: theme });
+        var attrDef;
+        for (var i = 0; i < attrs.length; i += 1) {
+            attrDef = attrs[i];
+            var resolvedAttrDef = isFunction(attrDef) ? attrDef(context) : attrDef;
+            for (var key in resolvedAttrDef) {
+                // @ts-expect-error bad types
+                context[key] =
+                    key === 'className'
+                        ? joinStrings(context[key], resolvedAttrDef[key])
+                        : key === 'style'
+                            ? __assign(__assign({}, context[key]), resolvedAttrDef[key]) : resolvedAttrDef[key];
+            }
+        }
+        if (props.className) {
+            context.className = joinStrings(context.className, props.className);
+        }
+        return context;
+    }
     function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStatic) {
         var componentAttrs = forwardedComponent.attrs, componentStyle = forwardedComponent.componentStyle, defaultProps = forwardedComponent.defaultProps, foldedComponentIds = forwardedComponent.foldedComponentIds, styledComponentId = forwardedComponent.styledComponentId, target = forwardedComponent.target;
-        var defaultShouldForwardProp = useShouldForwardProp();
-        var shouldForwardProp = forwardedComponent.shouldForwardProp || defaultShouldForwardProp;
+        var contextTheme = useTheme();
+        var ssc = useStyleSheetContext();
+        var shouldForwardProp = forwardedComponent.shouldForwardProp || ssc.shouldForwardProp;
         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.
-        var theme = determineTheme(props, React.useContext(ThemeContext), defaultProps) || EMPTY_OBJECT;
-        var context = componentAttrs.reduce(function (p, attrDef) {
-            var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(p) : attrDef;
-            for (var key in resolvedAttrDef) {
-                // @ts-expect-error bad types
-                p[key] =
-                    key === 'className'
-                        ? joinStrings(p[key], resolvedAttrDef[key])
-                        : key === 'style'
-                            ? __assign(__assign({}, p[key]), resolvedAttrDef[key]) : resolvedAttrDef[key];
-            }
-            return p;
-        }, __assign(__assign({}, props), { theme: theme }));
-        var generatedClassName = useInjectedStyle(componentStyle, isStatic, context, forwardedComponent.warnTooManyClasses );
-        var refToForward = forwardedRef;
+        var theme = determineTheme(props, contextTheme, defaultProps) || EMPTY_OBJECT;
+        var context = resolveContext(componentAttrs, props, theme);
         var elementToBeCreated = context.as || target;
-        var isTargetTag = isTag(elementToBeCreated);
         var propsForElement = {};
         for (var key in context) {
-            // @ts-expect-error for..in iterates strings instead of keyof
             if (context[key] === undefined) ;
             else if (key[0] === '$' || key === 'as' || key === 'theme') ;
             else if (key === 'forwardedAs') {
                 propsForElement.as = context.forwardedAs;
             }
             else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
-                // @ts-expect-error for..in iterates strings instead of keyof
                 propsForElement[key] = context[key];
             }
         }
+        var generatedClassName = useInjectedStyle(componentStyle, isStatic, context);
+        if (!isStatic && forwardedComponent.warnTooManyClasses) {
+            forwardedComponent.warnTooManyClasses(generatedClassName);
+        }
+        var classString = joinStrings(foldedComponentIds, styledComponentId);
+        if (generatedClassName) {
+            classString += ' ' + generatedClassName;
+        }
+        if (context.className) {
+            classString += ' ' + context.className;
+        }
         propsForElement[
         // handle custom elements which React doesn't properly alias
-        isTargetTag &&
-            domElements.indexOf(elementToBeCreated) === -1
+        isTag(elementToBeCreated) &&
+            !domElements.has(elementToBeCreated)
             ? 'class'
-            : 'className'] = foldedComponentIds
-            .concat(styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : '', context.className || '')
-            .filter(Boolean)
-            .join(' ');
-        propsForElement.ref = refToForward;
+            : 'className'] = classString;
+        propsForElement.ref = forwardedRef;
         return React.createElement(elementToBeCreated, propsForElement);
     }
     function createStyledComponent(target, options, rules) {
@@ -1889,8 +1887,8 @@
         // this static is used to preserve the cascade of static classes for component selector
         // purposes; this is especially important with usage of the css prop
         WrappedStyledComponent.foldedComponentIds = isTargetStyledComp
-            ? styledComponentTarget.foldedComponentIds.concat(styledComponentTarget.styledComponentId)
-            : EMPTY_ARRAY;
+            ? joinStrings(styledComponentTarget.foldedComponentIds, styledComponentTarget.styledComponentId)
+            : '';
         WrappedStyledComponent.styledComponentId = styledComponentId;
         // fold the underlying StyledComponent target up since we folded the styles
         WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
@@ -1912,7 +1910,9 @@
         // cannot have the property changed using an assignment. If using strict mode, attempting that will cause an error. If not using strict
         // mode, attempting that will be silently ignored.
         // However, we can still explicitly shadow the prototype's "toString" property by defining a new "toString" property on this object.
-        Object.defineProperty(WrappedStyledComponent, 'toString', { value: function () { return ".".concat(WrappedStyledComponent.styledComponentId); } });
+        Object.defineProperty(WrappedStyledComponent, 'toString', {
+            value: function () { return ".".concat(WrappedStyledComponent.styledComponentId); },
+        });
         if (isCompositeComponent) {
             var compositeComponentTarget = target;
             hoistNonReactStatics(WrappedStyledComponent, compositeComponentTarget, {