@emotion/styled-base - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

dist/index.cjs.js

@@ -28,2 +28,10 @@ 'use strict';
 
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
 var tags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "command", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li", "link", "listing", "main", "map", "mark", "marquee", "math", "menu", "menuitem", "meta", "meter", "multicol", "nav", "nextid", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "pre", "progress", "q", "rb", "rbc", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "animation", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "discard", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "handler", "hatch", "hatchpath", "hkern", "line", "linearGradient", "listener", "marker", "mask", "mesh", "meshgradient", "meshpatch", "meshrow", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "prefetch", "radialGradient", "rect", "set", "solidColor", "solidcolor", "stop", "switch", "symbol", "tbreak", "text", "textArea", "textPath", "tref", "tspan", "unknown", "use", "view", "vkern"];
@@ -59,6 +67,10 @@ var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|accept|acceptCharset|accessKey|action|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|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|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|itemProp|itemScope|itemType|itemID|itemRef|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)|(on[A-Z].*)|((data|aria)-.*))$/;
 
-function _componentWillUnmount() {
+function _componentDidMount() {
   core.hydration.shouldHydrate = false;
 }
 
+function _render() {
+  return core.consumer(this.renderChild);
+}
+
 var createStyled = function createStyled(tag, options) {
@@ -100,51 +112,51 @@ if (process.env.NODE_ENV !== 'production') {
 
-    function _render() {
-      var _this2 = this;
+    var Styled =
+    /*#__PURE__*/
+    function (_React$Component) {
+      _inheritsLoose(Styled, _React$Component);
 
-      return React.createElement(core.CSSContext.Consumer, null, function (context) {
-        var className = '';
-        var classInterpolations = [];
-        _this2.mergedProps = omitAssign(testAlwaysTrue, {}, _this2.props, {
-          theme: context.theme || _this2.props.theme || {}
-        });
+      function Styled(props) {
+        var _this;
 
-        if (_this2.props.className && typeof _this2.props.className === 'string') {
-          className += utils.getRegisteredStyles(context.registered, classInterpolations, _this2.props.className);
-        }
+        _this = _React$Component.call(this, props) || this;
+        Object.defineProperty(_assertThisInitialized(_this), "renderChild", {
+          configurable: true,
+          enumerable: true,
+          writable: true,
+          value: function value(context) {
+            var className = '';
+            var classInterpolations = [];
+            _this.mergedProps = omitAssign(testAlwaysTrue, {}, _this.props, {
+              theme: context.theme || _this.props.theme || {}
+            });
 
-        var serialized = serialize.serializeStyles.call(_this2, styles.concat(classInterpolations));
-        var rules = utils.insertStyles(context, serialized);
-        className += serialized.cls;
+            if (_this.props.className && typeof _this.props.className === 'string') {
+              className += utils.getRegisteredStyles(context.registered, classInterpolations, _this.props.className);
+            }
 
-        if (_this2.serialized === undefined && (_this2.shouldHydrate || !utils.isBrowser)) {
-          _this2.serialized = rules;
-        }
+            var serialized = serialize.serializeStyles.call(_assertThisInitialized(_this), styles.concat(classInterpolations));
+            var rules = utils.insertStyles(context, serialized);
+            className += serialized.cls;
 
-        var ele = React.createElement(baseTag, omitAssign(omitFn, {}, _this2.props, {
-          className: className,
-          ref: _this2.props.innerRef
-        }));
-
-        if (_this2.shouldHydrate || !utils.isBrowser) {
-          return React.createElement(React.Fragment, null, React.createElement("style", {
-            "data-more": serialized.name,
-            dangerouslySetInnerHTML: {
-              __html: _this2.serialized
+            if (_this.serialized === undefined && (_this.shouldHydrate || !utils.isBrowser)) {
+              _this.serialized = rules;
             }
-          }), ele);
-        }
 
-        return ele;
-      });
-    }
+            var ele = React.createElement(baseTag, omitAssign(omitFn, {}, _this.props, {
+              className: className,
+              ref: _this.props.innerRef
+            }));
 
-    var Styled =
-    /*#__PURE__*/
-    function (_React$Component) {
-      _inheritsLoose(Styled, _React$Component);
+            if ((_this.shouldHydrate || !utils.isBrowser) && _this.serialized !== undefined) {
+              return React.createElement(React.Fragment, null, React.createElement("style", {
+                "data-more": serialized.name,
+                dangerouslySetInnerHTML: {
+                  __html: _this.serialized
+                }
+              }), ele);
+            }
 
-      function Styled(props) {
-        var _this;
-
-        _this = _React$Component.call(this, props) || this;
+            return ele;
+          }
+        });
         _this.shouldHydrate = core.hydration.shouldHydrate;
@@ -155,3 +167,3 @@ return _this;
       var _proto = Styled.prototype;
-      _proto.componentWillUnmount = _componentWillUnmount;
+      _proto.componentDidMount = _componentDidMount;
       _proto.render = _render;
@@ -158,0 +170,0 @@ return Styled;

dist/index.es.js

 import { Component, Fragment, createElement } from 'react';
 import { STYLES_KEY, memoize } from 'emotion-utils';
-import { CSSContext, hydration } from '@emotion/core';
+import { consumer, hydration } from '@emotion/core';
 import { getRegisteredStyles, insertStyles, isBrowser } from '@emotion/utils';
@@ -26,2 +26,10 @@ import { serializeStyles } from '@emotion/serialize';
 
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
 var tags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "command", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li", "link", "listing", "main", "map", "mark", "marquee", "math", "menu", "menuitem", "meta", "meter", "multicol", "nav", "nextid", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "pre", "progress", "q", "rb", "rbc", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "animation", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "discard", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "handler", "hatch", "hatchpath", "hkern", "line", "linearGradient", "listener", "marker", "mask", "mesh", "meshgradient", "meshpatch", "meshrow", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "prefetch", "radialGradient", "rect", "set", "solidColor", "solidcolor", "stop", "switch", "symbol", "tbreak", "text", "textArea", "textPath", "tref", "tspan", "unknown", "use", "view", "vkern"];
@@ -57,6 +65,10 @@ var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|accept|acceptCharset|accessKey|action|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|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|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|itemProp|itemScope|itemType|itemID|itemRef|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)|(on[A-Z].*)|((data|aria)-.*))$/;
 
-function _componentWillUnmount() {
+function _componentDidMount() {
   hydration.shouldHydrate = false;
 }
 
+function _render() {
+  return consumer(this.renderChild);
+}
+
 var createStyled = function createStyled(tag, options) {
@@ -98,51 +110,51 @@ if (process.env.NODE_ENV !== 'production') {
 
-    function _render() {
-      var _this2 = this;
+    var Styled =
+    /*#__PURE__*/
+    function (_React$Component) {
+      _inheritsLoose(Styled, _React$Component);
 
-      return createElement(CSSContext.Consumer, null, function (context) {
-        var className = '';
-        var classInterpolations = [];
-        _this2.mergedProps = omitAssign(testAlwaysTrue, {}, _this2.props, {
-          theme: context.theme || _this2.props.theme || {}
-        });
+      function Styled(props) {
+        var _this;
 
-        if (_this2.props.className && typeof _this2.props.className === 'string') {
-          className += getRegisteredStyles(context.registered, classInterpolations, _this2.props.className);
-        }
+        _this = _React$Component.call(this, props) || this;
+        Object.defineProperty(_assertThisInitialized(_this), "renderChild", {
+          configurable: true,
+          enumerable: true,
+          writable: true,
+          value: function value(context) {
+            var className = '';
+            var classInterpolations = [];
+            _this.mergedProps = omitAssign(testAlwaysTrue, {}, _this.props, {
+              theme: context.theme || _this.props.theme || {}
+            });
 
-        var serialized = serializeStyles.call(_this2, styles.concat(classInterpolations));
-        var rules = insertStyles(context, serialized);
-        className += serialized.cls;
+            if (_this.props.className && typeof _this.props.className === 'string') {
+              className += getRegisteredStyles(context.registered, classInterpolations, _this.props.className);
+            }
 
-        if (_this2.serialized === undefined && (_this2.shouldHydrate || !isBrowser)) {
-          _this2.serialized = rules;
-        }
+            var serialized = serializeStyles.call(_assertThisInitialized(_this), styles.concat(classInterpolations));
+            var rules = insertStyles(context, serialized);
+            className += serialized.cls;
 
-        var ele = createElement(baseTag, omitAssign(omitFn, {}, _this2.props, {
-          className: className,
-          ref: _this2.props.innerRef
-        }));
-
-        if (_this2.shouldHydrate || !isBrowser) {
-          return createElement(Fragment, null, createElement("style", {
-            "data-more": serialized.name,
-            dangerouslySetInnerHTML: {
-              __html: _this2.serialized
+            if (_this.serialized === undefined && (_this.shouldHydrate || !isBrowser)) {
+              _this.serialized = rules;
             }
-          }), ele);
-        }
 
-        return ele;
-      });
-    }
+            var ele = createElement(baseTag, omitAssign(omitFn, {}, _this.props, {
+              className: className,
+              ref: _this.props.innerRef
+            }));
 
-    var Styled =
-    /*#__PURE__*/
-    function (_React$Component) {
-      _inheritsLoose(Styled, _React$Component);
+            if ((_this.shouldHydrate || !isBrowser) && _this.serialized !== undefined) {
+              return createElement(Fragment, null, createElement("style", {
+                "data-more": serialized.name,
+                dangerouslySetInnerHTML: {
+                  __html: _this.serialized
+                }
+              }), ele);
+            }
 
-      function Styled(props) {
-        var _this;
-
-        _this = _React$Component.call(this, props) || this;
+            return ele;
+          }
+        });
         _this.shouldHydrate = hydration.shouldHydrate;
@@ -153,3 +165,3 @@ return _this;
       var _proto = Styled.prototype;
-      _proto.componentWillUnmount = _componentWillUnmount;
+      _proto.componentDidMount = _componentDidMount;
       _proto.render = _render;
@@ -156,0 +168,0 @@ return Styled;

package.json

 {
   "name": "@emotion/styled-base",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "base styled API for emotion",
@@ -11,3 +11,4 @@ "main": "dist/index.cjs.js",
     "@emotion/serialize": "^0.0.5",
-    "@emotion/utils": "^0.0.5",
+    "@emotion/types": "^0.0.5",
+    "@emotion/utils": "^0.1.0",
     "emotion-utils": "9.0.0"
@@ -14,0 +15,0 @@ },

src/index.js

@@ -15,3 +15,4 @@ // @flow
 } from './utils'
-import { hydration, CSSContext } from '@emotion/core'
+import type { CSSContextType } from '@emotion/types'
+import { hydration, consumer } from '@emotion/core'
 import { getRegisteredStyles, insertStyles, isBrowser } from '@emotion/utils'
@@ -72,61 +73,58 @@ import { serializeStyles } from '@emotion/serialize'
       }
-      componentWillUnmount() {
+      componentDidMount() {
         hydration.shouldHydrate = false
       }
-      render() {
-        return (
-          <CSSContext.Consumer>
-            {context => {
-              let className = ''
-              let classInterpolations = []
-              this.mergedProps = omitAssign(testAlwaysTrue, {}, this.props, {
-                theme: context.theme || this.props.theme || {}
-              })
-              if (
-                this.props.className &&
-                typeof this.props.className === 'string'
-              ) {
-                className += getRegisteredStyles(
-                  context.registered,
-                  classInterpolations,
-                  this.props.className
-                )
-              }
-              const serialized = serializeStyles.call(
-                this,
-                styles.concat(classInterpolations)
-              )
-              const rules = insertStyles(context, serialized)
-              className += serialized.cls
+      renderChild = (context: CSSContextType) => {
+        let className = ''
+        let classInterpolations = []
+        this.mergedProps = omitAssign(testAlwaysTrue, {}, this.props, {
+          theme: context.theme || this.props.theme || {}
+        })
+        if (this.props.className && typeof this.props.className === 'string') {
+          className += getRegisteredStyles(
+            context.registered,
+            classInterpolations,
+            this.props.className
+          )
+        }
+        const serialized = serializeStyles.call(
+          this,
+          styles.concat(classInterpolations)
+        )
+        const rules = insertStyles(context, serialized)
+        className += serialized.cls
 
-              if (
-                this.serialized === undefined &&
-                (this.shouldHydrate || !isBrowser)
-              ) {
-                this.serialized = rules
-              }
+        if (
+          this.serialized === undefined &&
+          (this.shouldHydrate || !isBrowser)
+        ) {
+          this.serialized = rules
+        }
 
-              const ele = React.createElement(
-                baseTag,
-                omitAssign(omitFn, {}, this.props, {
-                  className,
-                  ref: this.props.innerRef
-                })
-              )
-              if (this.shouldHydrate || !isBrowser) {
-                return (
-                  <React.Fragment>
-                    <style
-                      data-more={serialized.name}
-                      dangerouslySetInnerHTML={{ __html: this.serialized }}
-                    />
-                    {ele}
-                  </React.Fragment>
-                )
-              }
-              return ele
-            }}
-          </CSSContext.Consumer>
+        const ele = React.createElement(
+          baseTag,
+          omitAssign(omitFn, {}, this.props, {
+            className,
+            ref: this.props.innerRef
+          })
         )
+        if (
+          (this.shouldHydrate || !isBrowser) &&
+          this.serialized !== undefined
+        ) {
+          return (
+            <React.Fragment>
+              <style
+                data-more={serialized.name}
+                dangerouslySetInnerHTML={{ __html: this.serialized }}
+              />
+              {ele}
+            </React.Fragment>
+          )
+        }
+        return ele
       }
+      render() {
+        return consumer(this.renderChild)
+      }
     }
@@ -133,0 +131,0 @@ Styled.displayName =

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102160

increased by0.72%

Lines of code

1004

increased by2.03%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@emotion/types@^0.0.5

• + Added@emotion/types@0.0.5(transitive)

• + Added@emotion/utils@0.1.0(transitive)

• - Removed@emotion/utils@0.0.5(transitive)

• Updated@emotion/utils@^0.1.0