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

package/dist/styled-components.esm.js

@@ -8,7 +8,7 @@ var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR
     '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.4";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof undefined !== 'undefined' ;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -437,8 +437,12 @@ function isStyledComponent(target) {
 /**
  * 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 isPlainObject(x) {
@@ -477,7 +481,6 @@ function mixinRecursively(target, source, forceMerge) {
  * 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];
@@ -1130,8 +1133,8 @@ function addUnitIfNeeded(name, value) {
  * 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()); };
 /**
@@ -1148,7 +1151,7 @@ var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase())
  * 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;
 }
@@ -1189,21 +1192,18 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
         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)) {
@@ -1220,26 +1220,27 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
             }
             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) {
     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;
@@ -1373,35 +1374,10 @@ function generateId(displayName, parentComponentId) {
     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
     if (process.env.NODE_ENV !== 'production')
         useDebugValue(className);
@@ -1418,22 +1394,36 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStati
     // 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, useContext(ThemeContext), defaultProps);
-    var context = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);
+    var theme = determineTheme(props, useContext(ThemeContext), defaultProps) || EMPTY_OBJECT;
+    var context = componentAttrs.reduce(function (p, attrDef) {
+        var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(p) : attrDef;
+        /* eslint-disable guard-for-in */
+        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];
+        }
+        /* eslint-enable guard-for-in */
+        return p;
+    }, __assign(__assign({}, props), { theme: theme }));
     var generatedClassName = useInjectedStyle(componentStyle, isStatic, context, process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined);
     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) {
-        if (key[0] === '$' || key === 'as' || key === 'theme')
-            continue;
+        // @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[key];
+            propsForElement.as = context.forwardedAs;
         }
-        else if (shouldForwardProp ? shouldForwardProp(key, elementToBeCreated) : true) {
-            // Don't pass through non HTML tags through to HTML elements
+        else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
+            // @ts-expect-error for..in iterates strings instead of keyof
             propsForElement[key] = context[key];
         }
     }
@@ -1443,7 +1433,7 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStati
         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;
@@ -1459,7 +1449,9 @@ function createStyledComponent(target, options, rules) {
         : 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) {
@@ -1554,11 +1546,7 @@ function interleave(strings, interpolations) {
  * 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 = [];
@@ -1575,7 +1563,7 @@ function css(styles) {
     if (interpolations.length === 0 &&
         styleStringArray.length === 1 &&
         typeof styleStringArray[0] === 'string') {
-        return styleStringArray;
+        return flatten(styleStringArray);
     }
     return addTag(flatten(interleave(styleStringArray, interpolations)));
 }