styled-components - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

lib/constructors/css.js

@@ -13,2 +13,6 @@ "use strict";
 
+var _isPlainObject = require("lodash/isPlainObject");
+
+var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
+
 var _rule = require("./rule");
@@ -63,2 +67,7 @@
       if (strings[i + 1]) linesAndInterpolations.push.apply(linesAndInterpolations, _toConsumableArray(strings[i + 1].split('\n')));
+      /* CSS-in-JS */
+    } else if ((0, _isPlainObject2.default)(interp)) {
+      Object.keys(interp).forEach(function (prop) {
+        linesAndInterpolations.push(prop + ": " + interp[prop] + ";");
+      });
     } else {
@@ -65,0 +74,0 @@ /* Simple (value) interpolation. Concatenate and move on. */

lib/constructors/styled.js

@@ -7,2 +7,4 @@ "use strict";
 
+var _templateObject = _taggedTemplateLiteral(["", ""], ["", ""]);
+
 var _css = require("./css");
@@ -16,6 +18,15 @@
 
+var _isPlainObject = require("lodash/isPlainObject");
+
+var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var styled = function styled(tagName) {
   return function () {
+    if ((0, _isPlainObject2.default)(arguments.length <= 0 ? undefined : arguments[0])) {
+      return (0, _Element2.default)(tagName, (0, _css2.default)(_templateObject, arguments.length <= 0 ? undefined : arguments[0]));
+    }
     return (0, _Element2.default)(tagName, _css2.default.apply(undefined, arguments));
@@ -22,0 +33,0 @@ };

lib/constructors/test/css.test.js

@@ -18,4 +18,5 @@ 'use strict';
     _templateObject15 = _taggedTemplateLiteral(['\n        animation: fade-in 1s both;\n        + * {\n          animation: fade-in 1s 1s both;\n        }\n        ~ * {\n          animation: fade-in 1s 2s both;\n        }\n      '], ['\n        animation: fade-in 1s both;\n        + * {\n          animation: fade-in 1s 1s both;\n        }\n        ~ * {\n          animation: fade-in 1s 2s both;\n        }\n      ']),
-    _templateObject16 = _taggedTemplateLiteral(['\n        background: red;\n        @media (max-width: 500px) {\n          background: blue;\n        }\n      '], ['\n        background: red;\n        @media (max-width: 500px) {\n          background: blue;\n        }\n      ']),
-    _templateObject17 = _taggedTemplateLiteral(['\n        background: red;\n        @media screen and (max-width: 500px) and (min-width: 1000px) {\n          background: blue;\n        }\n      '], ['\n        background: red;\n        @media screen and (max-width: 500px) and (min-width: 1000px) {\n          background: blue;\n        }\n      ']);
+    _templateObject16 = _taggedTemplateLiteral(['', ''], ['', '']),
+    _templateObject17 = _taggedTemplateLiteral(['\n        background: red;\n        @media (max-width: 500px) {\n          background: blue;\n        }\n      '], ['\n        background: red;\n        @media (max-width: 500px) {\n          background: blue;\n        }\n      ']),
+    _templateObject18 = _taggedTemplateLiteral(['\n        background: red;\n        @media screen and (max-width: 500px) and (min-width: 1000px) {\n          background: blue;\n        }\n      '], ['\n        background: red;\n        @media screen and (max-width: 500px) and (min-width: 1000px) {\n          background: blue;\n        }\n      ']);
 
@@ -26,5 +27,5 @@ var _expect = require('expect');
 
-var _css = require('../css');
+var _css2 = require('../css');
 
-var _css2 = _interopRequireDefault(_css);
+var _css3 = _interopRequireDefault(_css2);
 
@@ -49,2 +50,4 @@ var _concat = require('../concat');
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -55,5 +58,5 @@
     it('should be ok with nonce inputs', function () {
-      (0, _expect2.default)((0, _css2.default)(_templateObject).rules).toEqual([]);
-      (0, _expect2.default)((0, _css2.default)(_templateObject2).rules).toEqual([]);
-      (0, _expect2.default)((0, _css2.default)(_templateObject3).rules).toEqual([]);
+      (0, _expect2.default)((0, _css3.default)(_templateObject).rules).toEqual([]);
+      (0, _expect2.default)((0, _css3.default)(_templateObject2).rules).toEqual([]);
+      (0, _expect2.default)((0, _css3.default)(_templateObject3).rules).toEqual([]);
     });
@@ -63,4 +66,4 @@
       var expected = (0, _concat2.default)((0, _rule2.default)('background', 'red'));
-      (0, _expect2.default)((0, _css2.default)(_templateObject4)).toEqual(expected);
-      (0, _expect2.default)((0, _css2.default)(_templateObject5)).toEqual(expected);
+      (0, _expect2.default)((0, _css3.default)(_templateObject4)).toEqual(expected);
+      (0, _expect2.default)((0, _css3.default)(_templateObject5)).toEqual(expected);
     });
@@ -70,4 +73,4 @@
       var expected = (0, _concat2.default)((0, _rule2.default)('flexGrow', '1'));
-      (0, _expect2.default)((0, _css2.default)(_templateObject6)).toEqual(expected);
-      (0, _expect2.default)((0, _css2.default)(_templateObject7)).toEqual(expected);
+      (0, _expect2.default)((0, _css3.default)(_templateObject6)).toEqual(expected);
+      (0, _expect2.default)((0, _css3.default)(_templateObject7)).toEqual(expected);
     });
@@ -77,3 +80,3 @@
       var expected = (0, _concat2.default)((0, _rule2.default)('flexGrow', '1'), (0, _rule2.default)('flexShrink', '0'));
-      (0, _expect2.default)((0, _css2.default)(_templateObject8)).toEqual(expected);
+      (0, _expect2.default)((0, _css3.default)(_templateObject8)).toEqual(expected);
     });
@@ -83,3 +86,3 @@
       var expected = (0, _concat2.default)((0, _rule2.default)('flexGrow', '1'), (0, _rule2.default)('flexShrink', '0'), (0, _rule2.default)('flexGrow', '0'));
-      (0, _expect2.default)((0, _css2.default)(_templateObject9)).toEqual(expected);
+      (0, _expect2.default)((0, _css3.default)(_templateObject9)).toEqual(expected);
     });
@@ -90,37 +93,69 @@ });
     it('should handle nested tag selectors', function () {
-      (0, _expect2.default)((0, _css2.default)(_templateObject10)).toEqual((0, _concat2.default)((0, _rule2.default)('background', 'red'), (0, _nested2.default)('img', (0, _rule2.default)('background', 'white'))));
+      (0, _expect2.default)((0, _css3.default)(_templateObject10)).toEqual((0, _concat2.default)((0, _rule2.default)('background', 'red'), (0, _nested2.default)('img', (0, _rule2.default)('background', 'white'))));
     });
 
     it('should handle more complex nested tag selectors', function () {
-      (0, _expect2.default)((0, _css2.default)(_templateObject11)).toEqual((0, _concat2.default)((0, _rule2.default)('margin', '0 auto'), (0, _nested2.default)('> img + img, .push-left', (0, _rule2.default)('marginLeft', '1rem'))));
+      (0, _expect2.default)((0, _css3.default)(_templateObject11)).toEqual((0, _concat2.default)((0, _rule2.default)('margin', '0 auto'), (0, _nested2.default)('> img + img, .push-left', (0, _rule2.default)('marginLeft', '1rem'))));
     });
 
     it('should pass through pseduo selectors', function () {
-      (0, _expect2.default)((0, _css2.default)(_templateObject12)).toEqual((0, _concat2.default)((0, _rule2.default)('textDecoration', 'none'), (0, _nested2.default)('&:hover', (0, _rule2.default)('textDecoration', 'underline'))));
+      (0, _expect2.default)((0, _css3.default)(_templateObject12)).toEqual((0, _concat2.default)((0, _rule2.default)('textDecoration', 'none'), (0, _nested2.default)('&:hover', (0, _rule2.default)('textDecoration', 'underline'))));
     });
 
     it('should pass through multiple selectors', function () {
-      (0, _expect2.default)((0, _css2.default)(_templateObject13)).toEqual((0, _concat2.default)((0, _rule2.default)('textDecoration', 'none'), (0, _nested2.default)('&:hover, &:active, :root.ios &', (0, _rule2.default)('textDecoration', 'underline'))));
+      (0, _expect2.default)((0, _css3.default)(_templateObject13)).toEqual((0, _concat2.default)((0, _rule2.default)('textDecoration', 'none'), (0, _nested2.default)('&:hover, &:active, :root.ios &', (0, _rule2.default)('textDecoration', 'underline'))));
     });
 
     it('should properly handle multiple nesting', function () {
-      (0, _expect2.default)((0, _css2.default)(_templateObject14)).toEqual((0, _concat2.default)((0, _rule2.default)('position', 'relative'), (0, _nested2.default)('img', (0, _rule2.default)('position', 'absolute'), (0, _nested2.default)('&.-in-flow', (0, _rule2.default)('position', 'static'))), (0, _nested2.default)('> span', (0, _rule2.default)('fontWeight', 'bold'), (0, _nested2.default)('html.ios &', (0, _rule2.default)('fontWeight', 'normal')))));
+      (0, _expect2.default)((0, _css3.default)(_templateObject14)).toEqual((0, _concat2.default)((0, _rule2.default)('position', 'relative'), (0, _nested2.default)('img', (0, _rule2.default)('position', 'absolute'), (0, _nested2.default)('&.-in-flow', (0, _rule2.default)('position', 'static'))), (0, _nested2.default)('> span', (0, _rule2.default)('fontWeight', 'bold'), (0, _nested2.default)('html.ios &', (0, _rule2.default)('fontWeight', 'normal')))));
     });
 
     it('should all nesting syntaxes', function () {
-      (0, _expect2.default)((0, _css2.default)(_templateObject15)).toEqual((0, _concat2.default)((0, _rule2.default)('animation', 'fade-in 1s both'), (0, _nested2.default)('+ *', (0, _rule2.default)('animation', 'fade-in 1s 1s both')), (0, _nested2.default)('~ *', (0, _rule2.default)('animation', 'fade-in 1s 2s both'))));
+      (0, _expect2.default)((0, _css3.default)(_templateObject15)).toEqual((0, _concat2.default)((0, _rule2.default)('animation', 'fade-in 1s both'), (0, _nested2.default)('+ *', (0, _rule2.default)('animation', 'fade-in 1s 1s both')), (0, _nested2.default)('~ *', (0, _rule2.default)('animation', 'fade-in 1s 2s both'))));
     });
   });
 
+  describe('in JS', function () {
+    it('should be ok with nonce inputs', function () {
+      (0, _expect2.default)((0, _css3.default)(_templateObject16, {}).rules).toEqual([]);
+      (0, _expect2.default)((0, _css3.default)(_templateObject16, undefined).rules).toEqual([]);
+      (0, _expect2.default)((0, _css3.default)(_templateObject16, null).rules).toEqual([]);
+    });
+
+    it('should handle a simple rule', function () {
+      (0, _expect2.default)((0, _css3.default)(_templateObject16, {
+        backgroundColor: 'blue'
+      })).toEqual((0, _concat2.default)((0, _rule2.default)('backgroundColor', 'blue')));
+    });
+
+    it('should handle dashed rules', function () {
+      (0, _expect2.default)((0, _css3.default)(_templateObject16, {
+        'background-color': 'blue'
+      })).toEqual((0, _concat2.default)((0, _rule2.default)('backgroundColor', 'blue')));
+    });
+
+    it('should handle multiple rules', function () {
+      (0, _expect2.default)((0, _css3.default)(_templateObject16, {
+        backgroundColor: 'blue',
+        border: 'none'
+      })).toEqual((0, _concat2.default)((0, _rule2.default)('backgroundColor', 'blue'), (0, _rule2.default)('border', 'none')));
+    });
+
+    it('should not pass through duplicates', function () {
+      (0, _expect2.default)((0, _css3.default)(_templateObject16, _defineProperty({
+        backgroundColor: 'blue',
+        border: 'none'
+      }, 'backgroundColor', 'red'))).toEqual((0, _concat2.default)((0, _rule2.default)('backgroundColor', 'red'), (0, _rule2.default)('border', 'none')));
+    });
+  });
+
   describe('@media', function () {
     it('should handle a simple media query', function () {
-      (0, _expect2.default)((0, _css2.default)(_templateObject16)).toEqual((0, _concat2.default)((0, _rule2.default)('background', 'red'), (0, _media2.default)('(max-width: 500px)', (0, _rule2.default)('background', 'blue'))));
+      (0, _expect2.default)((0, _css3.default)(_templateObject17)).toEqual((0, _concat2.default)((0, _rule2.default)('background', 'red'), (0, _media2.default)('(max-width: 500px)', (0, _rule2.default)('background', 'blue'))));
     });
-  });
 
-  describe('@media', function () {
     it('should handle a complex media query', function () {
-      (0, _expect2.default)((0, _css2.default)(_templateObject17)).toEqual((0, _concat2.default)((0, _rule2.default)('background', 'red'), (0, _media2.default)('screen and (max-width: 500px) and (min-width: 1000px)', (0, _rule2.default)('background', 'blue'))));
+      (0, _expect2.default)((0, _css3.default)(_templateObject18)).toEqual((0, _concat2.default)((0, _rule2.default)('background', 'red'), (0, _media2.default)('screen and (max-width: 500px) and (min-width: 1000px)', (0, _rule2.default)('background', 'blue'))));
     });
   });
 });

package.json

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

src/constructors/css.js

 import camelize from 'fbjs/lib/camelizeStyleName'
+import isPlainObject from "lodash/isPlainObject"
 
@@ -34,2 +35,7 @@ import rule from "./rule"
       if (strings[i + 1]) linesAndInterpolations.push(...strings[i + 1].split('\n'))
+    /* CSS-in-JS */
+  } else if (isPlainObject(interp)) {
+      Object.keys(interp).forEach((prop) => {
+        linesAndInterpolations.push(`${prop}: ${interp[prop]};`)
+      })
     } else {
@@ -36,0 +42,0 @@ /* Simple (value) interpolation. Concatenate and move on. */

src/constructors/styled.js

 import css from "./css"
 import Element from "../models/Element"
+import isPlainObject from "lodash/isPlainObject"
 
 const styled = tagName => (...args) => {
+  if (isPlainObject(args[0])) {
+    return Element(tagName, css`${args[0]}`)
+  }
   return Element(tagName, css(...args))
@@ -6,0 +10,0 @@ }

src/constructors/test/css.test.js

@@ -160,2 +160,47 @@ import expect from 'expect'
 
+  describe('in JS', () => {
+    it('should be ok with nonce inputs', () => {
+  		expect(css`${{}}`.rules).toEqual([])
+  		expect(css`${undefined}`.rules).toEqual([])
+  		expect(css`${null}`.rules).toEqual([])
+  	})
+
+  	it('should handle a simple rule', () => {
+  		expect(css`${{
+  			backgroundColor: 'blue'
+  		}}`).toEqual(concat(
+        rule('backgroundColor', 'blue')
+      ))
+  	})
+
+  	it('should handle dashed rules', () => {
+  		expect(css`${{
+  			'background-color': 'blue'
+  		}}`).toEqual(concat(
+        rule('backgroundColor', 'blue')
+      ))
+  	})
+
+  	it('should handle multiple rules', () => {
+  		expect(css`${{
+  			backgroundColor: 'blue',
+  			border: 'none',
+  		}}`).toEqual(concat(
+        rule('backgroundColor', 'blue'),
+        rule('border', 'none')
+      ))
+  	})
+
+  	it('should not pass through duplicates', () => {
+  		expect(css`${{
+  			backgroundColor: 'blue',
+  			border: 'none',
+  			backgroundColor: 'red',
+  		}}`).toEqual(concat(
+        rule('backgroundColor', 'red'),
+        rule('border', 'none')
+      ))
+  	})
+  })
+
   describe('@media', () => {
@@ -175,5 +220,3 @@ it('should handle a simple media query', () => {
     })
-  })
 
-  describe('@media', () => {
     it('should handle a complex media query', () => {
@@ -180,0 +223,0 @@ expect(css`

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

181534

increased by11.53%

Number of package files

68

increased by3.03%

Lines of code

3540

increased by13.24%

No dependency changes