styled-components - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

lib/models/ComponentStyle.js

@@ -36,2 +36,3 @@ 'use strict';
 var styleSheet = new _sheet.StyleSheet({ speedy: false, maxLength: 40 });
+var generated = {};
 var inserted = {};
@@ -55,3 +56,3 @@
    * Parses that with PostCSS then runs PostCSS-Nested on it
-   * Injects that using Glamor's StyleSheet impl.
+   * Returns the hash to be injected on render()
    * */
@@ -61,17 +62,22 @@
   _createClass(ComponentStyle, [{
-    key: 'injectStyles',
-    value: function injectStyles(executionContext) {
+    key: 'generateStyles',
+    value: function generateStyles(executionContext) {
       if (!styleSheet.injected) styleSheet.inject();
       var flatCSS = (0, _flatten2.default)(this.rules, executionContext).join('');
-      var hash = (0, _hash2.default)(flatCSS);
-      var emojis = (0, _toEmoji2.default)(hash);
-      if (!inserted[hash]) {
+      var emojis = (0, _toEmoji2.default)((0, _hash2.default)(flatCSS));
+      if (!generated[emojis]) {
         var root = (0, _parse2.default)('.' + emojis + ' { ' + flatCSS + ' }');
         (0, _postcssNested2.default)(root);
-        var result = root.toResult().css;
-        styleSheet.insert(result);
-        inserted[hash] = true;
+        generated[emojis] = root.toResult().css;
       }
       return emojis;
     }
+  }, {
+    key: 'injectStyles',
+    value: function injectStyles(emojis) {
+      if (inserted[emojis]) return;
+
+      styleSheet.insert(generated[emojis]);
+      inserted[emojis] = true;
+    }
   }]);
@@ -78,0 +84,0 @@

lib/models/StyledComponent.js

@@ -55,3 +55,3 @@ 'use strict';
 
-        this.theme = newContext ? newContext.theme : {}; // pass through theme
+        this.theme = newContext && newContext.theme || {}; // pass through theme
         var theme = Object.assign({}, this.theme); // copy to pass to styles so no side effects
@@ -63,3 +63,4 @@ var updateTheme = function updateTheme(values) {
         var executionContext = Object.assign({}, newProps, { theme: theme, updateTheme: updateTheme });
-        this.generatedClassName = componentStyle.injectStyles(executionContext);
+        /* Do all the work to generate the CSS because this can modify the theme */
+        this.generatedClassName = componentStyle.generateStyles(executionContext);
       }
@@ -92,2 +93,17 @@
       }
+
+      /* Once rendered, inject the CSS. This means that nested elements' CSS
+      * is injected first, then the wrapping elements. This allows a StyleComponent
+      * to wrap another. */
+
+    }, {
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.componentDidUpdate();
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate() {
+        componentStyle.injectStyles(this.generatedClassName);
+      }
     }]);
@@ -94,0 +110,0 @@

lib/utils/test/validAttr.test.js

@@ -28,2 +28,3 @@ 'use strict';
     (0, _expect2.default)((0, _validAttr2.default)('onFocusOut')).toEqual(true);
+    (0, _expect2.default)((0, _validAttr2.default)('className')).toEqual(true);
   });
@@ -30,0 +31,0 @@ it('should allow all the html props', function () {

lib/utils/validAttr.js

@@ -35,3 +35,4 @@ 'use strict';
   onFocusIn: true,
-  onFocusOut: true
+  onFocusOut: true,
+  className: true
 };
@@ -38,0 +39,0 @@

package.json

 {
   "name": "styled-components",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/models/ComponentStyle.js

@@ -12,2 +12,3 @@ // @flow
 const styleSheet = new StyleSheet({ speedy: false, maxLength: 40 })
+const generated = {}
 const inserted = {}
@@ -30,18 +31,22 @@
    * Parses that with PostCSS then runs PostCSS-Nested on it
-   * Injects that using Glamor's StyleSheet impl.
+   * Returns the hash to be injected on render()
    * */
-  injectStyles(executionContext: Object) {
+  generateStyles(executionContext: Object) {
     if (!styleSheet.injected) styleSheet.inject()
     const flatCSS = flatten(this.rules, executionContext).join('')
-    const hash = hashStr(flatCSS)
-    const emojis = toEmoji(hash)
-    if (!inserted[hash]) {
+    const emojis = toEmoji(hashStr(flatCSS))
+    if (!generated[emojis]) {
       const root = parse(`.${emojis} { ${flatCSS} }`)
       postcssNested(root)
-      const result = root.toResult().css
-      styleSheet.insert(result)
-      inserted[hash] = true
+      generated[emojis] = root.toResult().css
     }
     return emojis
   }
+
+  injectStyles(emojis: string) {
+    if (inserted[emojis]) return
+
+    styleSheet.insert(generated[emojis])
+    inserted[emojis] = true
+  }
 }

src/models/StyledComponent.js

@@ -26,3 +26,3 @@ // @flow
     componentWillReceiveProps(newProps: Object, newContext: ?any) {
-      this.theme = newContext ? newContext.theme : {} // pass through theme
+      this.theme = (newContext && newContext.theme) || {} // pass through theme
       const theme = Object.assign({}, this.theme) // copy to pass to styles so no side effects
@@ -34,3 +34,4 @@ const updateTheme = values => {
       const executionContext = Object.assign({}, newProps, { theme, updateTheme })
-      this.generatedClassName = componentStyle.injectStyles(executionContext)
+      /* Do all the work to generate the CSS because this can modify the theme */
+      this.generatedClassName = componentStyle.generateStyles(executionContext)
     }
@@ -53,2 +54,12 @@
     }
+
+    /* Once rendered, inject the CSS. This means that nested elements' CSS
+    * is injected first, then the wrapping elements. This allows a StyleComponent
+    * to wrap another. */
+    componentDidMount() {
+      this.componentDidUpdate()
+    }
+    componentDidUpdate() {
+      componentStyle.injectStyles(this.generatedClassName)
+    }
   }
@@ -55,0 +66,0 @@

src/utils/test/validAttr.test.js

@@ -19,2 +19,3 @@ import expect from 'expect'
     expect(validAttr('onFocusOut')).toEqual(true)
+    expect(validAttr('className')).toEqual(true)
   })
@@ -21,0 +22,0 @@ it('should allow all the html props', () => {

src/utils/validAttr.js

@@ -23,2 +23,3 @@ /* Trying to avoid the unknown-prop errors on styled components
   onFocusOut: true,
+  className: true,
 }
@@ -25,0 +26,0 @@

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

495788

increased by0.28%

Lines of code

12355

increased by0.29%

No dependency changes