styled-components - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

lib/constructors/css.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 
-var _interleave = require("../utils/interleave");
+var _interleave = require('../utils/interleave');
 
 var _interleave2 = _interopRequireDefault(_interleave);
 
-var _flatten = require("../utils/flatten");
+var _flatten = require('../utils/flatten');
 
@@ -26,2 +26,2 @@ var _flatten2 = _interopRequireDefault(_flatten);
 
-module.exports = exports["default"];
+module.exports = exports['default'];

lib/constructors/element.js

@@ -19,3 +19,3 @@ 'use strict';
   /* Return a stateless functional component that simply renders
-  * a HTML element with our styles applied. */
+   * a HTML element with our styles applied. */
   var component = function component(props) {
@@ -22,0 +22,0 @@ return (0, _react.createElement)(tagName, Object.assign({}, props, {

lib/constructors/toggle.js

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

lib/models/ComponentStyle.js

@@ -9,10 +9,2 @@ 'use strict';
 
-var _parse = require('../vendor/postcss/parse');
-
-var _parse2 = _interopRequireDefault(_parse);
-
-var _postcssNested = require('../vendor/postcss-nested');
-
-var _postcssNested2 = _interopRequireDefault(_postcssNested);
-
 var _hash = require('glamor/lib/hash');
@@ -28,2 +20,10 @@
 
+var _parse = require('../vendor/postcss/parse');
+
+var _parse2 = _interopRequireDefault(_parse);
+
+var _postcssNested = require('../vendor/postcss-nested');
+
+var _postcssNested2 = _interopRequireDefault(_postcssNested);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,2 +41,3 @@
  */
+
 var ComponentStyle = function () {
@@ -60,3 +61,3 @@ function ComponentStyle(rules) {
     value: function injectStyles(executionContext) {
-      var flatCSS = (0, _flatten2.default)(this.rules, executionContext).join("");
+      var flatCSS = (0, _flatten2.default)(this.rules, executionContext).join('');
       var hash = '_' + (0, _hash2.default)(flatCSS);
@@ -63,0 +64,0 @@ if (!inserted[hash]) {

lib/utils/flatten.js

@@ -21,3 +21,3 @@ 'use strict';
     return (0, _hyphenateStyleName2.default)(k) + ': ' + obj[k] + ';';
-  }).join(" ");
+  }).join(' ');
 };
@@ -32,3 +32,5 @@
     /* Either execute or defer the function */
-    if (typeof chunk === 'function') return executionContext ? array.concat.apply(array, _toConsumableArray(flatten([chunk.apply(undefined, _toConsumableArray(executionContext))], executionContext))) : array.concat(chunk);
+    if (typeof chunk === 'function') {
+      return executionContext ? array.concat.apply(array, _toConsumableArray(flatten([chunk.apply(undefined, _toConsumableArray(executionContext))], executionContext))) : array.concat(chunk);
+    }
     /* Handle objects */
@@ -35,0 +37,0 @@ return array.concat((typeof chunk === 'undefined' ? 'undefined' : _typeof(chunk)) === 'object' ? objToCss(chunk) : chunk.toString());

lib/utils/test/flatten.test.js

@@ -33,3 +33,3 @@ 'use strict';
   it('flattens subarrays', function () {
-    (0, _expect2.default)((0, _flatten2.default)([1, 2, [3, 4, 5], "come:on;", "lets:ride;"])).toEqual(['1', '2', '3', '4', '5', 'come:on;', 'lets:ride;']);
+    (0, _expect2.default)((0, _flatten2.default)([1, 2, [3, 4, 5], 'come:on;', 'lets:ride;'])).toEqual(['1', '2', '3', '4', '5', 'come:on;', 'lets:ride;']);
   });
@@ -40,3 +40,3 @@ it('defers functions', function () {
     };
-    var funcWFunc = function funcWFunc(bool) {
+    var funcWFunc = function funcWFunc() {
       return ['static', function (subfunc) {
@@ -63,3 +63,3 @@ return subfunc ? 'bar' : 'baz';
   it('recursively calls functions', function () {
-    var func = function func(bool) {
+    var func = function func() {
       return ['static', function (subfunc) {
@@ -66,0 +66,0 @@ return subfunc ? 'bar' : 'baz';

lib/vendor/postcss-nested/index.js

@@ -6,13 +6,2 @@ 'use strict';
 });
-
-exports.default = function (node) {
-  node.each(function (child) {
-    if (child.type === 'rule') {
-      processRule(child, bubble);
-    } else if (child.type === 'atrule') {
-      process(child);
-    }
-  });
-};
-
 function selectors(parent, node) {
@@ -88,3 +77,13 @@ var result = [];
 
-;
+var process = function process(node) {
+  node.each(function (child) {
+    if (child.type === 'rule') {
+      processRule(child, bubble);
+    } else if (child.type === 'atrule') {
+      process(child);
+    }
+  });
+};
+
+exports.default = process;
 module.exports = exports['default'];

package.json

 {
   "name": "styled-components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
@@ -34,3 +34,4 @@ "main": "lib/index.js",
     "lodash": "^4.15.0",
-    "react": "^15.3.0"
+    "react": "^15.3.0",
+    "supports-color": "^3.1.2"
   },
@@ -37,0 +38,0 @@ "devDependencies": {

src/constructors/css.js

 // @flow
-import interleave from "../utils/interleave"
-import flatten from "../utils/flatten"
-import type {Interpolation,RuleSet} from '../types'
+import interleave from '../utils/interleave'
+import flatten from '../utils/flatten'
+import type { Interpolation, RuleSet } from '../types'
 
-export default (strings: Array<string>, ...interpolations: Array<Interpolation>) : RuleSet => (
+export default (strings: Array<string>, ...interpolations: Array<Interpolation>): RuleSet => (
   flatten(interleave(strings, interpolations))
 )

src/constructors/element.js

@@ -11,8 +11,8 @@ // @flow
   /* Return a stateless functional component that simply renders
-  * a HTML element with our styles applied. */
-  const component = (props) => {
-    return createElement(tagName, Object.assign({}, props, {
+   * a HTML element with our styles applied. */
+  const component = (props) => (
+    createElement(tagName, Object.assign({}, props, {
       className: [props.className, styleRoot.injectStyles([props])].join(' '),
     }))
-  }
+  )
   component.displayName = `Styled(${tagName.displayName || tagName})`
@@ -19,0 +19,0 @@ return component

src/constructors/test/toggle.test.js

@@ -5,5 +5,5 @@ import expect from 'expect'
 describe('toggle', () => {
-  const defaultRule = `default: rule`
-  const optionA = `option: a`
-  const optionB = `option: b`
+  const defaultRule = 'default: rule'
+  const optionA = 'option: a'
+  const optionB = 'option: b'
 
@@ -10,0 +10,0 @@ it('should handle an empty case', () => {

src/constructors/toggle.js

 // @flow
-import type {RuleSet, Interpolation} from "../types"
+import type { RuleSet, Interpolation } from '../types'
 
@@ -30,2 +30,3 @@ /*
     .concat(...values.map(v => (v in options) ? options[v] : throwUnknown(v)))
+    .concat('').join('; ')
 }

src/index.js

@@ -11,5 +11,5 @@ // @flow
 export {
-  css, toggle
+  css, toggle,
 }
 
 export default styled

src/models/ComponentStyle.js

 // @flow
+import hashStr from 'glamor/lib/hash'
+import { StyleSheet } from 'glamor/lib/sheet'
+
+import type { RuleSet } from '../types'
+import flatten from '../utils/flatten'
 import parse from '../vendor/postcss/parse'
 import postcssNested from '../vendor/postcss-nested'
-import hashStr from 'glamor/lib/hash'
-import {StyleSheet} from 'glamor/lib/sheet'
+
 const styleSheet = new StyleSheet()
@@ -10,5 +14,2 @@ styleSheet.inject()
 
-import type {RuleSet} from "../types"
-import flatten from "../utils/flatten"
-
 /*
@@ -19,3 +20,3 @@ ComponentStyle is all the CSS-specific stuff, not
 export default class ComponentStyle {
-  rules: RuleSet;
+  rules: RuleSet
 
@@ -33,8 +34,8 @@ constructor(rules: RuleSet) {
   injectStyles(executionContext: Array<any>) {
-    const flatCSS = flatten(this.rules, executionContext).join("")
-    const hash = '_' + hashStr(flatCSS)
+    const flatCSS = flatten(this.rules, executionContext).join('')
+    const hash = `_${hashStr(flatCSS)}`
     if (!inserted[hash]) {
-      const root = parse(`.${hash} { ${ flatCSS } }`);
+      const root = parse(`.${hash} { ${flatCSS} }`)
       postcssNested(root)
-      const result = root.toResult().css;
+      const result = root.toResult().css
       styleSheet.insert(result)
@@ -41,0 +42,0 @@ inserted[hash] = true

src/utils/flatten.js

 // @flow
 import hyphenate from 'fbjs/lib/hyphenateStyleName'
-import type {RuleSet,Interpolation} from '../types'
+import type { RuleSet, Interpolation } from '../types'
 
 export const objToCss = (obj: Object): string => (
-  Object.keys(obj).map(k => `${hyphenate(k)}: ${obj[k]};`).join(" ")
+  Object.keys(obj).map(k => `${hyphenate(k)}: ${obj[k]};`).join(' ')
 )
@@ -16,5 +16,7 @@
     /* Either execute or defer the function */
-    if (typeof chunk === 'function') return executionContext
-      ? array.concat(...flatten([chunk(...executionContext)], executionContext))
-      : array.concat(chunk)
+    if (typeof chunk === 'function') {
+      return executionContext
+        ? array.concat(...flatten([chunk(...executionContext)], executionContext))
+        : array.concat(chunk)
+    }
     /* Handle objects */
@@ -21,0 +23,0 @@ return array.concat(typeof chunk === 'object' ? objToCss(chunk) : chunk.toString())

src/utils/interleave.js

 // @flow
 import type { Interpolation } from '../types'
 
-export default (strings: Array<string>, interpolations: Array<Interpolation>) : Array<Interpolation> => (
+export default (strings: Array<string>, interpolations: Array<Interpolation>) => (
   interpolations.reduce((array, interp, i) => (
@@ -6,0 +6,0 @@ array.concat(interp, strings[i + 1])

src/utils/test/flatten.test.js

@@ -12,3 +12,3 @@ import expect from 'expect'
   it('toStrings everything', () => {
-    expect(flatten([1, true])).toEqual(['1','true'])
+    expect(flatten([1, true])).toEqual(['1', 'true'])
   })
@@ -18,3 +18,3 @@ it('hypenates objects', () => {
       fontSize: '14px',
-      WebkitFilter: 'blur(2px)'
+      WebkitFilter: 'blur(2px)',
     }
@@ -26,7 +26,7 @@ const css = 'font-size: 14px; -webkit-filter: blur(2px);'
   it('flattens subarrays', () => {
-    expect(flatten([1, 2, [3, 4, 5], "come:on;", "lets:ride;"])).toEqual(['1', '2', '3','4','5','come:on;','lets:ride;'])
+    expect(flatten([1, 2, [3, 4, 5], 'come:on;', 'lets:ride;'])).toEqual(['1', '2', '3', '4', '5', 'come:on;', 'lets:ride;'])
   })
   it('defers functions', () => {
     const func = () => 'bar'
-    const funcWFunc = bool => ['static', subfunc => subfunc ? 'bar' : 'baz']
+    const funcWFunc = () => ['static', subfunc => subfunc ? 'bar' : 'baz']
     expect(flatten(['foo', func, 'baz'])).toEqual(['foo', func, 'baz'])
@@ -45,3 +45,3 @@ expect(flatten(['foo', funcWFunc, 'baz'])).toEqual(['foo', funcWFunc, 'baz'])
   it('recursively calls functions', () => {
-    const func = bool => ['static', subfunc => subfunc ? 'bar' : 'baz']
+    const func = () => ['static', subfunc => subfunc ? 'bar' : 'baz']
     expect(flatten(['foo', func], [true])).toEqual(['foo', 'static', 'bar'])
@@ -48,0 +48,0 @@ expect(flatten(['foo', func], [false])).toEqual(['foo', 'static', 'baz'])

src/vendor/postcss-nested/index.js

@@ -70,3 +70,3 @@ function selectors(parent, node) {
 
-export default function (node) {
+const process = node => {
   node.each(function (child) {
@@ -80,1 +80,3 @@ if (child.type === 'rule') {
 };
+
+export default process;

src/vendor/README.md

@@ -8,2 +8,2 @@ Vendored postcss source as of [31ae472](https://github.com/postcss/postcss/tree/31ae4724afbc02e103711fec6517ba485177d827) (latest release 5.2.0)
 * Deleted `previous-map.js` and all references to it because it `require('fs')`ed
-* Delted reference to `postcss` within `postcss-nested` & simply exported the transform function
+* Deleted reference to `postcss` within `postcss-nested` & simply exported the transform function

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

419268

decreased by-0.12%

Dependency count

5

increased by25%

Number of package files

90

decreased by-1.1%

Lines of code

11051

decreased by-0.08%

Dependency changes

• + Addedsupports-color@^3.1.2

• + Addedhas-flag@1.0.0(transitive)

• + Addedsupports-color@3.2.3(transitive)