postcss-grid-fluid - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

lib/index.js

 "use strict";
 
-const postcss = require('postcss');
-
 const row = require('./row');
@@ -9,3 +7,3 @@
 
-const postcssGridFluid = postcss.plugin('postcss-grid-fluid', opts => {
+const postcssGridFluid = opts => {
   const options = {
@@ -17,28 +15,34 @@ gutter: '0',
   Object.assign(options, opts);
-  return css => {
-    css.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;
+  return {
+    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]);
           }
-        });
-        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]);
-        }
-      }
-    });
   };
-});
+};
+
 module.exports = postcssGridFluid;

package.json

 {
   "name": "postcss-grid-fluid",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "A PostCSS plugin to create fluid grids.",
@@ -23,25 +23,6 @@ "keywords": [
   "homepage": "http://francoisromain.github.io/postcss-grid-fluid/",
-  "dependencies": {
-    "postcss": "^7.0.17"
+  "peerDependencies": {
+    "postcss": "^8.2.2"
   },
-  "scripts": {
-    "dist": "babel src --out-dir lib",
-    "test": "npm run dist && ava && eslint '**/*.js'"
-  },
   "main": "./lib/index.js",
-  "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/register": "^7.4.4",
-    "ava": "^2.0.0",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0"
-  },
-  "eslintConfig": {
-    "extends": "airbnb"
-  },
   "ava": {
@@ -54,15 +35,3 @@ "files": [
     ]
-  },
-  "babel": {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "node": "current"
-          }
-        }
-      ]
-    ]
   }
 }

README.md

@@ -10,11 +10,11 @@ # postcss-grid-fluid
 [github.io]: http://francoisromain.github.io/postcss-grid-fluid
-[PostCSS]:   https://github.com/postcss/postcss
-[ci-img]:    https://travis-ci.org/francoisromain/postcss-grid-fluid.svg
-[ci]:        https://travis-ci.org/francoisromain/postcss-grid-fluid
-[npm-img]:   https://badge.fury.io/js/postcss-grid-fluid.svg
-[npm]:       https://badge.fury.io/js/postcss-grid-fluid
-[dep-img]:   https://david-dm.org/francoisromain/postcss-grid-fluid.svg
-[dep]:       https://david-dm.org/francoisromain/postcss-grid-fluid
+[postcss]: https://github.com/postcss/postcss
+[ci-img]: https://travis-ci.org/francoisromain/postcss-grid-fluid.svg
+[ci]: https://travis-ci.org/francoisromain/postcss-grid-fluid
+[npm-img]: https://badge.fury.io/js/postcss-grid-fluid.svg
+[npm]: https://badge.fury.io/js/postcss-grid-fluid
+[dep-img]: https://david-dm.org/francoisromain/postcss-grid-fluid.svg
+[dep]: https://david-dm.org/francoisromain/postcss-grid-fluid
 
-* * * 
+---
 
@@ -25,13 +25,15 @@ ## Installation
 
-    $ npm install postcss-grid-fluid --save-dev
+```bash
+npm install postcss postcss-grid-fluid --save-dev
+```
 
 Require the PostCSS plugin:
 
-``` js
-postcss([ require('postcss-grid-fluid') ])
+```js
+postcss([require('postcss-grid-fluid')]);
 ```
 
-See [PostCSS docs](https://github.com/postcss/postcss#usage) to setup with Gulp, Grunt, Webpack, npm scripts… 
+See [PostCSS docs](https://github.com/postcss/postcss#usage) to setup with Gulp, Grunt, Webpack, npm scripts…
 
-* * * 
+---
 
@@ -42,7 +44,7 @@ ## Configuration (optional)
 
-``` javascript
+```javascript
 {
   width: 1,         /* width/total of one blob integer if there is a _total_ or a float smaller than 1. */
   gutter: 0,        /* width of the gutter */
-  display: 'flex'   /* 'float' or 'flex' */  
+  display: 'flex'   /* 'float' or 'flex' */
 }
@@ -53,7 +55,7 @@ ```
 
-``` css
+```css
 @gf {
-  width: 1;         /* width/total of one blob */
-  gutter: 0;        /* width of the gutter */
-  display: flex;    /* float or flex */  
+  width: 1; /* width/total of one blob */
+  gutter: 0; /* width of the gutter */
+  display: flex; /* float or flex */
 }
@@ -64,3 +66,3 @@ ```
 
-* * * 
+---
 
@@ -81,3 +83,3 @@ ## Usage
 
-- _width_: width of the blob. Could be an integer if there is a _total_ or a float smaller than 1. 
+- _width_: width of the blob. Could be an integer if there is a _total_ or a float smaller than 1.
 - _total_ (optional, default = 1): divider of the container width.
@@ -89,2 +91,2 @@ - _gutter_ (optional, default = 0): width of the gutter in `px` or `rem`.
 
-Example 2: [input](https://github.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/src/02.css), [output](https://github.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/dist/02.css), [markup](https://ithub.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/02.html), [demo](https://francoisromain.github.io/postcss-grid-fluid/test/02.html)
+Example 2: [input](https://github.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/src/02.css), [output](https://github.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/dist/02.css), [markup](https://ithub.com/francoisromain/postcss-grid-fluid/blob/gh-pages/test/02.html), [demo](https://francoisromain.github.io/postcss-grid-fluid/test/02.html)

src/blob.js

@@ -9,3 +9,3 @@ const postcss = require('postcss');
   if (width[1]) {
-    widthValue = 100 * width[0] / width[1];
+    widthValue = (100 * width[0]) / width[1];
   } else {
@@ -23,7 +23,11 @@ widthValue = 100 * width[0];
     widthString = `calc(${widthValue}% - ${gutter})`;
-    declNew = declNew.concat([postcss.decl({ prop: 'margin-right', value: gutter })]);
+    declNew = declNew.concat([
+      postcss.decl({ prop: 'margin-right', value: gutter }),
+    ]);
   }
 
   if (display === 'flex') {
-    declNew = declNew.concat([postcss.decl({ prop: 'flex', value: `0 1 ${widthString}` })]);
+    declNew = declNew.concat([
+      postcss.decl({ prop: 'flex', value: `0 1 ${widthString}` }),
+    ]);
   } else if (display === 'float') {
@@ -30,0 +34,0 @@ declNew = declNew.concat([

src/index.js

@@ -1,6 +0,5 @@
-const postcss = require('postcss');
 const row = require('./row');
 const blob = require('./blob');
 
-const postcssGridFluid = postcss.plugin('postcss-grid-fluid', (opts) => {
+const postcssGridFluid = (opts) => {
   const options = {
@@ -14,32 +13,35 @@ gutter: '0',
 
-  return (css) => {
-    css.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;
+  return {
+    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]);
           }
-        });
-        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]);
         }
-      }
-    });
+      });
+    },
   };
-});
+};
 
 module.exports = postcssGridFluid;

src/row.js

 const postcss = require('postcss');
 
 const row = (decl, gutter, display) => {
-  const clearfixRule = postcss.rule({ selector: `${decl.parent.selector}::after` });
+  const clearfixRule = postcss.rule({
+    selector: `${decl.parent.selector}::after`,
+  });
   clearfixRule.append({ prop: 'content', value: '""' });
@@ -6,0 +8,0 @@ clearfixRule.append({ prop: 'display', value: 'table' });

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Lines of code

227

increased by4.61%

Number of lines in readme file

86

increased by3.61%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

11673

decreased by-37.38%

Number of package files

10

decreased by-23.08%

Dependency changes

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• - Removedpostcss@^7.0.17

• - Removedpicocolors@0.2.1(transitive)

• - Removedpostcss@7.0.39(transitive)

• - Removedsource-map@0.6.1(transitive)