styled-components - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/constructors/element.js

@@ -22,3 +22,3 @@ 'use strict';
     return (0, _react.createElement)(tagName, Object.assign({}, props, {
-      className: [props.className, styleRoot.injectStyles([props])].join(' ')
+      className: props.className ? [props.className] : [].concat(styleRoot.injectStyles([props])).join(' ')
     }));
@@ -25,0 +25,0 @@ };

lib/constructors/test/toggle.test.js

@@ -14,6 +14,2 @@ 'use strict';
 describe('toggle', function () {
-  var defaultRule = 'default: rule';
-  var optionA = 'option: a';
-  var optionB = 'option: b';
-
   it('should handle an empty case', function () {
@@ -28,7 +24,7 @@ var namespace = (0, _toggle2.default)('namespace', {});
     var namespace = (0, _toggle2.default)('namespace', {
-      default: defaultRule
+      default: 'default: rule'
     });
-    (0, _expect2.default)(namespace()).toEqual([defaultRule]);
-    (0, _expect2.default)(namespace('')).toEqual([defaultRule]);
-    (0, _expect2.default)(namespace(' ')).toEqual([defaultRule]);
+    (0, _expect2.default)(namespace()).toEqual(['default: rule;']);
+    (0, _expect2.default)(namespace('')).toEqual(['default: rule;']);
+    (0, _expect2.default)(namespace(' ')).toEqual(['default: rule;']);
   });
@@ -38,11 +34,11 @@
     var namespace = (0, _toggle2.default)('namespace', {
-      default: defaultRule,
-      a: optionA,
-      b: optionB
+      default: 'default: rule',
+      a: 'option: a',
+      b: 'option: b'
     });
-    (0, _expect2.default)(namespace()).toEqual([defaultRule]);
-    (0, _expect2.default)(namespace('a')).toEqual([defaultRule, optionA]);
-    (0, _expect2.default)(namespace('a b')).toEqual([defaultRule, optionA, optionB]);
-    (0, _expect2.default)(namespace('b a')).toEqual([defaultRule, optionB, optionA]);
-    (0, _expect2.default)(namespace('b')).toEqual([defaultRule, optionB]);
+    (0, _expect2.default)(namespace()).toEqual(['default: rule;']);
+    (0, _expect2.default)(namespace('a')).toEqual(['default: rule;', 'option: a;']);
+    (0, _expect2.default)(namespace('a b')).toEqual(['default: rule;', 'option: a;', 'option: b;']);
+    (0, _expect2.default)(namespace('b a')).toEqual(['default: rule;', 'option: b;', 'option: a;']);
+    (0, _expect2.default)(namespace('b')).toEqual(['default: rule;', 'option: b;']);
   });
@@ -52,10 +48,10 @@
     var namespace = (0, _toggle2.default)('namespace', {
-      a: optionA,
-      b: optionB
+      a: 'option: a',
+      b: 'option: b'
     });
     (0, _expect2.default)(namespace()).toEqual([]);
-    (0, _expect2.default)(namespace('a')).toEqual([optionA]);
-    (0, _expect2.default)(namespace('a b')).toEqual([optionA, optionB]);
-    (0, _expect2.default)(namespace('b a')).toEqual([optionB, optionA]);
-    (0, _expect2.default)(namespace('b')).toEqual([optionB]);
+    (0, _expect2.default)(namespace('a')).toEqual(['option: a;']);
+    (0, _expect2.default)(namespace('a b')).toEqual(['option: a;', 'option: b;']);
+    (0, _expect2.default)(namespace('b a')).toEqual(['option: b;', 'option: a;']);
+    (0, _expect2.default)(namespace('b')).toEqual(['option: b;']);
   });
@@ -65,3 +61,3 @@
     var namespace = (0, _toggle2.default)('namespace', {
-      a: optionA
+      a: 'option: a'
     });
@@ -75,4 +71,4 @@ (0, _expect2.default)(function () {
     var namespace = (0, _toggle2.default)('namespace', {
-      default: defaultRule,
-      a: optionA
+      default: 'default: rule',
+      a: 'option: a'
     });
@@ -79,0 +75,0 @@ (0, _expect2.default)(function () {

lib/constructors/toggle.js

@@ -27,3 +27,5 @@ 'use strict';
       return v in options ? options[v] : throwUnknown(v);
-    }))).concat('').join('; ');
+    }))).map(function (v) {
+      return v + ';';
+    });
   };
@@ -30,0 +32,0 @@ };

lib/models/ComponentStyle.js

@@ -27,2 +27,6 @@ 'use strict';
 
+var _toEmoji = require('../utils/toEmoji');
+
+var _toEmoji2 = _interopRequireDefault(_toEmoji);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -60,5 +64,6 @@
       var flatCSS = (0, _flatten2.default)(this.rules, executionContext).join('');
-      var hash = '_' + (0, _hash2.default)(flatCSS);
+      var hash = (0, _hash2.default)(flatCSS);
+      var emojis = (0, _toEmoji2.default)(hash);
       if (!inserted[hash]) {
-        var root = (0, _parse2.default)('.' + hash + ' { ' + flatCSS + ' }');
+        var root = (0, _parse2.default)('.' + emojis + ' { ' + flatCSS + ' }');
         (0, _postcssNested2.default)(root);
@@ -69,3 +74,3 @@ var result = root.toResult().css;
       }
-      return hash;
+      return emojis;
     }
@@ -72,0 +77,0 @@ }]);

package.json

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

src/constructors/element.js

@@ -14,3 +14,3 @@ // @flow
     createElement(tagName, Object.assign({}, props, {
-      className: [props.className, styleRoot.injectStyles([props])].join(' '),
+      className: props.className ? [props.className]: [].concat(styleRoot.injectStyles([props])).join(' '),
     }))
@@ -17,0 +17,0 @@ )

src/constructors/test/toggle.test.js

@@ -5,6 +5,2 @@ import expect from 'expect'
 describe('toggle', () => {
-  const defaultRule = 'default: rule'
-  const optionA = 'option: a'
-  const optionB = 'option: b'
-
   it('should handle an empty case', () => {
@@ -19,7 +15,7 @@ const namespace = toggle('namespace', {})
     const namespace = toggle('namespace', {
-      default: defaultRule,
+      default: 'default: rule',
     })
-    expect(namespace()).toEqual([defaultRule])
-    expect(namespace('')).toEqual([defaultRule])
-    expect(namespace(' ')).toEqual([defaultRule])
+    expect(namespace()).toEqual(['default: rule;'])
+    expect(namespace('')).toEqual(['default: rule;'])
+    expect(namespace(' ')).toEqual(['default: rule;'])
   })
@@ -29,11 +25,11 @@
     const namespace = toggle('namespace', {
-      default: defaultRule,
-      a: optionA,
-      b: optionB,
+      default: 'default: rule',
+      a: 'option: a',
+      b: 'option: b',
     })
-    expect(namespace()).toEqual([defaultRule])
-    expect(namespace('a')).toEqual([defaultRule, optionA])
-    expect(namespace('a b')).toEqual([defaultRule, optionA, optionB])
-    expect(namespace('b a')).toEqual([defaultRule, optionB, optionA])
-    expect(namespace('b')).toEqual([defaultRule, optionB])
+    expect(namespace()).toEqual(['default: rule;'])
+    expect(namespace('a')).toEqual(['default: rule;', 'option: a;'])
+    expect(namespace('a b')).toEqual(['default: rule;', 'option: a;', 'option: b;'])
+    expect(namespace('b a')).toEqual(['default: rule;', 'option: b;', 'option: a;'])
+    expect(namespace('b')).toEqual(['default: rule;', 'option: b;'])
   })
@@ -43,10 +39,10 @@
     const namespace = toggle('namespace', {
-      a: optionA,
-      b: optionB,
+      a: 'option: a',
+      b: 'option: b',
     })
     expect(namespace()).toEqual([])
-    expect(namespace('a')).toEqual([optionA])
-    expect(namespace('a b')).toEqual([optionA, optionB])
-    expect(namespace('b a')).toEqual([optionB, optionA])
-    expect(namespace('b')).toEqual([optionB])
+    expect(namespace('a')).toEqual(['option: a;'])
+    expect(namespace('a b')).toEqual(['option: a;', 'option: b;'])
+    expect(namespace('b a')).toEqual(['option: b;', 'option: a;'])
+    expect(namespace('b')).toEqual(['option: b;'])
   })
@@ -56,3 +52,3 @@
     const namespace = toggle('namespace', {
-      a: optionA,
+      a: 'option: a',
     })
@@ -64,4 +60,4 @@ expect(() => namespace('b')).toThrow("namespace: Unknown value 'b'. Valid values are:\na")
     const namespace = toggle('namespace', {
-      default: defaultRule,
-      a: optionA,
+      default: 'default: rule',
+      a: 'option: a',
     })
@@ -68,0 +64,0 @@ expect(() => namespace('b')).toThrow("namespace: Unknown value 'b'. Valid values are:\na")

src/constructors/toggle.js

@@ -30,3 +30,3 @@ // @flow
     .concat(...values.map(v => (v in options) ? options[v] : throwUnknown(v)))
-    .concat('').join('; ')
+    .map(v => `${v};`)
 }

src/models/ComponentStyle.js

@@ -9,2 +9,3 @@ // @flow
 import postcssNested from '../vendor/postcss-nested'
+import toEmoji from '../utils/toEmoji'
 
@@ -34,5 +35,6 @@ const styleSheet = new StyleSheet()
     const flatCSS = flatten(this.rules, executionContext).join('')
-    const hash = `_${hashStr(flatCSS)}`
+    const hash = hashStr(flatCSS)
+    const emojis = toEmoji(hash)
     if (!inserted[hash]) {
-      const root = parse(`.${hash} { ${flatCSS} }`)
+      const root = parse(`.${emojis} { ${flatCSS} }`)
       postcssNested(root)
@@ -43,4 +45,4 @@ const result = root.toResult().css
     }
-    return hash
+    return emojis
   }
 }

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

425256

increased by1.43%

Number of package files

92

increased by2.22%

Lines of code

11128

increased by0.7%

No dependency changes