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

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

@@ -1,7 +1,7 @@
 import { __spreadArray, __assign } from 'tslib';
 import React, { useContext, useMemo, createElement } from 'react';
 import 'shallowequal';
-import { prefixer, stringify, middleware, compile, RULESET } from 'stylis';
+import { prefixer, stringify, compile, middleware, RULESET } from 'stylis';
 import unitless from '@emotion/unitless';
 import transformDeclPairs from 'css-to-react-native';
 import { parse } from 'postcss';
@@ -65,22 +65,24 @@ function throwStyledComponentsError(code) {
     }
 }
 
-var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
+var SC_ATTR = (typeof process !== 'undefined' && typeof process.env !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.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.11";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
     ? SC_DISABLE_SPEEDY
     : typeof process !== 'undefined' &&
+        typeof process.env !== 'undefined' &&
         typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
         process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
         ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
             ? false
             : process.env.REACT_APP_SC_DISABLE_SPEEDY
         : typeof process !== 'undefined' &&
+            typeof process.env !== 'undefined' &&
             typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
             process.env.SC_DISABLE_SPEEDY !== ''
             ? process.env.SC_DISABLE_SPEEDY === 'false'
@@ -229,7 +231,6 @@ var rehydrateNamesFromContent = function (sheet, id, content) {
     var names = content.split(',');
     var name;
     for (var i = 0, l = names.length; i < l; i++) {
-        // eslint-disable-next-line
         if ((name = names[i])) {
             sheet.registerName(id, name);
         }
@@ -539,6 +540,28 @@ var COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
 function serialize(children, callback) {
     return children.map(function (c, i) { return callback(c, i, children, callback); }).filter(Boolean);
 }
+/**
+ * Takes an element and recurses through it's rules added the namespace to the start of each selector.
+ * Takes into account media queries by recursing through child rules if they are present.
+ */
+function recursivelySetNamepace(compiled, namespace) {
+    return compiled.map(function (rule) {
+        if (rule.type === 'rule') {
+            // add the namespace to the start
+            rule.value = "".concat(namespace, " ").concat(rule.value);
+            // add the namespace after each comma for subsequent selectors.
+            // @ts-expect-error we target modern browsers but intentionally transpile to ES5 for speed
+            rule.value = rule.value.replaceAll(',', ",".concat(namespace, " "));
+            rule.props = rule.props.map(function (prop) {
+                return "".concat(namespace, " ").concat(prop);
+            });
+        }
+        if (Array.isArray(rule.children)) {
+            rule.children = recursivelySetNamepace(rule.children, namespace);
+        }
+        return rule;
+    });
+}
 function createStylisInstance(_a) {
     var _b = _a === void 0 ? EMPTY_OBJECT : _a, _c = _b.options, options = _c === void 0 ? EMPTY_OBJECT : _c, _d = _b.plugins, plugins = _d === void 0 ? EMPTY_ARRAY : _d;
     var _componentId;
@@ -572,7 +595,11 @@ function createStylisInstance(_a) {
             props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);
         }
     };
-    var stringifyRules = function (css, selector, prefix, componentId) {
+    var stringifyRules = function (css, selector, 
+    /**
+     * This "prefix" referes to a _selector_ prefix.
+     */
+    prefix, componentId) {
         if (selector === void 0) { selector = ''; }
         if (prefix === void 0) { prefix = ''; }
         if (componentId === void 0) { componentId = '&'; }
@@ -585,11 +612,18 @@ function createStylisInstance(_a) {
         _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(prefixer);
         }
         middlewares.push(selfReferenceReplacementPlugin, stringify);
-        return serialize(compile(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS), middleware(middlewares));
+        var compiled = compile(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS);
+        if (options.namespace) {
+            compiled = recursivelySetNamepace(compiled, options.namespace);
+        }
+        return serialize(compiled, middleware(middlewares));
     };
     stringifyRules.hash = plugins.length
         ? plugins
@@ -604,7 +638,10 @@ function createStylisInstance(_a) {
     return stringifyRules;
 }
 
-var StyleSheetContext = React.createContext(undefined);
+var StyleSheetContext = React.createContext({
+    shouldForwardProp: undefined,
+    styleSheet: undefined,
+});
 StyleSheetContext.Consumer;
 var StylisContext = React.createContext(undefined);
 StylisContext.Consumer;
@@ -658,8 +695,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 +713,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;
 }
@@ -732,21 +769,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)) {
@@ -757,27 +791,27 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
                 typeof result === 'object' &&
                 !Array.isArray(result) &&
                 !(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."));
+                !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."));
             }
             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 interleave(strings, interpolations) {
@@ -793,11 +827,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 = [];
@@ -814,7 +844,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)));
 }
@@ -995,7 +1025,6 @@ function withTheme(Component) {
         var theme = React.useContext(ThemeContext);
         var themeProp = determineTheme(props, theme, Component.defaultProps);
         if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {
-            // eslint-disable-next-line no-console
             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), "\""));
         }
         return React.createElement(Component, __assign({}, props, { theme: themeProp, ref: ref }));
@@ -1048,7 +1077,6 @@ function makeInlineStyleClass(styleSheet) {
                         declPairs_1.push([node.prop, node.value]);
                     }
                     else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
-                        /* eslint-disable no-console */
                         console.warn("Node of type ".concat(node.type, " not supported as an inline style"));
                     }
                 });
@@ -1101,7 +1129,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];
@@ -1121,20 +1148,15 @@ 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 */
         for (key in resolvedAttrDef) {
             // @ts-expect-error bad types
             context[key] = resolvedAttrs[key] = resolvedAttrDef[key];
         }
-        /* eslint-enable guard-for-in */
     });
     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,32 +1166,25 @@ 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
     for (var key in computedProps) {
         if (key[0] === '$' || key === 'as')
             continue;
         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);
@@ -1183,25 +1198,22 @@ var _StyledNativeComponent = (function (InlineStyle) {
         var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
             ? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
             : attrs;
-        // eslint-disable-next-line prefer-destructuring
         var shouldForwardProp = options.shouldForwardProp;
         if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {
             var shouldForwardPropFn_1 = styledComponentTarget.shouldForwardProp;
             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 {
-                // eslint-disable-next-line prefer-destructuring
                 shouldForwardProp = shouldForwardPropFn_1;
             }
         }
         var forwardRef = function (props, ref) {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             return useStyledComponentImpl(WrappedStyledComponent, props, ref);
         };
         forwardRef.displayName = displayName;
@@ -1218,10 +1230,6 @@ var _StyledNativeComponent = (function (InlineStyle) {
         WrappedStyledComponent.styledComponentId = true;
         // fold the underlying StyledComponent target up since we folded the styles
         WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
-        WrappedStyledComponent.withComponent = function withComponent(tag) {
-            var newOptions = __assign(__assign({}, options), { attrs: finalAttrs });
-            return createStyledNativeComponent(tag, newOptions, rules);
-        };
         Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
             get: function () {
                 return this._foldedDefaultProps;
@@ -1239,14 +1247,12 @@ var _StyledNativeComponent = (function (InlineStyle) {
             displayName: true,
             shouldForwardProp: true,
             target: true,
-            withComponent: true,
         });
         return WrappedStyledComponent;
     };
     return createStyledNativeComponent;
 });
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 var reactNative = require('react-native');
 var InlineStyle = makeInlineStyleClass(reactNative.StyleSheet);
 var StyledNativeComponent = _StyledNativeComponent(InlineStyle);
@@ -1297,5 +1303,5 @@ aliases.forEach(function (alias) {
     });
 });
 
-export { ThemeConsumer, ThemeContext, ThemeProvider, css, styled as default, isStyledComponent, useTheme, withTheme };
+export { ThemeConsumer, ThemeContext, ThemeProvider, css, styled as default, isStyledComponent, styled, useTheme, withTheme };
 //# sourceMappingURL=styled-components.native.esm.js.map