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

package/native/dist/styled-components.native.esm.js

@@ -69,7 +69,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.1";
+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'
@@ -658,8 +658,8 @@ function getComponentName(target) {
  * 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()); };
 /**
@@ -676,7 +676,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;
 }
@@ -759,9 +759,7 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
                 !(result instanceof Keyframes) &&
                 !isPlainObject(result)) {
                 // eslint-disable-next-line no-console
-                console.error("".concat(getComponentName(
-                // @ts-expect-error handling unexpected input
-                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(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."));
             }
             return flatten(result, executionContext, styleSheet, stylisInstance);
         }
@@ -1121,7 +1119,6 @@ function useResolvedAttrs(theme, props, attrs) {
     var context = __assign(__assign({}, props), { theme: theme });
     var resolvedAttrs = {};
     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 */
@@ -1133,8 +1130,6 @@ function useResolvedAttrs(theme, props, attrs) {
     });
     return [context, resolvedAttrs];
 }
-// Validator defaults to true if not in HTML/DOM env
-var validAttr = function () { return true; };
 function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
     var componentAttrs = forwardedComponent.attrs, inlineStyle = forwardedComponent.inlineStyle, defaultProps = forwardedComponent.defaultProps, shouldForwardProp = forwardedComponent.shouldForwardProp, target = forwardedComponent.target;
     // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
@@ -1144,7 +1139,7 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
     var _a = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs), context = _a[0], attrs = _a[1];
     var generatedStyles = inlineStyle.generateStyleObject(context);
     var refToForward = forwardedRef;
-    var elementToBeCreated = attrs.$as || props.$as || attrs.as || props.as || target;
+    var elementToBeCreated = attrs.as || props.as || target;
     var computedProps = attrs !== props ? __assign(__assign({}, props), attrs) : props;
     var propsForElement = {};
     // eslint-disable-next-line guard-for-in
@@ -1154,22 +1149,16 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
         else if (key === 'forwardedAs') {
             propsForElement.as = computedProps[key];
         }
-        else if (!shouldForwardProp || shouldForwardProp(key, validAttr, elementToBeCreated)) {
+        else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
             propsForElement[key] = computedProps[key];
         }
     }
     propsForElement.style = useMemo(function () {
-        if (typeof props.style === 'function') {
-            return function (state) {
-                return [generatedStyles].concat(props.style(state));
-            };
-        }
-        else if (props.style == null) {
-            return generatedStyles;
-        }
-        else {
-            return [generatedStyles].concat(props.style || []);
-        }
+        return typeof props.style === 'function'
+            ? function (state) { return [generatedStyles].concat(props.style(state)); }
+            : props.style
+                ? [generatedStyles].concat(props.style)
+                : generatedStyles;
     }, [props.style, generatedStyles]);
     propsForElement.ref = refToForward;
     return createElement(elementToBeCreated, propsForElement);
@@ -1190,9 +1179,9 @@ var _StyledNativeComponent = (function (InlineStyle) {
             if (options.shouldForwardProp) {
                 var passedShouldForwardPropFn_1 = options.shouldForwardProp;
                 // compose nested shouldForwardProp calls
-                shouldForwardProp = function (prop, filterFn, elementToBeCreated) {
-                    return shouldForwardPropFn_1(prop, filterFn, elementToBeCreated) &&
-                        passedShouldForwardPropFn_1(prop, filterFn, elementToBeCreated);
+                shouldForwardProp = function (prop, elementToBeCreated) {
+                    return shouldForwardPropFn_1(prop, elementToBeCreated) &&
+                        passedShouldForwardPropFn_1(prop, elementToBeCreated);
                 };
             }
             else {