styled-components - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2-0

CHANGELOG.md

@@ -13,2 +13,4 @@ # Change Log
 
+- Modify `StyleNativeComponent.js` so that `generateAndInjectStyles` is called outside of `render`, thanks to [@sheepsteak](https://github.com/sheepsteak). (see [#171](https://github.com/styled-components/styled-components/pull/171))
+
 ## [v1.1.1]
@@ -15,0 +17,0 @@

lib/models/StyledComponent.js

@@ -106,6 +106,6 @@ 'use strict';
 
-          var _props = this.props,
-              className = _props.className,
-              children = _props.children,
-              innerRef = _props.innerRef;
+          var _props = this.props;
+          var className = _props.className;
+          var children = _props.children;
+          var innerRef = _props.innerRef;
           var generatedClassName = this.state.generatedClassName;
@@ -112,0 +112,0 @@

lib/models/StyledNativeComponent.js

@@ -73,7 +73,17 @@ 'use strict';
             // This will be called once immediately
-            _this2.setState({ theme: theme });
+            var generatedStyles = _this2.generateAndInjectStyles(theme, _this2.props);
+            _this2.setState({ generatedStyles: generatedStyles, theme: theme });
           });
+        } else {
+          var generatedStyles = this.generateAndInjectStyles(this.props.theme || {}, this.props);
+          this.setState({ generatedStyles: generatedStyles });
         }
       }
     }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        var generatedStyles = this.generateAndInjectStyles(this.state.theme || this.props.theme, nextProps);
+        this.setState({ generatedStyles: generatedStyles });
+      }
+    }, {
       key: 'componentWillUnmount',
@@ -96,11 +106,9 @@ value: function componentWillUnmount() {
       value: function render() {
-        var _props = this.props,
-            style = _props.style,
-            children = _props.children,
-            innerRef = _props.innerRef;
+        var _props = this.props;
+        var style = _props.style;
+        var children = _props.children;
+        var innerRef = _props.innerRef;
+        var generatedStyles = this.state.generatedStyles;
 
-        var theme = this.state.theme || this.props.theme || {};
 
-        var generatedStyles = this.generateAndInjectStyles(theme, this.props);
-
         var propsForElement = _extends({}, this.props);
@@ -107,0 +115,0 @@ propsForElement.style = [generatedStyles, style];

lib/vendor/glamor/sheet.js

@@ -75,8 +75,9 @@ 'use strict';
   function StyleSheet() {
-    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref$speedy = _ref.speedy,
-        speedy = _ref$speedy === undefined ? !isDev && !isTest : _ref$speedy,
-        _ref$maxLength = _ref.maxLength,
-        maxLength = _ref$maxLength === undefined ? isBrowser && oldIE ? 4000 : 65000 : _ref$maxLength;
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
+    var _ref$speedy = _ref.speedy;
+    var speedy = _ref$speedy === undefined ? !isDev && !isTest : _ref$speedy;
+    var _ref$maxLength = _ref.maxLength;
+    var maxLength = _ref$maxLength === undefined ? isBrowser && oldIE ? 4000 : 65000 : _ref$maxLength;
+
     _classCallCheck(this, StyleSheet);
@@ -83,0 +84,0 @@

package.json

 {
   "name": "styled-components",
-  "version": "1.1.1",
+  "version": "1.1.2-0",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/models/AbstractStyledComponent.js

@@ -10,3 +10,4 @@ // @flow
     theme: any,
-    generatedClassName?: string
+    generatedClassName?: string,
+    generatedStyles?: any
   }
@@ -13,0 +14,0 @@ unsubscribe: () => void

src/models/StyledNativeComponent.js

@@ -41,7 +41,22 @@ // @flow
           // This will be called once immediately
-          this.setState({ theme })
+          const generatedStyles = this.generateAndInjectStyles(theme, this.props)
+          this.setState({ generatedStyles, theme })
         })
+      } else {
+        const generatedStyles = this.generateAndInjectStyles(
+          this.props.theme || {},
+          this.props
+        )
+        this.setState({ generatedStyles })
       }
     }
 
+    componentWillReceiveProps(nextProps: any) {
+      const generatedStyles = this.generateAndInjectStyles(
+        this.state.theme || this.props.theme,
+        nextProps
+      )
+      this.setState({ generatedStyles })
+    }
+
     componentWillUnmount() {
@@ -60,6 +75,4 @@ if (this.unsubscribe) {
       const { style, children, innerRef } = this.props
-      const theme = this.state.theme || this.props.theme || {}
+      const { generatedStyles } = this.state
 
-      const generatedStyles = this.generateAndInjectStyles(theme, this.props)
-
       const propsForElement = { ...this.props }
@@ -66,0 +79,0 @@ propsForElement.style = [generatedStyles, style]

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

1

decreased by-75%

Worsened metrics

Total package byte prevSize

1784819

decreased by-0.29%

Lines of code

35194

decreased by-0.43%

Number of low quality alerts

2

increased by100%

No dependency changes