@emotion/styled-base - npm Package Compare versions

Comparing version 10.0.31 to 10.3.0

CHANGELOG.md

 # @emotion/styled-base
 
+## 10.3.0
+
+### Minor Changes
+
+- [#2566](https://github.com/emotion-js/emotion/pull/2566) [`122e9f11`](https://github.com/emotion-js/emotion/commit/122e9f11bf3aec2100dd55cee00b74170abe1ec9) Thanks [@eps1lon](https://github.com/eps1lon), [@Andarist](https://github.com/Andarist)! - Fixed hydration mismatches if `React.useId` (an upcoming API in React 18) is used within a tree below our components.
+
+* [#2560](https://github.com/emotion-js/emotion/pull/2560) [`b5a26619`](https://github.com/emotion-js/emotion/commit/b5a26619b158703e9bc653f6297b33350c9e7b40) Thanks [@eps1lon](https://github.com/eps1lon)! - Dropped usage of a deprecated `SFC` React type in favor of `FC`. The `FC` type has been introduced in `@types/react@16.7.2` so this version of this package is now a minimum requirement for TypeScript users.
+
 ## 10.0.31
@@ -4,0 +12,0 @@

dist/styled-base.browser.cjs.js

@@ -5,7 +5,5 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
+var isPropValid = require('@emotion/is-prop-valid');
 var core = require('@emotion/core');
@@ -15,4 +13,9 @@ var utils = require('@emotion/utils');
 
-var testOmitPropsOnStringTag = isPropValid;
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var isPropValid__default = /*#__PURE__*/_interopDefault(isPropValid);
+
+var testOmitPropsOnStringTag = isPropValid__default['default'];
+
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
@@ -31,5 +34,9 @@ return key !== 'theme' && key !== 'innerRef';
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
 
+var Noop = function Noop() {
+  return null;
+};
+
 var createStyled = function createStyled(tag, options) {
@@ -94,3 +101,3 @@ if (process.env.NODE_ENV !== 'production') {
     var Styled = core.withEmotionCache(function (props, context, ref) {
-      return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/React.createElement(core.ThemeContext.Consumer, null, function (theme) {
         var finalTag = shouldUseAs && props.as || baseTag;
@@ -144,5 +151,7 @@ var className = '';
 
-        var ele = React.createElement(finalTag, newProps);
+        var ele = /*#__PURE__*/React.createElement(finalTag, newProps);
+        var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop, null);
 
-        return ele;
+
+        return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
       });
@@ -149,0 +158,0 @@ });

dist/styled-base.browser.esm.js

@@ -1,3 +0,3 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { createElement } from 'react';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { createElement, Fragment } from 'react';
 import isPropValid from '@emotion/is-prop-valid';
@@ -23,5 +23,9 @@ import { withEmotionCache, ThemeContext } from '@emotion/core';
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
 
+var Noop = function Noop() {
+  return null;
+};
+
 var createStyled = function createStyled(tag, options) {
@@ -86,3 +90,3 @@ if (process.env.NODE_ENV !== 'production') {
     var Styled = withEmotionCache(function (props, context, ref) {
-      return createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/createElement(ThemeContext.Consumer, null, function (theme) {
         var finalTag = shouldUseAs && props.as || baseTag;
@@ -136,5 +140,7 @@ var className = '';
 
-        var ele = createElement(finalTag, newProps);
+        var ele = /*#__PURE__*/createElement(finalTag, newProps);
+        var possiblyStyleElement = /*#__PURE__*/createElement(Noop, null);
 
-        return ele;
+
+        return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele);
       });
@@ -141,0 +147,0 @@ });

dist/styled-base.cjs.dev.js

@@ -5,7 +5,5 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
+var isPropValid = require('@emotion/is-prop-valid');
 var core = require('@emotion/core');
@@ -15,4 +13,9 @@ var utils = require('@emotion/utils');
 
-var testOmitPropsOnStringTag = isPropValid;
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var isPropValid__default = /*#__PURE__*/_interopDefault(isPropValid);
+
+var testOmitPropsOnStringTag = isPropValid__default['default'];
+
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
@@ -31,6 +34,10 @@ return key !== 'theme' && key !== 'innerRef';
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
 var isBrowser = typeof document !== 'undefined';
 
+var Noop = function Noop() {
+  return null;
+};
+
 var createStyled = function createStyled(tag, options) {
@@ -95,3 +102,3 @@ if (process.env.NODE_ENV !== 'production') {
     var Styled = core.withEmotionCache(function (props, context, ref) {
-      return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/React.createElement(core.ThemeContext.Consumer, null, function (theme) {
         var finalTag = shouldUseAs && props.as || baseTag;
@@ -145,3 +152,4 @@ var className = '';
 
-        var ele = React.createElement(finalTag, newProps);
+        var ele = /*#__PURE__*/React.createElement(finalTag, newProps);
+        var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop, null);
 
@@ -159,8 +167,9 @@ if (!isBrowser && rules !== undefined) {
 
-          return React.createElement(React.Fragment, null, React.createElement("style", (_ref = {}, _ref["data-emotion-" + context.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
+          possiblyStyleElement = /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion-" + context.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
             __html: rules
-          }, _ref.nonce = context.sheet.nonce, _ref)), ele);
-        }
+          }, _ref.nonce = context.sheet.nonce, _ref));
+        } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
 
-        return ele;
+
+        return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
       });
@@ -167,0 +176,0 @@ });

dist/styled-base.cjs.prod.js

 "use strict";
 
-function _interopDefault(ex) {
-  return ex && "object" == typeof ex && "default" in ex ? ex.default : ex;
-}
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,3 +7,11 @@ value: !0
 
-var _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), React = require("react"), isPropValid = _interopDefault(require("@emotion/is-prop-valid")), core = require("@emotion/core"), utils = require("@emotion/utils"), serialize = require("@emotion/serialize"), testOmitPropsOnStringTag = isPropValid, testOmitPropsOnComponent = function(key) {
+var _defineProperty = require("@babel/runtime/helpers/defineProperty"), React = require("react"), isPropValid = require("@emotion/is-prop-valid"), core = require("@emotion/core"), utils = require("@emotion/utils"), serialize = require("@emotion/serialize");
+
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+
+var _defineProperty__default = _interopDefault(_defineProperty), isPropValid__default = _interopDefault(isPropValid), testOmitPropsOnStringTag = isPropValid__default.default, testOmitPropsOnComponent = function(key) {
   return "theme" !== key && "innerRef" !== key;
@@ -22,5 +26,5 @@ }, getDefaultShouldForwardProp = function(tag) {
     var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
+    enumerableOnly && (symbols = symbols.filter((function(sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    }))), keys.push.apply(keys, symbols);
   }
@@ -33,7 +37,7 @@ return keys;
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(source, !0).forEach(function(key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(source).forEach(function(key) {
+    i % 2 ? ownKeys(Object(source), !0).forEach((function(key) {
+      _defineProperty__default.default(target, key, source[key]);
+    })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach((function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
+    }));
   }
@@ -43,3 +47,5 @@ return target;
 
-var isBrowser = "undefined" != typeof document, createStyled = function createStyled(tag, options) {
+var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences", isBrowser = "undefined" != typeof document, Noop = function() {
+  return null;
+}, createStyled = function createStyled(tag, options) {
   var identifierName, shouldForwardProp, targetClassName;
@@ -56,7 +62,7 @@ void 0 !== options && (identifierName = options.label, targetClassName = options.target,
     if (void 0 !== identifierName && styles.push("label:" + identifierName + ";"), null == args[0] || void 0 === args[0].raw) styles.push.apply(styles, args); else {
-      styles.push(args[0][0]);
+      0, styles.push(args[0][0]);
       for (var len = args.length, i = 1; i < len; i++) styles.push(args[i], args[0][i]);
     }
-    var Styled = core.withEmotionCache(function(props, context, ref) {
-      return React.createElement(core.ThemeContext.Consumer, null, function(theme) {
+    var Styled = core.withEmotionCache((function(props, context, ref) {
+      return React.createElement(core.ThemeContext.Consumer, null, (function(theme) {
         var finalTag = shouldUseAs && props.as || baseTag, className = "", classInterpolations = [], mergedProps = props;
@@ -73,14 +79,14 @@ if (null == props.theme) {
         newProps.className = className, newProps.ref = ref || props.innerRef;
-        var ele = React.createElement(finalTag, newProps);
+        var ele = React.createElement(finalTag, newProps), possiblyStyleElement = React.createElement(Noop, null);
         if (!isBrowser && void 0 !== rules) {
           for (var _ref, serializedNames = serialized.name, next = serialized.next; void 0 !== next; ) serializedNames += " " + next.name, 
           next = next.next;
-          return React.createElement(React.Fragment, null, React.createElement("style", ((_ref = {})["data-emotion-" + context.key] = serializedNames, 
+          possiblyStyleElement = React.createElement("style", ((_ref = {})["data-emotion-" + context.key] = serializedNames, 
           _ref.dangerouslySetInnerHTML = {
             __html: rules
-          }, _ref.nonce = context.sheet.nonce, _ref)), ele);
+          }, _ref.nonce = context.sheet.nonce, _ref));
         }
-        return ele;
-      });
-    });
+        return React.createElement(React.Fragment, null, possiblyStyleElement, ele);
+      }));
+    }));
     return Styled.displayName = void 0 !== identifierName ? identifierName : "Styled(" + ("string" == typeof baseTag ? baseTag : baseTag.displayName || baseTag.name || "Component") + ")", 
@@ -87,0 +93,0 @@ Styled.defaultProps = tag.defaultProps, Styled.__emotion_real = Styled, Styled.__emotion_base = baseTag,

dist/styled-base.esm.js

@@ -1,2 +0,2 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { createElement, Fragment } from 'react';
@@ -23,6 +23,10 @@ import isPropValid from '@emotion/is-prop-valid';
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
 var isBrowser = typeof document !== 'undefined';
 
+var Noop = function Noop() {
+  return null;
+};
+
 var createStyled = function createStyled(tag, options) {
@@ -87,3 +91,3 @@ if (process.env.NODE_ENV !== 'production') {
     var Styled = withEmotionCache(function (props, context, ref) {
-      return createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/createElement(ThemeContext.Consumer, null, function (theme) {
         var finalTag = shouldUseAs && props.as || baseTag;
@@ -137,3 +141,4 @@ var className = '';
 
-        var ele = createElement(finalTag, newProps);
+        var ele = /*#__PURE__*/createElement(finalTag, newProps);
+        var possiblyStyleElement = /*#__PURE__*/createElement(Noop, null);
 
@@ -151,8 +156,9 @@ if (!isBrowser && rules !== undefined) {
 
-          return createElement(Fragment, null, createElement("style", (_ref = {}, _ref["data-emotion-" + context.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
+          possiblyStyleElement = /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion-" + context.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
             __html: rules
-          }, _ref.nonce = context.sheet.nonce, _ref)), ele);
-        }
+          }, _ref.nonce = context.sheet.nonce, _ref));
+        } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
 
-        return ele;
+
+        return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele);
       });
@@ -159,0 +165,0 @@ });

dist/styled-base.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/core")):"function"==typeof define&&define.amd?define(["react","@emotion/core"],t):(e=e||self).emotionStyledBase=t(e.React,e.emotionCore)}(this,function(e,t){"use strict";var r=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e};function n(e){var t={};return function(r){return void 0===t[r]&&(t[r]=e(r)),t[r]}}var o=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|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|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|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|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)-.*))$/,i=n(function(e){return o.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91}),a=function(e){return"theme"!==e&&"innerRef"!==e},s=function(e){return"string"==typeof e&&e.charCodeAt(0)>96?i:a};var l={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},c=/[A-Z]|^ms/g,d=/_EMO_([^_]+?)_([^]*?)_EMO_/g,u=function(e){return 45===e.charCodeAt(1)},p=function(e){return null!=e&&"boolean"!=typeof e},f=n(function(e){return u(e)?e:e.replace(c,"-$&").toLowerCase()}),m=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(d,function(e,t,r){return g={name:t,styles:r,next:g},t})}return 1===l[e]||u(e)||"number"!=typeof t||0===t?t:t+"px"};function h(e,t,r,n){if(null==r)return"";if(void 0!==r.__emotion_styles)return r;switch(typeof r){case"boolean":return"";case"object":if(1===r.anim)return g={name:r.name,styles:r.styles,next:g},r.name;if(void 0!==r.styles){var o=r.next;if(void 0!==o)for(;void 0!==o;)g={name:o.name,styles:o.styles,next:g},o=o.next;return r.styles+";"}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=h(e,t,r[o],!1);else for(var i in r){var a=r[i];if("object"!=typeof a)null!=t&&void 0!==t[a]?n+=i+"{"+t[a]+"}":p(a)&&(n+=f(i)+":"+m(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var s=h(e,t,a,!1);switch(i){case"animation":case"animationName":n+=f(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)p(a[l])&&(n+=f(i)+":"+m(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var i=g,a=r(e);return g=i,h(e,t,a,n)}}if(null==t)return r;var s=t[r];return void 0===s||n?r:s}var g,y=/label:\s*([^\s;\n{]+)\s*;/g;function v(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}return function n(o,i){var a,l,c;void 0!==i&&(a=i.label,c=i.target,l=o.__emotion_forwardProp&&i.shouldForwardProp?function(e){return o.__emotion_forwardProp(e)&&i.shouldForwardProp(e)}:i.shouldForwardProp);var d=o.__emotion_real===o,u=d&&o.__emotion_base||o;"function"!=typeof l&&d&&(l=o.__emotion_forwardProp);var p=l||s(u),f=!p("as");return function(){var m=arguments,b=d&&void 0!==o.__emotion_styles?o.__emotion_styles.slice(0):[];if(void 0!==a&&b.push("label:"+a+";"),null==m[0]||void 0===m[0].raw)b.push.apply(b,m);else{b.push(m[0][0]);for(var x=m.length,k=1;k<x;k++)b.push(m[k],m[0][k])}var w=t.withEmotionCache(function(r,n,o){return e.createElement(t.ThemeContext.Consumer,null,function(t){var i,a,d,m,v=f&&r.as||u,x="",k=[],w=r;if(null==r.theme){for(var C in w={},r)w[C]=r[C];w.theme=t}"string"==typeof r.className?(i=n.registered,a=k,d=r.className,m="",d.split(" ").forEach(function(e){void 0!==i[e]?a.push(i[e]):m+=e+" "}),x=m):null!=r.className&&(x=r.className+" ");var _=function(e,t,r){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var n=!0,o="";g=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=h(r,t,i,!1)):o+=i[0];for(var a=1;a<e.length;a++)o+=h(r,t,e[a],46===o.charCodeAt(o.length-1)),n&&(o+=i[a]);y.lastIndex=0;for(var s,l="";null!==(s=y.exec(o));)l+="-"+s[1];return{name:function(e){for(var t,r=0,n=0,o=e.length;o>=4;++n,o-=4)t=1540483477*(65535&(t=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+(59797*(t>>>16)<<16),r=1540483477*(65535&(t^=t>>>24))+(59797*(t>>>16)<<16)^1540483477*(65535&r)+(59797*(r>>>16)<<16);switch(o){case 3:r^=(255&e.charCodeAt(n+2))<<16;case 2:r^=(255&e.charCodeAt(n+1))<<8;case 1:r=1540483477*(65535&(r^=255&e.charCodeAt(n)))+(59797*(r>>>16)<<16)}return(((r=1540483477*(65535&(r^=r>>>13))+(59797*(r>>>16)<<16))^r>>>15)>>>0).toString(36)}(o)+l,styles:o,next:g}}(b.concat(k),n.registered,w);!function(e,t,r){var n=e.key+"-"+t.name;if(!1===r&&void 0===e.registered[n]&&(e.registered[n]=t.styles),void 0===e.inserted[t.name]){var o=t;do{e.insert("."+n,o,e.sheet,!0),o=o.next}while(void 0!==o)}}(n,_,"string"==typeof v),x+=n.key+"-"+_.name,void 0!==c&&(x+=" "+c);var O=f&&void 0===l?s(v):p,S={};for(var A in r)f&&"as"===A||O(A)&&(S[A]=r[A]);return S.className=x,S.ref=o||r.innerRef,e.createElement(v,S)})});return w.displayName=void 0!==a?a:"Styled("+("string"==typeof u?u:u.displayName||u.name||"Component")+")",w.defaultProps=o.defaultProps,w.__emotion_real=w,w.__emotion_base=u,w.__emotion_styles=b,w.__emotion_forwardProp=l,Object.defineProperty(w,"toString",{value:function(){return"."+c}}),w.withComponent=function(e,t){return n(e,void 0!==t?function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(n,!0).forEach(function(t){r(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}({},i||{},{},t):i).apply(void 0,b)},w}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/core")):"function"==typeof define&&define.amd?define(["react","@emotion/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).emotionStyledBase=t(e.React,e.emotionCore)}(this,(function(e,t){"use strict";var r=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e};function n(e){var t={};return function(r){return void 0===t[r]&&(t[r]=e(r)),t[r]}}var o=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|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|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|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|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)-.*))$/,i=n((function(e){return o.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91})),a=function(e){return"theme"!==e&&"innerRef"!==e},l=function(e){return"string"==typeof e&&e.charCodeAt(0)>96?i:a};function s(e,t,r){var n="";return r.split(" ").forEach((function(r){void 0!==e[r]?t.push(e[r]):n+=r+" "})),n}var c=function(e,t,r){var n=e.key+"-"+t.name;if(!1===r&&void 0===e.registered[n]&&(e.registered[n]=t.styles),void 0===e.inserted[t.name]){var o=t;do{e.insert("."+n,o,e.sheet,!0);o=o.next}while(void 0!==o)}};var d={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},u=/[A-Z]|^ms/g,p=/_EMO_([^_]+?)_([^]*?)_EMO_/g,f=function(e){return 45===e.charCodeAt(1)},m=function(e){return null!=e&&"boolean"!=typeof e},h=n((function(e){return f(e)?e:e.replace(u,"-$&").toLowerCase()})),g=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(p,(function(e,t,r){return v={name:t,styles:r,next:v},t}))}return 1===d[e]||f(e)||"number"!=typeof t||0===t?t:t+"px"};function y(e,t,r,n){if(null==r)return"";if(void 0!==r.__emotion_styles)return r;switch(typeof r){case"boolean":return"";case"object":if(1===r.anim)return v={name:r.name,styles:r.styles,next:v},r.name;if(void 0!==r.styles){var o=r.next;if(void 0!==o)for(;void 0!==o;)v={name:o.name,styles:o.styles,next:v},o=o.next;var i=r.styles+";";return i}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=y(e,t,r[o],!1);else for(var i in r){var a=r[i];if("object"!=typeof a)null!=t&&void 0!==t[a]?n+=i+"{"+t[a]+"}":m(a)&&(n+=h(i)+":"+g(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var l=y(e,t,a,!1);switch(i){case"animation":case"animationName":n+=h(i)+":"+l+";";break;default:n+=i+"{"+l+"}"}}else for(var s=0;s<a.length;s++)m(a[s])&&(n+=h(i)+":"+g(i,a[s])+";")}return n}(e,t,r);case"function":if(void 0!==e){var a=v,l=r(e);return v=a,y(e,t,l,n)}break;case"string":}if(null==t)return r;var s=t[r];return void 0===s||n?r:s}var v,b=/label:\s*([^\s;\n{]+)\s*;/g;var x=function(e,t,r){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var n=!0,o="";v=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=y(r,t,i,!1)):o+=i[0];for(var a=1;a<e.length;a++)o+=y(r,t,e[a],46===o.charCodeAt(o.length-1)),n&&(o+=i[a]);b.lastIndex=0;for(var l,s="";null!==(l=b.exec(o));)s+="-"+l[1];var c=function(e){for(var t,r=0,n=0,o=e.length;o>=4;++n,o-=4)t=1540483477*(65535&(t=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+(59797*(t>>>16)<<16),r=1540483477*(65535&(t^=t>>>24))+(59797*(t>>>16)<<16)^1540483477*(65535&r)+(59797*(r>>>16)<<16);switch(o){case 3:r^=(255&e.charCodeAt(n+2))<<16;case 2:r^=(255&e.charCodeAt(n+1))<<8;case 1:r=1540483477*(65535&(r^=255&e.charCodeAt(n)))+(59797*(r>>>16)<<16)}return(((r=1540483477*(65535&(r^=r>>>13))+(59797*(r>>>16)<<16))^r>>>15)>>>0).toString(36)}(o)+s;return{name:c,styles:o,next:v}};function k(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function w(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?k(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):k(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var C=function(){return null};return function r(n,o){var i,a,d;void 0!==o&&(i=o.label,d=o.target,a=n.__emotion_forwardProp&&o.shouldForwardProp?function(e){return n.__emotion_forwardProp(e)&&o.shouldForwardProp(e)}:o.shouldForwardProp);var u=n.__emotion_real===n,p=u&&n.__emotion_base||n;"function"!=typeof a&&u&&(a=n.__emotion_forwardProp);var f=a||l(p),m=!f("as");return function(){var h=arguments,g=u&&void 0!==n.__emotion_styles?n.__emotion_styles.slice(0):[];if(void 0!==i&&g.push("label:"+i+";"),null==h[0]||void 0===h[0].raw)g.push.apply(g,h);else{0,g.push(h[0][0]);for(var y=h.length,v=1;v<y;v++)g.push(h[v],h[0][v])}var b=t.withEmotionCache((function(r,n,o){return e.createElement(t.ThemeContext.Consumer,null,(function(t){var i=m&&r.as||p,u="",h=[],y=r;if(null==r.theme){for(var v in y={},r)y[v]=r[v];y.theme=t}"string"==typeof r.className?u=s(n.registered,h,r.className):null!=r.className&&(u=r.className+" ");var b=x(g.concat(h),n.registered,y);c(n,b,"string"==typeof i);u+=n.key+"-"+b.name,void 0!==d&&(u+=" "+d);var k=m&&void 0===a?l(i):f,w={};for(var O in r)m&&"as"===O||k(O)&&(w[O]=r[O]);w.className=u,w.ref=o||r.innerRef;var _=e.createElement(i,w),S=e.createElement(C,null);return e.createElement(e.Fragment,null,S,_)}))}));return b.displayName=void 0!==i?i:"Styled("+("string"==typeof p?p:p.displayName||p.name||"Component")+")",b.defaultProps=n.defaultProps,b.__emotion_real=b,b.__emotion_base=p,b.__emotion_styles=g,b.__emotion_forwardProp=a,Object.defineProperty(b,"toString",{value:function(){return"."+d}}),b.withComponent=function(e,t){return r(e,void 0!==t?w({},o||{},{},t):o).apply(void 0,g)},b}}}));
 //# sourceMappingURL=styled-base.umd.min.js.map

package.json

 {
   "name": "@emotion/styled-base",
-  "version": "10.0.31",
+  "version": "10.3.0",
   "description": "base styled API for emotion",
@@ -24,6 +24,6 @@ "main": "dist/styled-base.cjs.js",
   "devDependencies": {
-    "@emotion/core": "^10.0.28",
+    "@emotion/core": "^10.3.0",
     "@types/react": "^16.8.20",
     "dtslint": "^0.3.0",
-    "react": "^16.5.2"
+    "react": "16.14.0"
   },
@@ -30,0 +30,0 @@ "peerDependencies": {

src/index.js

@@ -20,2 +20,3 @@ // @flow
 let isBrowser = typeof document !== 'undefined'
+const Noop = () => null
 
@@ -156,2 +157,3 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
               const ele = React.createElement(finalTag, newProps)
+              let possiblyStyleElement = <Noop />
               if (!isBrowser && rules !== undefined) {
@@ -164,16 +166,19 @@ let serializedNames = serialized.name
                 }
-                return (
-                  <React.Fragment>
-                    <style
-                      {...{
-                        [`data-emotion-${context.key}`]: serializedNames,
-                        dangerouslySetInnerHTML: { __html: rules },
-                        nonce: context.sheet.nonce
-                      }}
-                    />
-                    {ele}
-                  </React.Fragment>
+                possiblyStyleElement = (
+                  <style
+                    {...{
+                      [`data-emotion-${context.key}`]: serializedNames,
+                      dangerouslySetInnerHTML: { __html: rules },
+                      nonce: context.sheet.nonce
+                    }}
+                  />
                 )
               }
-              return ele
+              // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+              return (
+                <React.Fragment>
+                  {possiblyStyleElement}
+                  {ele}
+                </React.Fragment>
+              )
             }}
@@ -180,0 +185,0 @@ </ThemeContext.Consumer>

types/index.d.ts

@@ -42,3 +42,3 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 export interface StyledComponent<InnerProps, StyleProps, Theme extends object>
-  extends React.SFC<InnerProps & Omit<StyleProps, 'theme'> & { theme?: Theme }>,
+  extends React.FC<InnerProps & Omit<StyleProps, 'theme'> & { theme?: Theme }>,
     ComponentSelector {
@@ -45,0 +45,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

116933

3.41%

Lines of code

1426

2.22%

No dependency changes