css-in-js-utils - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

Changelog.md

 # Changelog
 
+### 2.0.0
+* improve `assignStyle` to replace arrays
+
 ### 1.0.3
@@ -4,0 +7,0 @@ * performance improvements

lib/__tests__/assignStyle-test.js

@@ -78,2 +78,29 @@ 'use strict';
   });
+
+  it('should overwrite previous values when both values are array', function () {
+    var ob1 = { fontSize: ['10px', '10rem'] };
+    var ob2 = { fontSize: ['10px', '20vw'] };
+
+    var newOb = (0, _assignStyle2.default)({}, ob1, ob2);
+
+    expect(newOb).toEqual({ fontSize: ['10px', '20vw'] });
+  });
+
+  it('should overwrite previous values when only the last value is an array', function () {
+    var ob1 = { fontSize: 10 };
+    var ob2 = { fontSize: ['10px', '20vw'] };
+
+    var newOb = (0, _assignStyle2.default)({}, ob1, ob2);
+
+    expect(newOb).toEqual({ fontSize: ['10px', '20vw'] });
+  });
+
+  it('should overwrite previous values when only the first value is an array', function () {
+    var ob1 = { fontSize: ['10px', '10rem'] };
+    var ob2 = { fontSize: 20 };
+
+    var newOb = (0, _assignStyle2.default)({}, ob1, ob2);
+
+    expect(newOb).toEqual({ fontSize: 20 });
+  });
 });

lib/assignStyle.js

@@ -7,8 +7,5 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
 exports.default = assignStyle;
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 function assignStyle(base) {
@@ -26,16 +23,5 @@ for (var _len = arguments.length, extendingStyles = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
 
-      if ((typeof baseValue === 'undefined' ? 'undefined' : _typeof(baseValue)) === 'object') {
-        if (Array.isArray(baseValue)) {
-          if (Array.isArray(value)) {
-            base[property] = [].concat(_toConsumableArray(baseValue), _toConsumableArray(value));
-          } else {
-            base[property] = [].concat(_toConsumableArray(baseValue), [value]);
-          }
-          continue;
-        }
-
-        if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && !Array.isArray(value)) {
-          base[property] = assignStyle({}, baseValue, value);
-          continue;
-        }
+      if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && !Array.isArray(value)) {
+        base[property] = assignStyle({}, baseValue, value);
+        continue;
       }
@@ -42,0 +28,0 @@

lib/camelCaseProperty.js

@@ -7,3 +7,2 @@ 'use strict';
 exports.default = camelCaseProperty;
-
 var dashRegex = /-([a-z])/g;
@@ -10,0 +9,0 @@ var msRegex = /^Ms/g;

lib/isPrefixedProperty.js

@@ -7,3 +7,2 @@ "use strict";
 exports.default = isPrefixedProperty;
-
 var regex = /^(Webkit|Moz|O|ms)/;
@@ -10,0 +9,0 @@

lib/isPrefixedValue.js

@@ -7,3 +7,2 @@ 'use strict';
 exports.default = isPrefixedValue;
-
 var regex = /-webkit-|-moz-|-ms-/;
@@ -10,0 +9,0 @@

lib/isUnitlessProperty.js

@@ -37,2 +37,3 @@ 'use strict';
 
+
 var prefixedUnitlessProperties = ['animationIterationCount', 'boxFlex', 'boxFlexGroup', 'boxOrdinalGroup', 'columnCount', 'flex', 'flexGrow', 'flexPositive', 'flexShrink', 'flexNegative', 'flexOrder', 'gridRow', 'gridColumn', 'order', 'lineClamp'];
@@ -39,0 +40,0 @@

lib/unprefixProperty.js

@@ -7,3 +7,2 @@ 'use strict';
 exports.default = unprefixProperty;
-
 var prefixRegex = /^(ms|Webkit|Moz|O)/;
@@ -10,0 +9,0 @@

lib/unprefixValue.js

@@ -7,3 +7,2 @@ 'use strict';
 exports.default = unprefixValue;
-
 var prefixRegex = /(-ms-|-webkit-|-moz-|-o-)/g;
@@ -10,0 +9,0 @@

package.json

 {
-  "name": "css-in-js-utils",
-  "version": "1.0.3",
-  "description": "Useful utility functions for CSS in JS solutions",
-  "main": "lib/index.js",
-  "files": [
-    "LICENSE",
-    "README.md",
-    "lib/"
-  ],
-  "keywords": [
-    "css",
-    "cssinjs",
-    "utils"
-  ],
-  "repository": "https://github.com/rofrischmann/css-in-js-utils.git",
-  "author": "Robin Frischmann <[e-mail]>",
-  "license": "MIT",
-  "scripts": {
-    "babel": "babel -d lib modules",
-    "check": "npm run format && npm run lint && npm run test:coverage && npm run flow",
-    "format": "prettier-eslint modules",
-    "flow": "flow",
-    "lint": "eslint modules",
-    "release": "npm run check && npm run babel && npm publish",
-    "test": "jest",
-    "test:coverage": "jest --coverage"
-  },
-  "jest": {
-    "rootDir": "modules"
-  },
-  "dependencies": {
-    "hyphenate-style-name": "^1.0.2"
-  },
-  "devDependencies": {
-    "babel-core": "^6.22.1",
-    "babel-eslint": "^7.1.1",
-    "babel-jest": "^18.0.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.22.0",
-    "babel-preset-stage-0": "^6.22.0",
-    "codeclimate-test-reporter": "^0.4.0",
-    "eslint": "^3.14.1",
-    "eslint-config-airbnb": "^14.0.0",
-    "eslint-plugin-flowtype": "^2.30.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^3.0.2",
-    "eslint-plugin-react": "^6.9.0",
-    "flow-bin": "^0.38.0",
-    "jest": "^18.1.0",
-    "prettier-eslint-cli": "^1.1.0"
-  }
+    "name": "css-in-js-utils",
+    "version": "2.0.0",
+    "description": "Useful utility functions for CSS in JS solutions",
+    "main": "lib/index.js",
+    "files": [
+        "LICENSE",
+        "README.md",
+        "lib/"
+    ],
+    "keywords": [
+        "css",
+        "cssinjs",
+        "utils"
+    ],
+    "repository": "https://github.com/rofrischmann/css-in-js-utils.git",
+    "author": "Robin Frischmann <[e-mail]>",
+    "license": "MIT",
+    "scripts": {
+        "babel": "babel -d lib modules",
+        "check": "npm run format && npm run lint && npm run test:coverage && npm run flow",
+        "format": "prettier-eslint modules",
+        "flow": "flow",
+        "lint": "eslint modules",
+        "release": "npm run check && npm run babel && npm publish",
+        "test": "jest",
+        "test:coverage": "jest --coverage"
+    },
+    "jest": {
+        "rootDir": "modules"
+    },
+    "dependencies": {
+        "hyphenate-style-name": "^1.0.2"
+    },
+    "devDependencies": {
+        "babel-cli": "^6.22.1",
+        "babel-core": "^6.22.1",
+        "babel-eslint": "^7.1.1",
+        "babel-jest": "^18.0.0",
+        "babel-plugin-add-module-exports": "^0.2.1",
+        "babel-preset-es2015": "^6.22.0",
+        "babel-preset-react": "^6.22.0",
+        "babel-preset-stage-0": "^6.22.0",
+        "codeclimate-test-reporter": "^0.4.0",
+        "eslint": "^3.14.1",
+        "eslint-config-airbnb": "^14.0.0",
+        "eslint-plugin-flowtype": "^2.30.0",
+        "eslint-plugin-import": "^2.2.0",
+        "eslint-plugin-jsx-a11y": "^3.0.2",
+        "eslint-plugin-react": "^6.9.0",
+        "flow-bin": "^0.38.0",
+        "jest": "^18.1.0",
+        "prettier-eslint-cli": "^1.1.0"
+    }
 }

README.md

@@ -6,6 +6,3 @@ # CSS-in-JS Utilities
 
-<img alt="TravisCI" src="https://travis-ci.org/rofrischmann/css-in-js-utils.svg?branch=master">
-<a href="https://codeclimate.com/github/rofrischmann/css-in-js-utils/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/css-in-js-utils/badges/coverage.svg"></a>
-<img alt="npm downloads" src="https://img.shields.io/npm/dm/css-in-js-utils.svg">
-<img alt="npm version" src="https://badge.fury.io/js/css-in-js-utils.svg">
+<img alt="TravisCI" src="https://travis-ci.org/rofrischmann/css-in-js-utils.svg?branch=master"> <a href="https://codeclimate.com/github/rofrischmann/css-in-js-utils/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/css-in-js-utils/badges/coverage.svg"></a> <img alt="npm downloads" src="https://img.shields.io/npm/dm/css-in-js-utils.svg"> <img alt="npm version" src="https://badge.fury.io/js/css-in-js-utils.svg">
 
@@ -21,2 +18,3 @@ ## Installation
 ## Utilities
+* [`assignStyle(base, ...extend)`](#assignstylebase-extend)
 * [`camelCaseProperty(property)`](#camelcasepropertyproperty)
@@ -33,3 +31,33 @@ * [`cssifyDeclaration(property, value)`](#cssifydeclarationproperty-value)
 * [`unprefixValue(value)`](#unprefixvaluevalue)
+*
+------
 
+### `assignStyle(base, ...extend)`
+Merges deep style objects similar to `Object.assign`.
+
+```javascript
+import { assignStyle } from 'css-in-js-utils'
+
+assignStyle(
+  { color: 'red', backgroundColor: 'black' },
+  { color: 'blue' }
+)
+// => { color: 'blue', backgroundColor: 'black' }
+
+assignStyle(
+  {
+    color: 'red',
+    ':hover': {
+      backgroundColor: 'black'
+    }
+  },
+  { 
+    ':hover': {
+      backgroundColor: 'blue'
+    }
+  }
+)
+// => { color: 'red', ':hover': { backgroundColor: 'blue' }}
+```
+
 ------
@@ -36,0 +64,0 @@

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

30805

increased by3.78%

Number of package files

29

increased by3.57%

Lines of code

476

increased by1.49%

Number of lines in readme file

242

increased by13.08%

Worsened metrics

Dev dependency count

18

increased by5.88%

No dependency changes