styled-components 6.0.0-beta.2 → 6.0.0-beta.3

package/dist/styled-components.js

@@ -12,7 +12,7 @@
         'data-styled';
     var SC_ATTR_ACTIVE = 'active';
     var SC_ATTR_VERSION = 'data-styled-version';
-    var SC_VERSION = "6.0.0-beta.2";
+    var SC_VERSION = "6.0.0-beta.3";
     var SPLITTER = '/*!sc*/\n';
     var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
     var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -924,8 +924,8 @@
      * 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 uppercaseCheck = /[A-Z]/;
+    var uppercasePattern = /[A-Z]/g;
     var msPattern = /^ms-/;
     var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase()); };
     /**
@@ -942,7 +942,7 @@
      * is converted to `-ms-`.
      */
     function hyphenateStyleName(string) {
-        return uppercaseCheck.test(string)
+        return uppercaseCheck.test(string) && !string.startsWith('--')
             ? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-')
             : string;
     }
@@ -1046,8 +1046,7 @@
     function isStaticRules(rules) {
         for (var i = 0; i < rules.length; i += 1) {
             var rule = rules[i];
-            if (isFunction(rule) &&
-                !isStyledComponent(rule)) {
+            if (isFunction(rule) && !isStyledComponent(rule)) {
                 // functions are allowed to be static if they're just being
                 // used to get the classname of a nested styled component
                 return false;
@@ -1855,35 +1854,10 @@
         SC_VERSION + name + identifiers[name]));
         return parentComponentId ? "".concat(parentComponentId, "-").concat(componentId) : componentId;
     }
-    function useResolvedAttrs(theme, props, attrs) {
-        if (theme === void 0) { theme = EMPTY_OBJECT; }
-        // NOTE: can't memoize this
-        // returns [context, resolvedAttrs]
-        // where resolvedAttrs is only the things injected by the attrs themselves
-        var context = __assign(__assign({}, props), { theme: theme });
-        attrs.forEach(function (attrDef) {
-            // @ts-expect-error narrowing isn't working properly for some reason
-            var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(context) : attrDef;
-            var key;
-            /* eslint-disable guard-for-in */
-            for (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];
-            }
-            /* eslint-enable guard-for-in */
-        });
-        return context;
-    }
     function useInjectedStyle(componentStyle, isStatic, resolvedAttrs, warnTooManyClasses) {
         var styleSheet = useStyleSheet();
         var stylis = useStylis();
-        var className = isStatic
-            ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)
-            : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);
+        var className = componentStyle.generateAndInjectStyles(isStatic ? EMPTY_OBJECT : resolvedAttrs, styleSheet, stylis);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         React.useDebugValue(className);
         if (!isStatic && warnTooManyClasses) {
@@ -1898,36 +1872,56 @@
         // 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);
-        var context = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);
+        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;
+            var key;
+            /* eslint-disable guard-for-in */
+            for (key in resolvedAttrDef) {
+                // @ts-expect-error bad types
+                p[key] =
+                    key === 'className'
+                        ? // @ts-expect-error bad types
+                            joinStrings(p[key], resolvedAttrDef[key])
+                        : key === 'style'
+                            ? // @ts-expect-error bad types
+                             __assign(__assign({}, p[key]), resolvedAttrDef[key]) : // @ts-expect-error bad types
+                            resolvedAttrDef[key];
+            }
+            /* eslint-enable guard-for-in */
+            return p;
+        }, __assign(__assign({}, props), { theme: theme }));
         var generatedClassName = useInjectedStyle(componentStyle, isStatic, context, forwardedComponent.warnTooManyClasses );
         var refToForward = forwardedRef;
-        var elementToBeCreated = context.$as || context.as || target;
+        var elementToBeCreated = context.as || target;
         var isTargetTag = isTag(elementToBeCreated);
-        var propsForElement = {};
         // eslint-disable-next-line guard-for-in
         for (var key in context) {
+            // @ts-expect-error type narrowing not working properly
             if (key[0] === '$' || key === 'as' || key === 'theme')
-                continue;
+                context[key] = undefined;
             else if (key === 'forwardedAs') {
-                propsForElement.as = context[key];
+                context.as = context[key];
+                context[key] = undefined;
             }
-            else if (shouldForwardProp ? shouldForwardProp(key, elementToBeCreated) : true) {
+            else if (shouldForwardProp ? !shouldForwardProp(key, elementToBeCreated) : false) {
                 // Don't pass through non HTML tags through to HTML elements
-                propsForElement[key] = context[key];
+                // @ts-expect-error we don't know ahead of time
+                context[key] = undefined;
             }
         }
-        propsForElement[
+        context[
         // handle custom elements which React doesn't properly alias
         isTargetTag &&
             domElements.indexOf(elementToBeCreated) === -1
             ? 'class'
             : 'className'] = foldedComponentIds
-            .concat(styledComponentId, (generatedClassName !== styledComponentId ? generatedClassName : null), context.className)
+            .concat(styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : '', context.className || '')
             .filter(Boolean)
             .join(' ');
-        propsForElement.ref = refToForward;
-        return React.createElement(elementToBeCreated, propsForElement);
+        // @ts-expect-error idk the type is probably wrong in this file
+        context.ref = refToForward;
+        return React.createElement(elementToBeCreated, context);
     }
     function createStyledComponent(target, options, rules) {
         var isTargetStyledComp = isStyledComponent(target);