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

package/dist/base.d.ts

@@ -5,7 +5,7 @@ import keyframes from './constructors/keyframes';
 import withTheme from './hoc/withTheme';
 import useTheme from './hooks/useTheme';
 import ServerStyleSheet from './models/ServerStyleSheet';
-import StyleSheetManager, { StyleSheetConsumer, StyleSheetContext } from './models/StyleSheetManager';
+import { IStyleSheetContext, IStyleSheetManager, IStylisContext, StyleSheetConsumer, StyleSheetContext, StyleSheetManager } from './models/StyleSheetManager';
 import ThemeProvider, { ThemeConsumer, ThemeContext } from './models/ThemeProvider';
 import isStyledComponent from './utils/isStyledComponent';
 declare global {
@@ -15,4 +15,4 @@ declare global {
 }
 export * from './secretInternals';
 export { AttrsArg as Attrs, DefaultTheme, ShouldForwardProp } from './types';
-export { createGlobalStyle, css, isStyledComponent, keyframes, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, useTheme, SC_VERSION as version, withTheme, };
+export { createGlobalStyle, css, isStyledComponent, IStyleSheetManager, IStyleSheetContext, IStylisContext, keyframes, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, useTheme, SC_VERSION as version, withTheme, };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import styled from './constructors/styled';
 export * from './base';
 export { CSSProp, DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, PolymorphicComponent, PolymorphicComponentProps, Runtime, StyledObject, StyledOptions, WebTarget, } from './types';
-export { styled as default };
+export { styled, styled as default };

package/dist/models/StyleSheetManager.d.ts

@@ -1,21 +1,46 @@
 import React from 'react';
 import StyleSheet from '../sheet';
 import { Stringifier } from '../types';
-declare type Props = {
-    children?: React.ReactChild;
+export declare type IStyleSheetContext = StyleSheet | void;
+export declare const StyleSheetContext: React.Context<IStyleSheetContext>;
+export declare const StyleSheetConsumer: React.Consumer<IStyleSheetContext>;
+export declare type IStylisContext = Stringifier | void;
+export declare const StylisContext: React.Context<IStylisContext>;
+export declare const StylisConsumer: React.Consumer<IStylisContext>;
+export declare const mainSheet: StyleSheet;
+export declare const mainStylis: Stringifier;
+export declare function useStyleSheet(): StyleSheet;
+export declare function useStylis(): Stringifier;
+export declare type IStyleSheetManager = React.PropsWithChildren<{
+    /**
+     * If desired, you can pass this prop to disable "speedy" insertion mode, which
+     * uses the browser [CSSOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet).
+     * When disabled, rules are inserted as simple text into style blocks.
+     */
     disableCSSOMInjection?: boolean;
+    /**
+     * If you are working exclusively with modern browsers, vendor prefixes can often be omitted
+     * to reduce the weight of CSS on the page.
+     */
     disableVendorPrefixes?: boolean;
+    /**
+     * Provide an optional selector to be prepended to all generated style rules.
+     */
+    namespace?: string;
+    /**
+     * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.
+     */
     sheet?: StyleSheet;
+    /**
+     * An array of plugins to be run by stylis (style processor) during compilation.
+     * Check out [what's available on npm*](https://www.npmjs.com/search?q=keywords%3Astylis).
+     *
+     * \* The plugin(s) must be compatible with stylis v4 or above.
+     */
     stylisPlugins?: stylis.Middleware[];
+    /**
+     * Provide an alternate DOM node to host generated styles; useful for iframes.
+     */
     target?: HTMLElement;
-};
-export declare const StyleSheetContext: React.Context<void | StyleSheet>;
-export declare const StyleSheetConsumer: React.Consumer<void | StyleSheet>;
-export declare const StylisContext: React.Context<void | Stringifier>;
-export declare const StylisConsumer: React.Consumer<void | Stringifier>;
-export declare const mainSheet: StyleSheet;
-export declare const mainStylis: Stringifier;
-export declare function useStyleSheet(): StyleSheet;
-export declare function useStylis(): Stringifier;
-export default function StyleSheetManager(props: Props): JSX.Element;
-export {};
+}>;
+export declare function StyleSheetManager(props: IStyleSheetManager): JSX.Element;

package/dist/models/ThemeProvider.d.ts

@@ -27,7 +27,7 @@ export interface DefaultTheme {
 declare type ThemeFn = (outerTheme?: DefaultTheme) => DefaultTheme;
 declare type ThemeArgument = DefaultTheme | ThemeFn;
 declare type Props = {
-    children?: React.ReactChild;
+    children?: React.ReactNode;
     theme: ThemeArgument;
 };
 export declare const ThemeContext: React.Context<DefaultTheme | undefined>;

package/dist/native/index.d.ts

@@ -34,4 +34,4 @@ declare const styled: (<Target extends NativeTarget>(tag: Target) => Styled<"nat
 };
 export { DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, NativeTarget, PolymorphicComponent, PolymorphicComponentProps, Runtime, StyledObject, StyledOptions, } from '../types';
 export { css, isStyledComponent, ThemeProvider, ThemeConsumer, ThemeContext, withTheme, useTheme };
-export default styled;
+export { styled, styled as default };

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

@@ -18,7 +18,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'
@@ -1026,7 +1026,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 +1043,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
@@ -1089,10 +1098,10 @@ 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))
             setPlugins(props.stylisPlugins);
@@ -1504,13 +1513,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 +1539,6 @@ function createStyledComponent(target, options, rules) {
             shouldForwardProp: true,
             styledComponentId: true,
             target: true,
-            withComponent: true,
         });
     }
     return WrappedStyledComponent;
@@ -1837,6 +1838,7 @@ exports.css = css;
 exports["default"] = styled;
 exports.isStyledComponent = isStyledComponent;
 exports.keyframes = keyframes;
+exports.styled = styled;
 exports.useTheme = useTheme;
 exports.version = SC_VERSION;
 exports.withTheme = withTheme;