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

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.3";
+    var SC_VERSION = "6.0.0-beta.4";
     var SPLITTER = '/*!sc*/\n';
     var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
     var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -998,21 +998,18 @@
             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 === '')
+                if (result.length === 0)
                     continue;
-                else if (Array.isArray(result))
-                    ruleSet.push.apply(ruleSet, result);
-                else
-                    ruleSet.push(result);
+                ruleSet.push.apply(ruleSet, result);
             }
             return ruleSet;
         }
         if (isFalsish(chunk)) {
-            return '';
+            return [];
         }
         /* Handle other components */
         if (isStyledComponent(chunk)) {
-            return ".".concat(chunk.styledComponentId);
+            return [".".concat(chunk.styledComponentId)];
         }
         /* Either execute or defer the function */
         if (isFunction(chunk)) {
@@ -1028,19 +1025,21 @@
                 }
                 return flatten(result, executionContext, styleSheet, stylisInstance);
             }
-            else
-                return chunk;
+            else {
+                return [chunk];
+            }
         }
         if (chunk instanceof Keyframes) {
             if (styleSheet) {
                 chunk.inject(styleSheet, stylisInstance);
-                return chunk.getName(stylisInstance);
+                return [chunk.getName(stylisInstance)];
+            }
+            else {
+                return [chunk];
             }
-            else
-                return chunk;
         }
         /* Handle objects */
-        return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
+        return isPlainObject(chunk) ? objToCssArray(chunk) : [chunk.toString()];
     }
 
     function isStaticRules(rules) {
@@ -1208,11 +1207,7 @@
      * expand an array of styles.
      */
     var addTag = function (arg) {
-        if (Array.isArray(arg)) {
-            // eslint-disable-next-line no-param-reassign
-            arg.isCss = true;
-        }
-        return arg;
+        return Object.assign(arg, { isCss: true });
     };
     function css(styles) {
         var interpolations = [];
@@ -1229,7 +1224,7 @@
         if (interpolations.length === 0 &&
             styleStringArray.length === 1 &&
             typeof styleStringArray[0] === 'string') {
-            return styleStringArray;
+            return flatten(styleStringArray);
         }
         return addTag(flatten(interleave(styleStringArray, interpolations)));
     }
@@ -1723,8 +1718,12 @@
     /**
      * Convenience function for joining strings to form className chains
      */
-    function joinStrings(a, b) {
-        return a && b ? "".concat(a, " ").concat(b) : a || b;
+    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) {
@@ -1752,7 +1751,6 @@
      * Source objects applied left to right.  Mutates & returns target.  Similar to lodash merge.
      */
     function mixinDeep(target) {
-        if (target === void 0) { target = {}; }
         var sources = [];
         for (var _i = 1; _i < arguments.length; _i++) {
             sources[_i - 1] = arguments[_i];
@@ -1875,18 +1873,14 @@
         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) {
+            for (var key in resolvedAttrDef) {
                 // @ts-expect-error bad types
                 p[key] =
                     key === 'className'
-                        ? // @ts-expect-error bad types
-                            joinStrings(p[key], resolvedAttrDef[key])
+                        ? 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];
+                            ? __assign(__assign({}, p[key]), resolvedAttrDef[key]) : resolvedAttrDef[key];
             }
             /* eslint-enable guard-for-in */
             return p;
@@ -1895,22 +1889,21 @@
         var refToForward = forwardedRef;
         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')
-                context[key] = undefined;
+            // @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') {
-                context.as = context[key];
-                context[key] = undefined;
+                propsForElement.as = context.forwardedAs;
             }
-            else if (shouldForwardProp ? !shouldForwardProp(key, elementToBeCreated) : false) {
-                // Don't pass through non HTML tags through to HTML elements
-                // @ts-expect-error we don't know ahead of time
-                context[key] = undefined;
+            else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
+                // @ts-expect-error for..in iterates strings instead of keyof
+                propsForElement[key] = context[key];
             }
         }
-        context[
+        propsForElement[
         // handle custom elements which React doesn't properly alias
         isTargetTag &&
             domElements.indexOf(elementToBeCreated) === -1
@@ -1919,9 +1912,8 @@
             .concat(styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : '', context.className || '')
             .filter(Boolean)
             .join(' ');
-        // @ts-expect-error idk the type is probably wrong in this file
-        context.ref = refToForward;
-        return React.createElement(elementToBeCreated, context);
+        propsForElement.ref = refToForward;
+        return React.createElement(elementToBeCreated, propsForElement);
     }
     function createStyledComponent(target, options, rules) {
         var isTargetStyledComp = isStyledComponent(target);
@@ -1933,7 +1925,9 @@
             : options.componentId || componentId;
         // fold the underlying StyledComponent attrs up (implicit extend)
         var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
-            ? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
+            ? styledComponentTarget.attrs
+                .concat(attrs)
+                .filter(Boolean)
             : attrs;
         var shouldForwardProp = options.shouldForwardProp;
         if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {