postcss-grid-fluid - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

 # Changelog
 
-## 0.3.1 (2018.5.30)
+## 0.4.0 (2021-01-05)
 
-* fix: update dependencies to fix npm audit warning
+- feat: BREAKING CHANGE update to postcss 8
 
-## 0.3.0 (2018.4.10)
+## 0.3.1 (2018-5-30)
 
-* feat: (breaking) remove bottom margin on blobs.
+- fix: update dependencies to fix npm audit warning
 
-## 0.2.0 (2018.2.21)
+## 0.3.0 (2018-4-10)
 
-* feat: row margin right is now a css calc function (instead of a negative value). So it can work with css variables.
+- feat: (breaking) remove bottom margin on blobs.
 
+## 0.2.0 (2018-2-21)
+
+- feat: row margin right is now a css calc function (instead of a negative value). So it can work with css variables.
+
 ## 0.1.0
 
-* first version
+- first version

lib/blob.js

 "use strict";
 
-const postcss = require('postcss');
-
-const blob = (decl, ratio, gutter, display) => {
+const blob = (node, ratio, gutter, display, {
+  decl
+}) => {
   const width = ratio.split('/');
   let widthValue;
   let widthString;
-  let declNew = [];
+  let nodeNew = [];
 
@@ -25,3 +25,3 @@ if (width[1]) {
     widthString = `calc(${widthValue}% - ${gutter})`;
-    declNew = declNew.concat([postcss.decl({
+    nodeNew = nodeNew.concat([decl({
       prop: 'margin-right',
@@ -33,3 +33,3 @@ value: gutter
   if (display === 'flex') {
-    declNew = declNew.concat([postcss.decl({
+    nodeNew = nodeNew.concat([decl({
       prop: 'flex',
@@ -39,6 +39,6 @@ value: `0 1 ${widthString}`
   } else if (display === 'float') {
-    declNew = declNew.concat([postcss.decl({
+    nodeNew = nodeNew.concat([decl({
       prop: 'width',
       value: `${widthString}`
-    }), postcss.decl({
+    }), decl({
       prop: 'float',
@@ -49,5 +49,5 @@ value: 'left'
 
-  decl.replaceWith(declNew);
+  node.replaceWith(nodeNew);
 };
 
 module.exports = blob;

lib/index.js

 "use strict";
 
-const row = require('./row');
+var _row = _interopRequireDefault(require("./row"));
 
-const blob = require('./blob');
+var _blob = _interopRequireDefault(require("./blob"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const postcssGridFluid = opts => {
@@ -17,26 +19,36 @@ const options = {
 
-    Once(root) {
-      root.walk(node => {
-        if (node.type === 'atrule' && node.name.match(/^gf$/)) {
-          node.walkDecls(decl => {
-            if (decl.prop.match(/^gutter/) || decl.prop.match(/^display/) || decl.prop.match(/^width/)) {
-              options[decl.prop] = decl.value;
-            }
+    AtRule(node) {
+      if (node.name.match(/^gf$/)) {
+        node.walkDecls(decl => {
+          if (decl.prop.match(/^gutter/) || decl.prop.match(/^display/) || decl.prop.match(/^width/)) {
+            options[decl.prop] = decl.value;
+          }
+        });
+        node.remove();
+      }
+    },
+
+    Declaration(node, {
+      decl,
+      rule
+    }) {
+      if (node.prop.match(/^gf$/)) {
+        const value = node.value.split(/\s+(?![^[]*\]|[^(]*\)|[^{]*})/);
+
+        if (value[0] === 'row') {
+          value[1] = value[1] || options.gutter;
+          value[2] = value[2] || options.display;
+          (0, _row.default)(node, value[1], value[2], {
+            decl,
+            rule
           });
-          node.remove();
-        } else if (node.type === 'decl' && node.prop.match(/^gf$/)) {
-          const value = node.value.split(/\s+(?![^[]*\]|[^(]*\)|[^{]*})/);
-
-          if (value[0] === 'row') {
-            value[1] = value[1] || options.gutter;
-            value[2] = value[2] || options.display;
-            row(node, value[1], value[2]);
-          } else if (value[0] === 'blob') {
-            value[1] = value[1] || options.width;
-            value[2] = value[2] || options.gutter;
-            value[3] = value[3] || options.display;
-            blob(node, value[1], value[2], value[3]);
-          }
+        } else if (value[0] === 'blob') {
+          value[1] = value[1] || options.width;
+          value[2] = value[2] || options.gutter;
+          value[3] = value[3] || options.display;
+          (0, _blob.default)(node, value[1], value[2], value[3], {
+            decl
+          });
         }
-      });
+      }
     }
@@ -43,0 +55,0 @@

lib/row.js

 "use strict";
 
-const postcss = require('postcss');
-
-const row = (decl, gutter, display) => {
-  const clearfixRule = postcss.rule({
-    selector: `${decl.parent.selector}::after`
+const row = (node, gutter, display, {
+  decl,
+  rule
+}) => {
+  const clearfixRule = rule({
+    selector: `${node.parent.selector}::after`
   });
@@ -21,4 +22,4 @@ clearfixRule.append({
   });
-  decl.parent.after(clearfixRule);
-  let declNew = [postcss.decl({
+  node.parent.after(clearfixRule);
+  let nodeNew = [decl({
     prop: 'clear',
@@ -29,3 +30,3 @@ value: 'both'
   if (gutter !== '0') {
-    declNew = declNew.concat([postcss.decl({
+    nodeNew = nodeNew.concat([decl({
       prop: 'margin-right',
@@ -37,12 +38,12 @@ value: `calc(-1 * ${gutter})`
   if (display === 'flex') {
-    declNew = declNew.concat([postcss.decl({
+    nodeNew = nodeNew.concat([decl({
       prop: 'display',
       value: 'flex'
-    }), postcss.decl({
+    }), decl({
       prop: 'flex-flow',
       value: 'row wrap'
-    }), postcss.decl({
+    }), decl({
       prop: 'align-items',
       value: 'flex-start'
-    }), postcss.decl({
+    }), decl({
       prop: 'align-content',
@@ -53,5 +54,5 @@ value: 'flex-start'
 
-  decl.replaceWith(declNew);
+  node.replaceWith(nodeNew);
 };
 
 module.exports = row;

package.json

 {
   "name": "postcss-grid-fluid",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A PostCSS plugin to create fluid grids.",
@@ -5,0 +5,0 @@ "keywords": [

src/blob.js

@@ -1,8 +0,6 @@
-const postcss = require('postcss');
-
-const blob = (decl, ratio, gutter, display) => {
+const blob = (node, ratio, gutter, display, { decl }) => {
   const width = ratio.split('/');
   let widthValue;
   let widthString;
-  let declNew = [];
+  let nodeNew = [];
   if (width[1]) {
@@ -22,21 +20,19 @@ widthValue = (100 * width[0]) / width[1];
     widthString = `calc(${widthValue}% - ${gutter})`;
-    declNew = declNew.concat([
-      postcss.decl({ prop: 'margin-right', value: gutter }),
-    ]);
+    nodeNew = nodeNew.concat([decl({ prop: 'margin-right', value: gutter })]);
   }
 
   if (display === 'flex') {
-    declNew = declNew.concat([
-      postcss.decl({ prop: 'flex', value: `0 1 ${widthString}` }),
+    nodeNew = nodeNew.concat([
+      decl({ prop: 'flex', value: `0 1 ${widthString}` }),
     ]);
   } else if (display === 'float') {
-    declNew = declNew.concat([
-      postcss.decl({ prop: 'width', value: `${widthString}` }),
-      postcss.decl({ prop: 'float', value: 'left' }),
+    nodeNew = nodeNew.concat([
+      decl({ prop: 'width', value: `${widthString}` }),
+      decl({ prop: 'float', value: 'left' }),
     ]);
   }
 
-  decl.replaceWith(declNew);
+  node.replaceWith(nodeNew);
 };
 
 module.exports = blob;

src/index.js

@@ -1,3 +0,3 @@
-const row = require('./row');
-const blob = require('./blob');
+import row from './row';
+import blob from './blob';
 
@@ -15,29 +15,32 @@ const postcssGridFluid = (opts) => {
     postcssPlugin: 'postcss-grid-fluid',
-    Once(root) {
-      root.walk((node) => {
-        if (node.type === 'atrule' && node.name.match(/^gf$/)) {
-          node.walkDecls((decl) => {
-            if (
-              decl.prop.match(/^gutter/) ||
-              decl.prop.match(/^display/) ||
-              decl.prop.match(/^width/)
-            ) {
-              options[decl.prop] = decl.value;
-            }
-          });
-          node.remove();
-        } else if (node.type === 'decl' && node.prop.match(/^gf$/)) {
-          const value = node.value.split(/\s+(?![^[]*\]|[^(]*\)|[^{]*})/);
-          if (value[0] === 'row') {
-            value[1] = value[1] || options.gutter;
-            value[2] = value[2] || options.display;
-            row(node, value[1], value[2]);
-          } else if (value[0] === 'blob') {
-            value[1] = value[1] || options.width;
-            value[2] = value[2] || options.gutter;
-            value[3] = value[3] || options.display;
-            blob(node, value[1], value[2], value[3]);
+
+    AtRule(node) {
+      if (node.name.match(/^gf$/)) {
+        node.walkDecls((decl) => {
+          if (
+            decl.prop.match(/^gutter/) ||
+            decl.prop.match(/^display/) ||
+            decl.prop.match(/^width/)
+          ) {
+            options[decl.prop] = decl.value;
           }
+        });
+        node.remove();
+      }
+    },
+
+    Declaration(node, { decl, rule }) {
+      if (node.prop.match(/^gf$/)) {
+        const value = node.value.split(/\s+(?![^[]*\]|[^(]*\)|[^{]*})/);
+        if (value[0] === 'row') {
+          value[1] = value[1] || options.gutter;
+          value[2] = value[2] || options.display;
+          row(node, value[1], value[2], { decl, rule });
+        } else if (value[0] === 'blob') {
+          value[1] = value[1] || options.width;
+          value[2] = value[2] || options.gutter;
+          value[3] = value[3] || options.display;
+          blob(node, value[1], value[2], value[3], { decl });
         }
-      });
+      }
     },
@@ -44,0 +47,0 @@ };

src/row.js

@@ -1,6 +0,4 @@
-const postcss = require('postcss');
-
-const row = (decl, gutter, display) => {
-  const clearfixRule = postcss.rule({
-    selector: `${decl.parent.selector}::after`,
+const row = (node, gutter, display, { decl, rule }) => {
+  const clearfixRule = rule({
+    selector: `${node.parent.selector}::after`,
   });
@@ -10,9 +8,9 @@ clearfixRule.append({ prop: 'content', value: '""' });
   clearfixRule.append({ prop: 'clear', value: 'both' });
-  decl.parent.after(clearfixRule);
+  node.parent.after(clearfixRule);
 
-  let declNew = [postcss.decl({ prop: 'clear', value: 'both' })];
+  let nodeNew = [decl({ prop: 'clear', value: 'both' })];
 
   if (gutter !== '0') {
-    declNew = declNew.concat([
-      postcss.decl({ prop: 'margin-right', value: `calc(-1 * ${gutter})` }),
+    nodeNew = nodeNew.concat([
+      decl({ prop: 'margin-right', value: `calc(-1 * ${gutter})` }),
     ]);
@@ -22,13 +20,13 @@ }
   if (display === 'flex') {
-    declNew = declNew.concat([
-      postcss.decl({ prop: 'display', value: 'flex' }),
-      postcss.decl({ prop: 'flex-flow', value: 'row wrap' }),
-      postcss.decl({ prop: 'align-items', value: 'flex-start' }),
-      postcss.decl({ prop: 'align-content', value: 'flex-start' }),
+    nodeNew = nodeNew.concat([
+      decl({ prop: 'display', value: 'flex' }),
+      decl({ prop: 'flex-flow', value: 'row wrap' }),
+      decl({ prop: 'align-items', value: 'flex-start' }),
+      decl({ prop: 'align-content', value: 'flex-start' }),
     ]);
   }
 
-  decl.replaceWith(declNew);
+  node.replaceWith(nodeNew);
 };
 
 module.exports = row;

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

Lines of code

237

increased by4.41%

Worsened metrics

Total package byte prevSize

11588

decreased by-0.73%

No dependency changes