styled-components 6.0.0-beta.6 → 6.0.0-beta.7

package/dist/styled-components.js

@@ -4,15 +4,11 @@
     (global = global || self, global.styled = factory(global.React));
 })(this, (function (React) { 'use strict';
 
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
     var SC_ATTR = (typeof process !== '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.6";
+    var SC_VERSION = "6.0.0-beta.7";
     var SPLITTER = '/*!sc*/\n';
     var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
     var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -59,18 +55,6 @@
         return __assign.apply(this, arguments);
     };
 
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
     function __spreadArray(to, from, pack) {
         if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
             if (ar || !(i in from)) {
@@ -670,7 +654,11 @@
                 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 = '&'; }
@@ -683,11 +671,16 @@
             _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(pe);
             }
             middlewares.push(selfReferenceReplacementPlugin, oe);
-            return serialize(ne(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS), le(middlewares));
+            return serialize(ne(options.namespace || prefix || selector
+                ? "".concat(options.namespace ? options.namespace + ' ' : '').concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }")
+                : flatCSS), le(middlewares));
         };
         stringifyRules.hash = plugins.length
             ? plugins
@@ -702,9 +695,9 @@
         return stringifyRules;
     }
 
-    var StyleSheetContext = React__default["default"].createContext(undefined);
+    var StyleSheetContext = React.createContext(undefined);
     var StyleSheetConsumer = StyleSheetContext.Consumer;
-    var StylisContext = React__default["default"].createContext(undefined);
+    var StylisContext = React.createContext(undefined);
     var mainSheet = new StyleSheet();
     var mainStylis = createStylisInstance();
     function useStyleSheet() {
@@ -732,16 +725,16 @@
         }, [props.disableCSSOMInjection, props.sheet, props.target]);
         var stylis = React.useMemo(function () {
             return createStylisInstance({
-                options: { prefix: !props.disableVendorPrefixes },
+                options: { namespace: props.namespace, prefix: !props.disableVendorPrefixes },
                 plugins: plugins,
             });
-        }, [props.disableVendorPrefixes, plugins]);
+        }, [props.disableVendorPrefixes, props.namespace, plugins]);
         React.useEffect(function () {
             if (!shallowequal(plugins, props.stylisPlugins))
                 setPlugins(props.stylisPlugins);
         }, [props.stylisPlugins]);
-        return (React__default["default"].createElement(StyleSheetContext.Provider, { value: styleSheet },
-            React__default["default"].createElement(StylisContext.Provider, { value: stylis }, React__default["default"].Children.only(props.children)
+        return (React.createElement(StyleSheetContext.Provider, { value: styleSheet },
+            React.createElement(StylisContext.Provider, { value: stylis }, React.Children.only(props.children)
                 )));
     }
 
@@ -769,77 +762,6 @@
         return Keyframes;
     }());
 
-    function unwrapExports (x) {
-    	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-    }
-
-    function createCommonjsModule(fn, module) {
-    	return module = { exports: {} }, fn(module, module.exports), module.exports;
-    }
-
-    var unitless_cjs_prod = createCommonjsModule(function (module, exports) {
-
-    Object.defineProperty(exports, "__esModule", {
-      value: !0
-    });
-
-    var unitlessKeys = {
-      animationIterationCount: 1,
-      borderImageOutset: 1,
-      borderImageSlice: 1,
-      borderImageWidth: 1,
-      boxFlex: 1,
-      boxFlexGroup: 1,
-      boxOrdinalGroup: 1,
-      columnCount: 1,
-      columns: 1,
-      flex: 1,
-      flexGrow: 1,
-      flexPositive: 1,
-      flexShrink: 1,
-      flexNegative: 1,
-      flexOrder: 1,
-      gridRow: 1,
-      gridRowEnd: 1,
-      gridRowSpan: 1,
-      gridRowStart: 1,
-      gridColumn: 1,
-      gridColumnEnd: 1,
-      gridColumnSpan: 1,
-      gridColumnStart: 1,
-      msGridRow: 1,
-      msGridRowSpan: 1,
-      msGridColumn: 1,
-      msGridColumnSpan: 1,
-      fontWeight: 1,
-      lineHeight: 1,
-      opacity: 1,
-      order: 1,
-      orphans: 1,
-      tabSize: 1,
-      widows: 1,
-      zIndex: 1,
-      zoom: 1,
-      WebkitLineClamp: 1,
-      fillOpacity: 1,
-      floodOpacity: 1,
-      stopOpacity: 1,
-      strokeDasharray: 1,
-      strokeDashoffset: 1,
-      strokeMiterlimit: 1,
-      strokeOpacity: 1,
-      strokeWidth: 1
-    };
-
-    exports.default = unitlessKeys;
-    });
-
-    unwrapExports(unitless_cjs_prod);
-
-    var unitless_cjs_dev = createCommonjsModule(function (module, exports) {
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
     var unitlessKeys = {
       animationIterationCount: 1,
       borderImageOutset: 1,
@@ -889,25 +811,13 @@
       strokeWidth: 1
     };
 
-    exports.default = unitlessKeys;
-    });
-
-    unwrapExports(unitless_cjs_dev);
-
-    var unitless_cjs = createCommonjsModule(function (module) {
-
-    {
-      module.exports = unitless_cjs_dev;
-    }
-    });
-
     // Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js
     function addUnitIfNeeded(name, value) {
         // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133
         if (value == null || typeof value === 'boolean' || value === '') {
             return '';
         }
-        if (typeof value === 'number' && value !== 0 && !(name in unitless_cjs)) {
+        if (typeof value === 'number' && value !== 0 && !(name in unitlessKeys)) {
             return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
         }
         return String(value).trim();
@@ -1083,7 +993,7 @@
         return GlobalStyle;
     }());
 
-    var ThemeContext = React__default["default"].createContext(undefined);
+    var ThemeContext = React.createContext(undefined);
     var ThemeConsumer = ThemeContext.Consumer;
     function mergeTheme(theme, outerTheme) {
         if (!theme) {
@@ -1111,7 +1021,7 @@
         if (!props.children) {
             return null;
         }
-        return React__default["default"].createElement(ThemeContext.Provider, { value: themeContext }, props.children);
+        return React.createElement(ThemeContext.Provider, { value: themeContext }, props.children);
     }
 
     var invalidHookCallRe = /invalid hook call/i;
@@ -1243,10 +1153,10 @@
         var GlobalStyleComponent = function (props) {
             var styleSheet = useStyleSheet();
             var stylis = useStylis();
-            var theme = React__default["default"].useContext(ThemeContext);
-            var instanceRef = React__default["default"].useRef(styleSheet.allocateGSInstance(styledComponentId));
+            var theme = React.useContext(ThemeContext);
+            var instanceRef = React.useRef(styleSheet.allocateGSInstance(styledComponentId));
             var instance = instanceRef.current;
-            if (React__default["default"].Children.count(props.children)) {
+            if (React.Children.count(props.children)) {
                 // eslint-disable-next-line no-console
                 console.warn("The global style component ".concat(styledComponentId, " was given child JSX. createGlobalStyle does not render children."));
             }
@@ -1260,7 +1170,7 @@
             {
                 // eslint-disable-next-line react-hooks/rules-of-hooks
                 // @ts-expect-error still using React 17 types for the time being
-                (React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect)(function () {
+                (React.useInsertionEffect || React.useLayoutEffect)(function () {
                     if (!styleSheet.server) {
                         renderStyles(instance, props, styleSheet, theme, stylis);
                         return function () { return globalStyle.removeStyles(instance, styleSheet); };
@@ -1278,7 +1188,7 @@
                 globalStyle.renderStyles(instance, context, styleSheet, stylis);
             }
         }
-        return React__default["default"].memo(GlobalStyleComponent);
+        return React.memo(GlobalStyleComponent);
     }
 
     function keyframes(strings) {
@@ -1403,14 +1313,14 @@
     }
 
     function withTheme(Component) {
-        var WithTheme = React__default["default"].forwardRef(function (props, ref) {
-            var theme = React__default["default"].useContext(ThemeContext);
+        var WithTheme = React.forwardRef(function (props, ref) {
+            var theme = React.useContext(ThemeContext);
             var themeProp = determineTheme(props, theme, Component.defaultProps);
             if (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__default["default"].createElement(Component, __assign({}, props, { theme: themeProp, ref: ref }));
+            return React.createElement(Component, __assign({}, props, { theme: themeProp, ref: ref }));
         });
         WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
         return hoistNonReactStatics(WithTheme, Component);
@@ -1455,7 +1365,7 @@
                     props.nonce = nonce;
                 }
                 // v4 returned an array for this fn, so we'll do the same for v5 for backward compat
-                return [React__default["default"].createElement("style", __assign({}, props, { key: "sc-0-0" }))];
+                return [React.createElement("style", __assign({}, props, { key: "sc-0-0" }))];
             };
             this.seal = function () {
                 _this.sealed = true;
@@ -1467,7 +1377,7 @@
             if (this.sealed) {
                 throw throwStyledComponentsError(2);
             }
-            return React__default["default"].createElement(StyleSheetManager, { sheet: this.instance }, children);
+            return React.createElement(StyleSheetManager, { sheet: this.instance }, children);
         };
         // eslint-disable-next-line consistent-return
         // @ts-expect-error alternate return types are not possible due to code transformation
@@ -1957,7 +1867,7 @@
          * forwardRef creates a new interim component, which we'll take advantage of
          * instead of extending ParentComponent to create _another_ interim class
          */
-        var WrappedStyledComponent = React__default["default"].forwardRef(forwardRef);
+        var WrappedStyledComponent = React.forwardRef(forwardRef);
         WrappedStyledComponent.attrs = finalAttrs;
         WrappedStyledComponent.componentStyle = componentStyle;
         WrappedStyledComponent.displayName = displayName;
@@ -1970,13 +1880,6 @@
         WrappedStyledComponent.styledComponentId = styledComponentId;
         // fold the underlying StyledComponent target up since we folded the styles
         WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
-        WrappedStyledComponent.withComponent = function withComponent(tag) {
-            var previousComponentId = options.componentId, optionsToCopy = __rest(options, ["componentId"]);
-            var newComponentId = previousComponentId &&
-                "".concat(previousComponentId, "-").concat(isTag(tag) ? tag : escape(getComponentName(tag)));
-            var newOptions = __assign(__assign({}, optionsToCopy), { attrs: finalAttrs, componentId: newComponentId });
-            return createStyledComponent(tag, newOptions, rules);
-        };
         Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
             get: function () {
                 return this._foldedDefaultProps;
@@ -2003,7 +1906,6 @@
                 shouldForwardProp: true,
                 styledComponentId: true,
                 target: true,
-                withComponent: true,
             });
         }
         return WrappedStyledComponent;