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

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

@@ -1,5 +1,5 @@
-import { __spreadArray, __assign, __rest } from 'tslib';
-import React, { useRef, useState, useContext, useMemo, useEffect, createElement, useDebugValue } from 'react';
+import { __spreadArray, __assign } from 'tslib';
+import React, { useRef, useState, useMemo, useEffect, useContext, useDebugValue, createElement } from 'react';
 import shallowequal from 'shallowequal';
 import { prefixer, stringify, middleware, compile, RULESET } from 'stylis';
 import unitless from '@emotion/unitless';
@@ -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.6";
+var SC_VERSION = "6.0.0-beta.8";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -1016,7 +1016,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 = '&'; }
@@ -1029,11 +1033,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(prefixer);
         }
         middlewares.push(selfReferenceReplacementPlugin, stringify);
-        return serialize(compile(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS), middleware(middlewares));
+        return serialize(compile(options.namespace || prefix || selector
+            ? "".concat(options.namespace ? options.namespace + ' ' : '').concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }")
+            : flatCSS), middleware(middlewares));
     };
     stringifyRules.hash = plugins.length
         ? plugins
@@ -1079,10 +1088,10 @@ function StyleSheetManager(props) {
     }, [props.disableCSSOMInjection, props.sheet, props.target]);
     var stylis = 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]);
     useEffect(function () {
         if (!shallowequal(plugins, props.stylisPlugins))
             setPlugins(props.stylisPlugins);
@@ -1494,13 +1503,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 = __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;
@@ -1527,7 +1529,6 @@ function createStyledComponent(target, options, rules) {
             shouldForwardProp: true,
             styledComponentId: true,
             target: true,
-            withComponent: true,
         });
     }
     return WrappedStyledComponent;
@@ -1814,5 +1815,5 @@ if (process.env.NODE_ENV !== 'production' &&
     window['__styled-components-init__'] += 1;
 }
 
-export { ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, __PRIVATE__, createGlobalStyle, css, styled as default, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme };
+export { ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, __PRIVATE__, createGlobalStyle, css, styled as default, isStyledComponent, keyframes, styled, useTheme, SC_VERSION as version, withTheme };
 //# sourceMappingURL=styled-components.browser.esm.js.map