@emotion/styled-base - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

dist/index.cjs.js

@@ -7,3 +7,2 @@ 'use strict';
 var React = require('react');
-var emotionUtils = require('emotion-utils');
 var core = require('@emotion/core');
@@ -31,16 +30,2 @@ var utils = require('@emotion/utils');
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
 var testOmitPropsOnStringTag = isPropValid;
@@ -72,6 +57,2 @@ var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
 
-function _render() {
-  return core.consumer(this, this.renderChild);
-}
-
 var createStyled = function createStyled(tag, options) {
@@ -95,3 +76,3 @@ if (process.env.NODE_ENV !== 'production') {
     var args = arguments;
-    var styles = isReal && tag[emotionUtils.STYLES_KEY] !== undefined ? tag[emotionUtils.STYLES_KEY].slice(0) : [];
+    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
 
@@ -114,53 +95,34 @@ if (identifierName !== undefined) {
 
-    var Styled =
-    /*#__PURE__*/
-    function (_React$Component) {
-      _inheritsLoose(Styled, _React$Component);
+    var Styled = core.withCSSContext(function (props, context) {
+      var className = '';
+      var classInterpolations = [];
+      var mergedProps = omitAssign(testAlwaysTrue, {}, props, {
+        theme: props.theme || context.theme
+      });
 
-      function Styled(props) {
-        var _this;
+      if (typeof props.className === 'string') {
+        className += utils.getRegisteredStyles(context.registered, classInterpolations, props.className);
+      }
 
-        _this = _React$Component.call(this, props) || this;
+      var serialized = serialize.serializeStyles.call(mergedProps, styles.concat(classInterpolations));
+      var rules = utils.insertStyles(context, serialized);
+      className += serialized.cls;
+      var ele = React.createElement(baseTag, omitAssign(omitFn, {}, props, {
+        className: className,
+        ref: props.innerRef
+      }));
 
-        _this.renderChild = function (context) {
-          var className = '';
-          var classInterpolations = [];
-          _this.mergedProps = omitAssign(testAlwaysTrue, {}, _this.props, {
-            theme: _this.props.theme || context.theme
-          });
-
-          if (typeof _this.props.className === 'string') {
-            className += utils.getRegisteredStyles(context.registered, classInterpolations, _this.props.className);
+      if (utils.shouldSerializeToReactTree && rules !== undefined) {
+        return React.createElement(React.Fragment, null, React.createElement("style", {
+          "data-emotion-ssr": serialized.name,
+          dangerouslySetInnerHTML: {
+            __html: 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, {}, _this.props, {
-            className: className,
-            ref: _this.props.innerRef
-          }));
-
-          if (utils.shouldSerializeToReactTree && rules !== undefined) {
-            return React.createElement(React.Fragment, null, React.createElement("style", {
-              "data-emotion-ssr": serialized.name,
-              dangerouslySetInnerHTML: {
-                __html: rules
-              }
-            }), ele);
-          }
-
-          return ele;
-        };
-
-        return _this;
+        }), ele);
       }
 
-      var _proto = Styled.prototype;
-      _proto.render = _render;
-      return Styled;
-    }(React.Component); // $FlowFixMe
+      return ele;
+    });
+    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")"; // $FlowFixMe
 
-
-    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     var FinalStyled = React.forwardRef(function (props, ref) {
@@ -167,0 +129,0 @@ if (ref === null) {

dist/index.es.js

 import isPropValid from '@emotion/is-prop-valid';
-import { createElement, Fragment, Component, forwardRef } from 'react';
-import { STYLES_KEY } from 'emotion-utils';
-import { consumer } from '@emotion/core';
+import { createElement, Fragment, forwardRef } from 'react';
+import { withCSSContext } from '@emotion/core';
 import { getRegisteredStyles, insertStyles, shouldSerializeToReactTree } from '@emotion/utils';
@@ -26,16 +25,2 @@ import { serializeStyles } from '@emotion/serialize';
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
 var testOmitPropsOnStringTag = isPropValid;
@@ -67,6 +52,2 @@ var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
 
-function _render() {
-  return consumer(this, this.renderChild);
-}
-
 var createStyled = function createStyled(tag, options) {
@@ -90,3 +71,3 @@ if (process.env.NODE_ENV !== 'production') {
     var args = arguments;
-    var styles = isReal && tag[STYLES_KEY] !== undefined ? tag[STYLES_KEY].slice(0) : [];
+    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
 
@@ -109,53 +90,34 @@ if (identifierName !== undefined) {
 
-    var Styled =
-    /*#__PURE__*/
-    function (_React$Component) {
-      _inheritsLoose(Styled, _React$Component);
+    var Styled = withCSSContext(function (props, context) {
+      var className = '';
+      var classInterpolations = [];
+      var mergedProps = omitAssign(testAlwaysTrue, {}, props, {
+        theme: props.theme || context.theme
+      });
 
-      function Styled(props) {
-        var _this;
+      if (typeof props.className === 'string') {
+        className += getRegisteredStyles(context.registered, classInterpolations, props.className);
+      }
 
-        _this = _React$Component.call(this, props) || this;
+      var serialized = serializeStyles.call(mergedProps, styles.concat(classInterpolations));
+      var rules = insertStyles(context, serialized);
+      className += serialized.cls;
+      var ele = createElement(baseTag, omitAssign(omitFn, {}, props, {
+        className: className,
+        ref: props.innerRef
+      }));
 
-        _this.renderChild = function (context) {
-          var className = '';
-          var classInterpolations = [];
-          _this.mergedProps = omitAssign(testAlwaysTrue, {}, _this.props, {
-            theme: _this.props.theme || context.theme
-          });
-
-          if (typeof _this.props.className === 'string') {
-            className += getRegisteredStyles(context.registered, classInterpolations, _this.props.className);
+      if (shouldSerializeToReactTree && rules !== undefined) {
+        return createElement(Fragment, null, createElement("style", {
+          "data-emotion-ssr": serialized.name,
+          dangerouslySetInnerHTML: {
+            __html: rules
           }
-
-          var serialized = serializeStyles.call(_assertThisInitialized(_this), styles.concat(classInterpolations));
-          var rules = insertStyles(context, serialized);
-          className += serialized.cls;
-          var ele = createElement(baseTag, omitAssign(omitFn, {}, _this.props, {
-            className: className,
-            ref: _this.props.innerRef
-          }));
-
-          if (shouldSerializeToReactTree && rules !== undefined) {
-            return createElement(Fragment, null, createElement("style", {
-              "data-emotion-ssr": serialized.name,
-              dangerouslySetInnerHTML: {
-                __html: rules
-              }
-            }), ele);
-          }
-
-          return ele;
-        };
-
-        return _this;
+        }), ele);
       }
 
-      var _proto = Styled.prototype;
-      _proto.render = _render;
-      return Styled;
-    }(Component); // $FlowFixMe
+      return ele;
+    });
+    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")"; // $FlowFixMe
 
-
-    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     var FinalStyled = forwardRef(function (props, ref) {
@@ -162,0 +124,0 @@ if (ref === null) {

package.json

 {
   "name": "@emotion/styled-base",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "base styled API for emotion",
@@ -11,6 +11,5 @@ "main": "dist/index.cjs.js",
     "@emotion/is-prop-valid": "^0.6.1",
-    "@emotion/serialize": "^0.5.0",
+    "@emotion/serialize": "^0.6.2",
     "@emotion/types": "^0.6.0",
-    "@emotion/utils": "^0.5.0",
-    "emotion-utils": "9.1.0"
+    "@emotion/utils": "^0.5.0"
   },
@@ -17,0 +16,0 @@ "peerDependencies": {

src/index.js

 // @flow
 import * as React from 'react'
-import { STYLES_KEY } from 'emotion-utils'
 import type { ElementType } from 'react'
@@ -13,4 +12,3 @@ import {
 } from './utils'
-import type { CSSContextType } from '@emotion/types'
-import { consumer } from '@emotion/core'
+import { withCSSContext } from '@emotion/core'
 import {
@@ -47,3 +45,5 @@ getRegisteredStyles,
     let styles =
-      isReal && tag[STYLES_KEY] !== undefined ? tag[STYLES_KEY].slice(0) : []
+      isReal && tag.__emotion_styles !== undefined
+        ? tag.__emotion_styles.slice(0)
+        : []
     if (identifierName !== undefined) {
@@ -63,4 +63,45 @@ styles.push(`label:${identifierName};`)
 
-    class Styled extends React.Component<*> {
-      static displayName = identifierName !== undefined
+    const Styled = withCSSContext((props, context) => {
+      let className = ''
+      let classInterpolations = []
+      let mergedProps = omitAssign(testAlwaysTrue, {}, props, {
+        theme: props.theme || context.theme
+      })
+      if (typeof props.className === 'string') {
+        className += getRegisteredStyles(
+          context.registered,
+          classInterpolations,
+          props.className
+        )
+      }
+      const serialized = serializeStyles.call(
+        mergedProps,
+        styles.concat(classInterpolations)
+      )
+      const rules = insertStyles(context, serialized)
+      className += serialized.cls
+
+      const ele = React.createElement(
+        baseTag,
+        omitAssign(omitFn, {}, props, {
+          className,
+          ref: props.innerRef
+        })
+      )
+      if (shouldSerializeToReactTree && rules !== undefined) {
+        return (
+          <React.Fragment>
+            <style
+              data-emotion-ssr={serialized.name}
+              dangerouslySetInnerHTML={{ __html: rules }}
+            />
+            {ele}
+          </React.Fragment>
+        )
+      }
+      return ele
+    })
+
+    Styled.displayName =
+      identifierName !== undefined
         ? identifierName
@@ -72,48 +113,3 @@ : `Styled(${
           })`
-      mergedProps: Object
 
-      renderChild = (context: CSSContextType) => {
-        let className = ''
-        let classInterpolations = []
-        this.mergedProps = omitAssign(testAlwaysTrue, {}, this.props, {
-          theme: this.props.theme || context.theme
-        })
-        if (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
-
-        const ele = React.createElement(
-          baseTag,
-          omitAssign(omitFn, {}, this.props, {
-            className,
-            ref: this.props.innerRef
-          })
-        )
-        if (shouldSerializeToReactTree && rules !== undefined) {
-          return (
-            <React.Fragment>
-              <style
-                data-emotion-ssr={serialized.name}
-                dangerouslySetInnerHTML={{ __html: rules }}
-              />
-              {ele}
-            </React.Fragment>
-          )
-        }
-        return ele
-      }
-      render() {
-        return consumer(this, this.renderChild)
-      }
-    }
     // $FlowFixMe
@@ -120,0 +116,0 @@ const FinalStyled = React.forwardRef((props, ref) => {

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

Dependency count

6

decreased by-14.29%

Worsened metrics

Total package byte prevSize

71693

decreased by-5.34%

Lines of code

396

decreased by-13.35%

Dependency changes

• + Added@emotion/serialize@0.6.2(transitive)

• - Removedemotion-utils@9.1.0

• - Removed@emotion/serialize@0.5.0(transitive)

• - Removedemotion-utils@9.1.0(transitive)

• Updated@emotion/serialize@^0.6.2