@emotion/styled-base - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/index.cjs.js

@@ -52,6 +52,2 @@ 'use strict';
 
-function _componentDidMount() {
-  core.hydration.shouldHydrate = false;
-}
-
 function _render() {
@@ -106,3 +102,2 @@ return core.consumer(this, this.renderChild);
         _this = _React$Component.call(this, props) || this;
-        _this.shouldHydrate = core.hydration.shouldHydrate;
 
@@ -121,9 +116,4 @@ _this.renderChild = function (context) {
           var serialized = serialize.serializeStyles.call(_assertThisInitialized(_this), styles.concat(classInterpolations));
-          var rules = utils.insertStyles(context, serialized, _this.serialized === undefined && _this.shouldHydrate);
+          var rules = utils.insertStyles(context, serialized);
           className += serialized.cls;
-
-          if (_this.serialized === undefined && _this.shouldHydrate) {
-            _this.serialized = rules;
-          }
-
           var ele = React.createElement(baseTag, omitAssign(omitFn, {}, _this.props, {
@@ -134,7 +124,7 @@ className: className,
 
-          if (_this.shouldHydrate && _this.serialized !== undefined) {
+          if (utils.shouldSerializeToReactTree && rules !== undefined) {
             return React.createElement(React.Fragment, null, React.createElement("style", {
-              "data-more": serialized.name,
+              "data-emotion-ssr": serialized.name,
               dangerouslySetInnerHTML: {
-                __html: _this.serialized
+                __html: rules
               }
@@ -151,3 +141,2 @@ }), ele);
       var _proto = Styled.prototype;
-      _proto.componentDidMount = _componentDidMount;
       _proto.render = _render;
@@ -154,0 +143,0 @@ return Styled;

dist/index.es.js

 import { memoize, STYLES_KEY } from 'emotion-utils';
 import { createElement, Fragment, Component } from 'react';
-import { hydration, consumer } from '@emotion/core';
-import { getRegisteredStyles, insertStyles } from '@emotion/utils';
+import { consumer } from '@emotion/core';
+import { getRegisteredStyles, insertStyles, shouldSerializeToReactTree } from '@emotion/utils';
 import { serializeStyles } from '@emotion/serialize';
@@ -50,6 +50,2 @@
 
-function _componentDidMount() {
-  hydration.shouldHydrate = false;
-}
-
 function _render() {
@@ -104,3 +100,2 @@ return consumer(this, this.renderChild);
         _this = _React$Component.call(this, props) || this;
-        _this.shouldHydrate = hydration.shouldHydrate;
 
@@ -119,9 +114,4 @@ _this.renderChild = function (context) {
           var serialized = serializeStyles.call(_assertThisInitialized(_this), styles.concat(classInterpolations));
-          var rules = insertStyles(context, serialized, _this.serialized === undefined && _this.shouldHydrate);
+          var rules = insertStyles(context, serialized);
           className += serialized.cls;
-
-          if (_this.serialized === undefined && _this.shouldHydrate) {
-            _this.serialized = rules;
-          }
-
           var ele = createElement(baseTag, omitAssign(omitFn, {}, _this.props, {
@@ -132,7 +122,7 @@ className: className,
 
-          if (_this.shouldHydrate && _this.serialized !== undefined) {
+          if (shouldSerializeToReactTree && rules !== undefined) {
             return createElement(Fragment, null, createElement("style", {
-              "data-more": serialized.name,
+              "data-emotion-ssr": serialized.name,
               dangerouslySetInnerHTML: {
-                __html: _this.serialized
+                __html: rules
               }
@@ -149,3 +139,2 @@ }), ele);
       var _proto = Styled.prototype;
-      _proto.componentDidMount = _componentDidMount;
       _proto.render = _render;
@@ -152,0 +141,0 @@ return Styled;

package.json

 {
   "name": "@emotion/styled-base",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "base styled API for emotion",
@@ -10,10 +10,10 @@ "main": "dist/index.cjs.js",
   "dependencies": {
-    "@emotion/serialize": "^0.4.1",
-    "@emotion/types": "^0.2.3",
-    "@emotion/utils": "^0.4.1",
-    "emotion-utils": "9.0.1"
+    "@emotion/serialize": "^0.5.0",
+    "@emotion/types": "^0.5.0",
+    "@emotion/utils": "^0.5.0",
+    "emotion-utils": "9.1.0"
   },
   "peerDependencies": {
     "@emotion/core": "0.x.x",
-    "react": ">=16.3.0 || >=16.3.0-alpha.0"
+    "react": ">=16.3.0"
   },
@@ -20,0 +20,0 @@ "publishConfig": {

src/index.js

@@ -14,4 +14,8 @@ // @flow
 import type { CSSContextType } from '@emotion/types'
-import { hydration, consumer } from '@emotion/core'
-import { getRegisteredStyles, insertStyles } from '@emotion/utils'
+import { consumer } from '@emotion/core'
+import {
+  getRegisteredStyles,
+  insertStyles,
+  shouldSerializeToReactTree
+} from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
@@ -84,7 +88,3 @@
       mergedProps: Object
-      shouldHydrate: boolean
-      serialized: string
 
-      shouldHydrate = hydration.shouldHydrate
-
       renderChild = (context: CSSContextType) => {
@@ -107,13 +107,5 @@ let className = ''
         )
-        const rules = insertStyles(
-          context,
-          serialized,
-          this.serialized === undefined && this.shouldHydrate
-        )
+        const rules = insertStyles(context, serialized)
         className += serialized.cls
 
-        if (this.serialized === undefined && this.shouldHydrate) {
-          this.serialized = rules
-        }
-
         const ele = React.createElement(
@@ -126,8 +118,8 @@ baseTag,
         )
-        if (this.shouldHydrate && this.serialized !== undefined) {
+        if (shouldSerializeToReactTree && rules !== undefined) {
           return (
             <React.Fragment>
               <style
-                data-more={serialized.name}
-                dangerouslySetInnerHTML={{ __html: this.serialized }}
+                data-emotion-ssr={serialized.name}
+                dangerouslySetInnerHTML={{ __html: rules }}
               />
@@ -140,6 +132,2 @@ {ele}
       }
-
-      componentDidMount() {
-        hydration.shouldHydrate = false
-      }
       render() {
@@ -146,0 +134,0 @@ return consumer(this, this.renderChild)

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

Worsened metrics

Total package byte prevSize

90287

decreased by-2.55%

Lines of code

901

decreased by-2.7%

Dependency changes

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

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

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

• + Addedemotion-utils@9.1.0(transitive)

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

• - Removed@emotion/types@0.2.3(transitive)

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

• - Removedemotion-utils@9.0.1(transitive)

• Updated@emotion/serialize@^0.5.0

• Updated@emotion/types@^0.5.0

• Updated@emotion/utils@^0.5.0

• Updatedemotion-utils@9.1.0