styled-components
Advanced tools
styled-components - npm Package Compare versions
Comparing version 0.0.5 to 0.0.6
@@ -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. */ |
@@ -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 @@ }; |
@@ -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')))); | ||
| }); | ||
| }); | ||
| }); |
| { | ||
| "name": "styled-components", | ||
| "version": "0.0.5", | ||
| "version": "0.0.6", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.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. */ |
| 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 @@ } |
@@ -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
LicenseThis 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
LicenseThis 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
- increased by11.53%
181534
- Number of package files
- increased by3.03%
68
- Lines of code
- increased by13.24%
3540
No dependency changes