styled-components 6.0.0-rc.3 → 6.0.0-rc.5

package/dist/styled-components.js

@@ -4,13 +4,11 @@
     (global = global || self, global.styled = factory(global.React));
 })(this, (function (React) { 'use strict';
 
-    var SC_ATTR = (typeof process !== 'undefined' &&
-        typeof process.env !== '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-rc.3";
+    var SC_VERSION = "6.0.0-rc.5";
     var SPLITTER = '/*!sc*/\n';
     var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
     var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -72,6 +70,26 @@
     var EMPTY_ARRAY = Object.freeze([]);
     var EMPTY_OBJECT = Object.freeze({});
 
+    /**
+     * If the Object prototype is frozen, the "toString" property is non-writable. This means that any objects which inherit this property
+     * cannot have the property changed using a "=" assignment operator. If using strict mode, attempting that will cause an error. If not using
+     * strict mode, attempting that will be silently ignored.
+     *
+     * If the Object prototype is frozen, inherited non-writable properties can still be shadowed using one of two mechanisms:
+     *
+     *  1. ES6 class methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#methods
+     *  2. Using the `Object.defineProperty()` static method:
+     *     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+     *
+     * However, this project uses Babel to transpile ES6 classes, and transforms ES6 class methods to use the assignment operator instead:
+     * https://babeljs.io/docs/babel-plugin-transform-class-properties#options
+     *
+     * Therefore, the most compatible way to shadow the prototype's "toString" property is to define a new "toString" property on this object.
+     */
+    function setToString(object, toStringFn) {
+        Object.defineProperty(object, 'toString', { value: toStringFn });
+    }
+
     var errorMap = {
         '1': 'Cannot create styled-component for component: %s.\n\n',
         '2': "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",
@@ -90,6 +108,7 @@
         '15': "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",
         '16': "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",
         '17': "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",
+        '18': 'ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`',
     };
 
     var ERRORS = errorMap ;
@@ -473,6 +492,7 @@
         function StyleSheet(options, globalStyles, names) {
             if (options === void 0) { options = EMPTY_OBJECT; }
             if (globalStyles === void 0) { globalStyles = {}; }
+            var _this = this;
             this.options = __assign(__assign({}, defaultOptions), options);
             this.gs = globalStyles;
             this.names = new Map(names);
@@ -482,6 +502,7 @@
                 SHOULD_REHYDRATE = false;
                 rehydrateSheet(this);
             }
+            setToString(this, function () { return outputSheet(_this); });
         }
         /** Register a group ID to give it an index */
         StyleSheet.registerId = function (id) {
@@ -536,10 +557,6 @@
             // so that we can continuously output only new rules
             this.tag = undefined;
         };
-        /** Outputs the current sheet as a CSS string with markers for SSR */
-        StyleSheet.prototype.toString = function () {
-            return outputSheet(this);
-        };
         return StyleSheet;
     }());
 
@@ -770,12 +787,12 @@
                     styleSheet.insertRules(_this.id, resolvedName, stylisInstance(_this.rules, resolvedName, '@keyframes'));
                 }
             };
-            this.toString = function () {
-                throw throwStyledComponentsError(12, String(_this.name));
-            };
             this.name = name;
             this.id = "sc-keyframes-".concat(name);
             this.rules = rules;
+            setToString(this, function () {
+                throw throwStyledComponentsError(12, String(_this.name));
+            });
         }
         Keyframes.prototype.getName = function (stylisInstance) {
             if (stylisInstance === void 0) { stylisInstance = mainStylis; }
@@ -1053,14 +1070,25 @@
         }
         return outerTheme ? __assign(__assign({}, outerTheme), theme) : theme;
     }
+    /**
+     * Returns the current theme (as provided by the closest ancestor `ThemeProvider`.)
+     *
+     * If no `ThemeProvider` is found, the function will error. If you need access to the theme in an
+     * uncertain composition scenario, `React.useContext(ThemeContext)` will not emit an error if there
+     * is no `ThemeProvider` ancestor.
+     */
     function useTheme() {
-        return React.useContext(ThemeContext);
+        var theme = React.useContext(ThemeContext);
+        if (!theme) {
+            throw throwStyledComponentsError(18);
+        }
+        return theme;
     }
     /**
      * Provide a theme to an entire react component tree via context
      */
     function ThemeProvider(props) {
-        var outerTheme = useTheme();
+        var outerTheme = React.useContext(ThemeContext);
         var themeContext = React.useMemo(function () { return mergeTheme(props.theme, outerTheme); }, [props.theme, outerTheme]);
         if (!props.children) {
             return null;
@@ -1192,7 +1220,7 @@
         }
         var GlobalStyleComponent = function (props) {
             var ssc = useStyleSheetContext();
-            var theme = useTheme();
+            var theme = React.useContext(ThemeContext);
             var instanceRef = React.useRef(ssc.styleSheet.allocateGSInstance(styledComponentId));
             var instance = instanceRef.current;
             if (React.Children.count(props.children)) {
@@ -1349,7 +1377,7 @@
 
     function withTheme(Component) {
         var WithTheme = React.forwardRef(function (props, ref) {
-            var theme = useTheme();
+            var theme = React.useContext(ThemeContext);
             var themeProp = determineTheme(props, theme, Component.defaultProps);
             if (themeProp === undefined) {
                 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), "\""));
@@ -1463,6 +1491,26 @@
         withTheme: withTheme
     });
 
+    function memoize(fn) {
+      var cache = Object.create(null);
+      return function (arg) {
+        if (cache[arg] === undefined) cache[arg] = fn(arg);
+        return cache[arg];
+      };
+    }
+
+    var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+
+    var isPropValid = /* #__PURE__ */memoize(function (prop) {
+      return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
+      /* o */
+      && prop.charCodeAt(1) === 110
+      /* n */
+      && prop.charCodeAt(2) < 91;
+    }
+    /* Z+1 */
+    );
+
     var LIMIT = 200;
     var createWarnTooManyClasses = (function (displayName, componentId) {
         var generatedClasses = {};
@@ -1780,7 +1828,6 @@
             attrDef = attrs[i];
             var resolvedAttrDef = isFunction(attrDef) ? attrDef(context) : attrDef;
             for (var key in resolvedAttrDef) {
-                // @ts-expect-error bad types
                 context[key] =
                     key === 'className'
                         ? joinStrings(context[key], resolvedAttrDef[key])
@@ -1793,9 +1840,10 @@
         }
         return context;
     }
+    var seenUnknownProps = new Set();
     function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStatic) {
         var componentAttrs = forwardedComponent.attrs, componentStyle = forwardedComponent.componentStyle, defaultProps = forwardedComponent.defaultProps, foldedComponentIds = forwardedComponent.foldedComponentIds, styledComponentId = forwardedComponent.styledComponentId, target = forwardedComponent.target;
-        var contextTheme = useTheme();
+        var contextTheme = React.useContext(ThemeContext);
         var ssc = useStyleSheetContext();
         var shouldForwardProp = forwardedComponent.shouldForwardProp || ssc.shouldForwardProp;
         React.useDebugValue(styledComponentId);
@@ -1814,6 +1862,11 @@
             }
             else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
                 propsForElement[key] = context[key];
+                if (!isPropValid(key) &&
+                    !seenUnknownProps.has(key)) {
+                    seenUnknownProps.add(key);
+                    console.warn("styled-components: it looks like an unknown prop \"".concat(key, "\" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)"));
+                }
             }
         }
         var generatedClassName = useInjectedStyle(componentStyle, isStatic, context);
@@ -1837,12 +1890,10 @@
         return React.createElement(elementToBeCreated, propsForElement);
     }
     function createStyledComponent(target, options, rules) {
-        var _a;
         var isTargetStyledComp = isStyledComponent(target);
         var styledComponentTarget = target;
         var isCompositeComponent = !isTag(target);
-        var _b = options.componentId, componentId = _b === void 0 ? generateId(options.displayName, options.parentComponentId) : _b, _c = options.displayName, displayName = _c === void 0 ? generateDisplayName(target) : _c;
-        var attrs = ((_a = options.attrs) !== null && _a !== void 0 ? _a : []);
+        var _a = options.attrs, attrs = _a === void 0 ? EMPTY_ARRAY : _a, _b = options.componentId, componentId = _b === void 0 ? generateId(options.displayName, options.parentComponentId) : _b, _c = options.displayName, displayName = _c === void 0 ? generateDisplayName(target) : _c;
         var styledComponentId = options.displayName && options.componentId
             ? "".concat(escape(options.displayName), "-").concat(options.componentId)
             : options.componentId || componentId;
@@ -1904,13 +1955,7 @@
             checkDynamicCreation(displayName, styledComponentId);
             WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName, styledComponentId);
         }
-        // If the Object prototype is frozen, the "toString" property is non-writable. This means that any objects which inherit this property
-        // cannot have the property changed using an assignment. If using strict mode, attempting that will cause an error. If not using strict
-        // mode, attempting that will be silently ignored.
-        // However, we can still explicitly shadow the prototype's "toString" property by defining a new "toString" property on this object.
-        Object.defineProperty(WrappedStyledComponent, 'toString', {
-            value: function () { return ".".concat(WrappedStyledComponent.styledComponentId); },
-        });
+        setToString(WrappedStyledComponent, function () { return ".".concat(WrappedStyledComponent.styledComponentId); });
         if (isCompositeComponent) {
             var compositeComponentTarget = target;
             hoistNonReactStatics(WrappedStyledComponent, compositeComponentTarget, {
@@ -1929,10 +1974,13 @@
 
     function constructWithOptions(componentConstructor, tag, options) {
         if (options === void 0) { options = EMPTY_OBJECT; }
-        // We trust that the tag is a valid component as long as it isn't falsish
-        // Typically the tag here is a string or function (i.e. class or pure function component)
-        // However a component may also be an object if it uses another utility, e.g. React.memo
-        // React will output an appropriate warning however if the `tag` isn't valid
+        /**
+         * We trust that the tag is a valid component as long as it isn't
+         * falsish. Typically the tag here is a string or function (i.e.
+         * class or pure function component), however a component may also be
+         * an object if it uses another utility, e.g. React.memo. React will
+         * output an appropriate warning however if the `tag` isn't valid.
+         */
         if (!tag) {
             throw throwStyledComponentsError(1, tag);
         }
@@ -1944,25 +1992,32 @@
             }
             return componentConstructor(tag, options, css.apply(void 0, __spreadArray([initialStyles], interpolations, false)));
         };
-        /* Modify/inject new props at runtime */
+        /**
+         * Attrs allows for accomplishing two goals:
+         *
+         * 1. Backfilling props at runtime more expressively than defaultProps
+         * 2. Amending the prop interface of a wrapped styled component
+         */
         templateFunction.attrs = function (attrs) {
             return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), { attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean) }));
         };
         /**
-         * If config methods are called, wrap up a new template function and merge options */
+         * If config methods are called, wrap up a new template function
+         * and merge options.
+         */
         templateFunction.withConfig = function (config) {
             return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), config));
         };
         return templateFunction;
     }
 
-    function createStyle(tag) {
+    var baseStyled = function (tag) {
         return constructWithOptions(createStyledComponent, tag);
-    }
-    var styled = createStyle;
+    };
+    var styled = baseStyled;
+    // Shorthands for all valid HTML Elements
     domElements.forEach(function (domElement) {
-        // Using any because TS blows CPU up here for some reason
-        styled[domElement] = createStyle(domElement);
+        styled[domElement] = baseStyled(domElement);
     });
 
     /**