facepaint - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

dist/facepaint.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.facepaint=n()}(this,function(){"use strict";return function(e){function n(e){return"object"!=typeof e||null==e?[]:Array.isArray(e)?e.map(n):Object.keys(e).reduce(function(o,f){if(Array.isArray(e[f])&&38!==f.charCodeAt(0)){var i=void 0;e[f].forEach(function(e,n){if((!r||i!==e)&&null!=e)if(i=e,0===n)o[f]=e;else if(o[t[n]])o[t[n]][f]=e;else{var u;o[t[n]]=(u={},u[f]=e,u)}})}else"object"==typeof e[f]?o[f]=n(e[f]):o[f]=e[f];return o},{})}var r=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).overlap,t=[""].concat(e);return function(){for(var e=arguments.length,r=Array(e),t=0;t<e;t++)r[t]=arguments[t];return r.map(n)}}});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):e.facepaint=r()}(this,function(){"use strict";return function(e){function r(e){return"object"!=typeof e||null==e?[]:Array.isArray(e)?e.map(r):Object.keys(e).reduce(function(t,f){var a=e[f];if(!Array.isArray(a)&&n&&(a=[a]),(n||Array.isArray(a))&&38!==f.charCodeAt(0)){var u=void 0;a.forEach(function(e,r){if((!o||u!==e)&&null!=e)if(u=e,0!==r||n)if(void 0===t[i[r]]){var a;t[i[r]]=(a={},a[f]=e,a)}else t[i[r]][f]=e;else t[f]=e})}else t[f]="object"==typeof a?r(a):a;return t},{})}var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.literal,o=t.overlap,i=n?e:["&"].concat(e);return function(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.map(r)}}});
 //# sourceMappingURL=facepaint.umd.min.js.map

dist/index.cjs.js

@@ -6,5 +6,7 @@ 'use strict';
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      literal = _ref.literal,
       overlap = _ref.overlap;
 
-  var mq = [''].concat(breakpoints);
+  var mq = literal ? breakpoints : ['&'].concat(breakpoints);
+
   function flatten(obj) {
@@ -22,5 +24,9 @@ if (typeof obj !== 'object' || obj == null) {
       // key.indexOf('&') === 0
-      if (Array.isArray(obj[key]) && key.charCodeAt(0) !== 38) {
+
+      var item = obj[key];
+      if (!Array.isArray(item) && literal) item = [item];
+
+      if ((literal || Array.isArray(item)) && key.charCodeAt(0) !== 38) {
         var prior = void 0;
-        obj[key].forEach(function (v, index) {
+        item.forEach(function (v, index) {
           // Optimize by removing duplicated media query entries
@@ -40,5 +46,5 @@ // when they are explicitly known to overlap.
 
-          if (index === 0) {
+          if (index === 0 && !literal) {
             slots[key] = v;
-          } else if (!slots[mq[index]]) {
+          } else if (slots[mq[index]] === undefined) {
             var _slots$mq$index;
@@ -51,6 +57,6 @@
         });
-      } else if (typeof obj[key] === 'object') {
-        slots[key] = flatten(obj[key]);
+      } else if (typeof item === 'object') {
+        slots[key] = flatten(item);
       } else {
-        slots[key] = obj[key];
+        slots[key] = item;
       }
@@ -57,0 +63,0 @@ return slots;

dist/index.es.js

 /* eslint-disable no-param-reassign */
 var index = function (breakpoints) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      literal = _ref.literal,
       overlap = _ref.overlap;
 
-  var mq = [''].concat(breakpoints);
+  var mq = literal ? breakpoints : ['&'].concat(breakpoints);
+
   function flatten(obj) {
@@ -19,5 +21,9 @@ if (typeof obj !== 'object' || obj == null) {
       // key.indexOf('&') === 0
-      if (Array.isArray(obj[key]) && key.charCodeAt(0) !== 38) {
+
+      var item = obj[key];
+      if (!Array.isArray(item) && literal) item = [item];
+
+      if ((literal || Array.isArray(item)) && key.charCodeAt(0) !== 38) {
         var prior = void 0;
-        obj[key].forEach(function (v, index) {
+        item.forEach(function (v, index) {
           // Optimize by removing duplicated media query entries
@@ -37,5 +43,5 @@ // when they are explicitly known to overlap.
 
-          if (index === 0) {
+          if (index === 0 && !literal) {
             slots[key] = v;
-          } else if (!slots[mq[index]]) {
+          } else if (slots[mq[index]] === undefined) {
             var _slots$mq$index;
@@ -48,6 +54,6 @@
         });
-      } else if (typeof obj[key] === 'object') {
-        slots[key] = flatten(obj[key]);
+      } else if (typeof item === 'object') {
+        slots[key] = flatten(item);
       } else {
-        slots[key] = obj[key];
+        slots[key] = item;
       }
@@ -54,0 +60,0 @@ return slots;

package.json

 {
   "name": "facepaint",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Responsive style values for css-in-js.",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

README.md

@@ -34,3 +34,3 @@ # facepaint
 
-#### facepaint `function` 
+#### facepaint `function`
 
@@ -50,10 +50,14 @@ ```javascript
   ```
-  
+
 * *options*
   ```javascript
   const mq = facepaint(
-    [...], 
-    { overlap: true|false }
+    [...],
+    {
+      literal: true|false,
+      overlap: true|false
+    }
   )
   ```
+  - literal `boolean` (Default: `false`) - force "slot"
   - overlap `boolean` (Default: `false`) - remove any duplicate values found in multiple "slots"
@@ -64,6 +68,6 @@
 `facepaint` returns a function that can be exported and used throughout
-your app to dynamically style based on your provided selectors. 
+your app to dynamically style based on your provided selectors.
 
 - The function accepts any number of arrays or objects as arguments.
-- Nested arrays are flattened. 
+- Nested arrays are flattened.
 - Boolean, `undefined`, and `null` values are ignored.
@@ -70,0 +74,0 @@

src/index.js

 /* eslint-disable no-param-reassign */
-export default function(breakpoints, { overlap } = {}) {
-  const mq = [''].concat(breakpoints)
+export default function(breakpoints, { literal, overlap } = {}) {
+  const mq = literal ? breakpoints : ['&'].concat(breakpoints)
+
   function flatten(obj) {
@@ -16,5 +17,9 @@ if (typeof obj !== 'object' || obj == null) {
       // key.indexOf('&') === 0
-      if (Array.isArray(obj[key]) && key.charCodeAt(0) !== 38) {
+
+      let item = obj[key]
+      if (!Array.isArray(item) && literal) item = [item]
+
+      if ((literal || Array.isArray(item)) && key.charCodeAt(0) !== 38) {
         let prior
-        obj[key].forEach((v, index) => {
+        item.forEach((v, index) => {
           // Optimize by removing duplicated media query entries
@@ -34,5 +39,5 @@ // when they are explicitly known to overlap.
 
-          if (index === 0) {
+          if (index === 0 && !literal) {
             slots[key] = v
-          } else if (!slots[mq[index]]) {
+          } else if (slots[mq[index]] === undefined) {
             slots[mq[index]] = { [key]: v }
@@ -43,6 +48,6 @@ } else {
         })
-      } else if (typeof obj[key] === 'object') {
-        slots[key] = flatten(obj[key])
+      } else if (typeof item === 'object') {
+        slots[key] = flatten(item)
       } else {
-        slots[key] = obj[key]
+        slots[key] = item
       }
@@ -49,0 +54,0 @@ return slots

No alert changes

Improved metrics

Total package byte prevSize

23567

6.64%

Lines of code

169

5.63%

Number of lines in readme file

357

1.13%

No dependency changes