styled-components - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

lib/models/ComponentStyle.js

@@ -36,3 +36,2 @@ 'use strict';
 var styleSheet = new _sheet.StyleSheet({ speedy: false, maxLength: 40 });
-var generated = {};
 var inserted = {};
@@ -63,21 +62,15 @@
   _createClass(ComponentStyle, [{
-    key: 'generateStyles',
-    value: function generateStyles(executionContext) {
+    key: 'generateAndInjectStyles',
+    value: function generateAndInjectStyles(executionContext) {
       var flatCSS = (0, _flatten2.default)(this.rules, executionContext).join('');
-      var selector = (0, _toEmoji2.default)((0, _hash2.default)(flatCSS));
-      if (!generated[selector]) {
+      var hash = (0, _hash2.default)(flatCSS);
+      if (!inserted[hash]) {
+        var selector = (0, _toEmoji2.default)(hash);
+        inserted[hash] = selector;
         var root = (0, _parse2.default)('.' + selector + ' { ' + flatCSS + ' }');
         (0, _postcssNested2.default)(root);
-        generated[selector] = root.toResult().css;
+        this.insertedRule.appendRule(root.toResult().css);
       }
-      return selector;
+      return inserted[hash];
     }
-  }, {
-    key: 'injectStyles',
-    value: function injectStyles(selector) {
-      if (inserted[selector]) return;
-
-      this.insertedRule.appendRule(generated[selector]);
-      inserted[selector] = true;
-    }
   }]);
@@ -84,0 +77,0 @@

lib/models/StyledComponent.js

@@ -27,8 +27,25 @@ 'use strict';
 
-exports.default = function (tagName, rules) {
+/* eslint-disable react/prefer-stateless-function */
+var AbstractStyledComponent = function (_Component) {
+  _inherits(AbstractStyledComponent, _Component);
+
+  function AbstractStyledComponent() {
+    _classCallCheck(this, AbstractStyledComponent);
+
+    return _possibleConstructorReturn(this, (AbstractStyledComponent.__proto__ || Object.getPrototypeOf(AbstractStyledComponent)).apply(this, arguments));
+  }
+
+  return AbstractStyledComponent;
+}(_react.Component);
+
+var createStyledComponent = function createStyledComponent(tagName, rules) {
+  /* Handle styled(OtherStyledComponent) differently */
+  var isStyledComponent = AbstractStyledComponent.isPrototypeOf(tagName);
+  if (isStyledComponent) return createStyledComponent(tagName.tag, tagName.rules.concat(rules));
+
   var isTag = typeof tagName === 'string';
   var componentStyle = new _ComponentStyle2.default(rules);
 
-  var StyledComponent = function (_Component) {
-    _inherits(StyledComponent, _Component);
+  var StyledComponent = function (_AbstractStyledCompon) {
+    _inherits(StyledComponent, _AbstractStyledCompon);
 
@@ -54,3 +71,3 @@ function StyledComponent() {
       value: function componentWillReceiveProps(newProps, newContext) {
-        var _this2 = this;
+        var _this3 = this;
 
@@ -60,3 +77,3 @@ this.theme = newContext && newContext.theme || {}; // pass through theme
         var updateTheme = function updateTheme(values) {
-          _this2.theme = Object.assign({}, _this2.theme, values);
+          _this3.theme = Object.assign({}, _this3.theme, values);
         };
@@ -66,5 +83,3 @@ /* Execution context is props + theme + updateTheme */
         /* Do all the work to generate the CSS because this can modify the theme */
-        this.generatedClassName = componentStyle.generateStyles(executionContext);
-        /* Inject the styles */
-        componentStyle.injectStyles(this.generatedClassName);
+        this.generatedClassName = componentStyle.generateAndInjectStyles(executionContext);
       }
@@ -77,3 +92,3 @@
       value: function render() {
-        var _this3 = this;
+        var _this4 = this;
 
@@ -90,3 +105,3 @@ var _props = this.props;
         }).forEach(function (propName) {
-          propsForElement[propName] = _this3.props[propName];
+          propsForElement[propName] = _this4.props[propName];
         });
@@ -102,4 +117,10 @@ propsForElement.className = [className, this.generatedClassName].filter(function (x) {
     return StyledComponent;
-  }(_react.Component);
+  }(AbstractStyledComponent);
 
+  /* Used for inheritance */
+
+
+  StyledComponent.rules = rules;
+  StyledComponent.tag = tagName;
+
   StyledComponent.displayName = isTag ? 'styled.' + tagName : 'Styled(' + tagName.displayName + ')';
@@ -115,2 +136,3 @@ StyledComponent.childContextTypes = {
 
+exports.default = createStyledComponent;
 module.exports = exports['default'];

package.json

 {
   "name": "styled-components",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:umd:min",
+    "build": "npm run build:lib && npm run build:umd",
     "prebuild:lib": "rm -rf lib/*",
     "build:lib": "babel --out-dir lib src",
     "prebuild:umd": "rm -rf dist/*",
-    "build:umd": "webpack --config webpack.config.js src/index.js dist/styled-components.js",
-    "build:umd:min": "cross-env MINIFY_JS=true webpack --config webpack.config.js src/index.js dist/styled-components.min.js",
+    "build:umd": "webpack --config webpack.config.babel.js",
     "build:watch": "npm run build:lib -- --watch",
-    "test": "mocha \"./src/**/*.test.js\" --require babel-core/register",
+    "test": "mocha \"./src/**/*.test.js\" --require babel-core/register --timeout 5000",
     "test:watch": "npm run test -- --watch",
@@ -53,3 +52,3 @@ "flow": "flow; test $? -eq 0 -o $? -eq 2",
     "babel-preset-react": "^6.11.1",
-    "cross-env": "^3.1.1",
+    "enzyme": "^2.4.1",
     "eslint": "^3.5.0",
@@ -66,2 +65,4 @@ "eslint-config-airbnb": "^11.1.0",
     "proxyquire": "^1.7.10",
+    "react-addons-test-utils": "^15.3.2",
+    "react-dom": "^15.3.2",
     "webpack": "^1.13.2"
@@ -68,0 +69,0 @@ },

src/models/ComponentStyle.js

@@ -12,3 +12,2 @@ // @flow
 const styleSheet = new StyleSheet({ speedy: false, maxLength: 40 })
-const generated = {}
 const inserted = {}
@@ -36,19 +35,15 @@
    * */
-  generateStyles(executionContext: Object) {
+  generateAndInjectStyles(executionContext: Object) {
     const flatCSS = flatten(this.rules, executionContext).join('')
-    const selector = toEmoji(hashStr(flatCSS))
-    if (!generated[selector]) {
+    const hash = hashStr(flatCSS)
+    if (!inserted[hash]) {
+      const selector = toEmoji(hash)
+      inserted[hash] = selector
       const root = parse(`.${selector} { ${flatCSS} }`)
       postcssNested(root)
-      generated[selector] = root.toResult().css
+      this.insertedRule.appendRule(root.toResult().css)
     }
-    return selector
+    return inserted[hash]
   }
 
-  injectStyles(selector: string) {
-    if (inserted[selector]) return
-
-    this.insertedRule.appendRule(generated[selector])
-    inserted[selector] = true
-  }
 }

src/models/StyledComponent.js

@@ -7,9 +7,17 @@ // @flow
 
-import type RuleSet from '../utils/flatten'
+import type RuleSet from '../types'
 
-export default (tagName: any, rules: RuleSet) => {
+/* eslint-disable react/prefer-stateless-function */
+class AbstractStyledComponent extends Component {
+}
+
+const createStyledComponent = (tagName: any, rules: RuleSet) => {
+  /* Handle styled(OtherStyledComponent) differently */
+  const isStyledComponent = AbstractStyledComponent.isPrototypeOf(tagName)
+  if (isStyledComponent) return createStyledComponent(tagName.tag, tagName.rules.concat(rules))
+
   const isTag = typeof tagName === 'string'
   const componentStyle = new ComponentStyle(rules)
 
-  class StyledComponent extends Component {
+  class StyledComponent extends AbstractStyledComponent {
     theme: Object
@@ -35,5 +43,3 @@ generatedClassName: string
       /* Do all the work to generate the CSS because this can modify the theme */
-      this.generatedClassName = componentStyle.generateStyles(executionContext)
-      /* Inject the styles */
-      componentStyle.injectStyles(this.generatedClassName)
+      this.generatedClassName = componentStyle.generateAndInjectStyles(executionContext)
     }
@@ -58,2 +64,6 @@
 
+  /* Used for inheritance */
+  StyledComponent.rules = rules
+  StyledComponent.tag = tagName
+
   StyledComponent.displayName = isTag ? `styled.${tagName}` : `Styled(${tagName.displayName})`
@@ -68,1 +78,3 @@ StyledComponent.childContextTypes = {
 }
+
+export default createStyledComponent

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Number of package files

111

increased by2.78%

Worsened metrics

Total package byte prevSize

1144386

decreased by-11.36%

Dev dependency count

22

increased by10%

Lines of code

26111

decreased by-10.47%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

3

increased byInfinity%

No dependency changes