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

package/dist/styled-components.cjs.js

@@ -8,17 +8,11 @@ var shallowequal = require('shallowequal');
 var stylis = require('stylis');
 var unitless = require('@emotion/unitless');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var shallowequal__default = /*#__PURE__*/_interopDefaultLegacy(shallowequal);
-var unitless__default = /*#__PURE__*/_interopDefaultLegacy(unitless);
-
 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.5";
+var SC_VERSION = "6.0.0-beta.7";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof undefined !== 'undefined' ;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -1026,7 +1020,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 = '&'; }
@@ -1039,11 +1037,16 @@ 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(stylis.prefixer);
         }
         middlewares.push(selfReferenceReplacementPlugin, stylis.stringify);
-        return serialize(stylis.compile(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS), stylis.middleware(middlewares));
+        return serialize(stylis.compile(options.namespace || prefix || selector
+            ? "".concat(options.namespace ? options.namespace + ' ' : '').concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }")
+            : flatCSS), stylis.middleware(middlewares));
     };
     stringifyRules.hash = plugins.length
         ? plugins
@@ -1058,9 +1061,9 @@ function createStylisInstance(_a) {
     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);
 StylisContext.Consumer;
 var mainSheet = new StyleSheet();
 var mainStylis = createStylisInstance();
@@ -1089,17 +1092,17 @@ function StyleSheetManager(props) {
     }, [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__default["default"](plugins, props.stylisPlugins))
+        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 }, process.env.NODE_ENV !== 'production'
-            ? React__default["default"].Children.only(props.children)
+    return (React.createElement(StyleSheetContext.Provider, { value: styleSheet },
+        React.createElement(StylisContext.Provider, { value: stylis }, process.env.NODE_ENV !== 'production'
+            ? React.Children.only(props.children)
             : props.children)));
 }
 
@@ -1133,7 +1136,7 @@ function addUnitIfNeeded(name, value) {
     if (value == null || typeof value === 'boolean' || value === '') {
         return '';
     }
-    if (typeof value === 'number' && value !== 0 && !(name in unitless__default["default"])) {
+    if (typeof value === 'number' && value !== 0 && !(name in unitless)) {
         return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
     }
     return String(value).trim();
@@ -1340,7 +1343,7 @@ var ComponentStyle = /** @class */ (function () {
     return ComponentStyle;
 }());
 
-var ThemeContext = React__default["default"].createContext(undefined);
+var ThemeContext = React.createContext(undefined);
 var ThemeConsumer = ThemeContext.Consumer;
 function mergeTheme(theme, outerTheme) {
     if (!theme) {
@@ -1369,7 +1372,7 @@ function ThemeProvider(props) {
     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 identifiers = {};
@@ -1491,7 +1494,7 @@ function createStyledComponent(target, options, rules) {
      * 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;
@@ -1504,13 +1507,6 @@ function createStyledComponent(target, options, rules) {
     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 = tslib.__rest(options, ["componentId"]);
-        var newComponentId = previousComponentId &&
-            "".concat(previousComponentId, "-").concat(isTag(tag) ? tag : escape(getComponentName(tag)));
-        var newOptions = tslib.__assign(tslib.__assign({}, optionsToCopy), { attrs: finalAttrs, componentId: newComponentId });
-        return createStyledComponent(tag, newOptions, rules);
-    };
     Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
         get: function () {
             return this._foldedDefaultProps;
@@ -1537,7 +1533,6 @@ function createStyledComponent(target, options, rules) {
             shouldForwardProp: true,
             styledComponentId: true,
             target: true,
-            withComponent: true,
         });
     }
     return WrappedStyledComponent;
@@ -1660,10 +1655,10 @@ function createGlobalStyle(strings) {
     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 (process.env.NODE_ENV !== 'production' && React__default["default"].Children.count(props.children)) {
+        if (process.env.NODE_ENV !== 'production' && 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."));
         }
@@ -1686,7 +1681,7 @@ function createGlobalStyle(strings) {
             globalStyle.renderStyles(instance, context, styleSheet, stylis);
         }
     }
-    return React__default["default"].memo(GlobalStyleComponent);
+    return React.memo(GlobalStyleComponent);
 }
 
 function keyframes(strings) {
@@ -1707,14 +1702,14 @@ function keyframes(strings) {
 }
 
 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 (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__default["default"].createElement(Component, tslib.__assign({}, props, { theme: themeProp, ref: ref }));
+        return React.createElement(Component, tslib.__assign({}, props, { theme: themeProp, ref: ref }));
     });
     WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
     return hoistNonReactStatics(WithTheme, Component);
@@ -1760,7 +1755,7 @@ var ServerStyleSheet = /** @class */ (function () {
                 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", tslib.__assign({}, props, { key: "sc-0-0" }))];
+            return [React.createElement("style", tslib.__assign({}, props, { key: "sc-0-0" }))];
         };
         this.seal = function () {
             _this.sealed = true;
@@ -1772,7 +1767,7 @@ var ServerStyleSheet = /** @class */ (function () {
         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
@@ -1854,9 +1849,10 @@ exports.ThemeProvider = ThemeProvider;
 exports.__PRIVATE__ = __PRIVATE__;
 exports.createGlobalStyle = createGlobalStyle;
 exports.css = css;
-exports["default"] = styled;
+exports.default = styled;
 exports.isStyledComponent = isStyledComponent;
 exports.keyframes = keyframes;
+exports.styled = styled;
 exports.useTheme = useTheme;
 exports.version = SC_VERSION;
 exports.withTheme = withTheme;