postcss-grid-system - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

lib/blocs-align-query.js

@@ -17,34 +17,40 @@ 'use strict';
 
-exports.default = function (blocs, node, opts) {
+exports.default = function (blocs, node, opts, breakpoint) {
   if (blocs && blocs.length) {
-    var blocLeft = _postcss2.default.rule();
-    var blocRight = _postcss2.default.rule();
+    var blocLeft = {};
+    var blocRight = {};
 
-    if (opts.display === 'float') {
-      blocLeft.append({ prop: 'float', value: 'left' });
-      blocLeft.append({ prop: 'clear', value: 'none' });
+    for (var width = 1; width <= breakpoint; width++) {
+      blocLeft[width] = _postcss2.default.rule();
+      blocRight[width] = _postcss2.default.rule();
+      if (opts.display === 'float') {
+        blocLeft[width].append({ prop: 'float', value: 'left' });
+        blocLeft[width].append({ prop: 'clear', value: 'none' });
 
-      blocRight.append({ prop: 'float', value: 'right' });
-      blocRight.append({ prop: 'clear', value: 'none' });
-    } else {
-      blocRight.append({ prop: 'margin-left', value: 'auto' });
+        blocRight[width].append({ prop: 'float', value: 'right' });
+        blocRight[width].append({ prop: 'clear', value: 'none' });
+      } else {
+        blocRight[width].append({ prop: 'margin-left', value: 'auto' });
+      }
     }
 
-    for (var width = opts.max; width > 0; width--) {
-      if (blocs[width] && blocs[width][1]) {
-        _utils2.default.selectorsAdd(blocLeft, blocs[width][1]);
+    for (var _width = 0; _width <= breakpoint; _width++) {
+      if (blocs[breakpoint] && blocs[breakpoint][_width] && blocs[breakpoint][_width][1]) {
+        _utils2.default.selectorsAdd(blocLeft[_width], blocs[breakpoint][_width][1]);
       }
-      if (blocs[width] && blocs[width][0]) {
-        _utils2.default.selectorsAdd(blocRight, blocs[width][0]);
+      if (blocs[breakpoint] && blocs[breakpoint][_width] && blocs[breakpoint][_width][0]) {
+        _utils2.default.selectorsAdd(blocRight[_width], blocs[breakpoint][_width][0]);
       }
     }
 
-    if (blocRight.selector && blocRight.nodes.length) {
-      node.append(blocRight);
-    }
+    for (var _width2 = 1; _width2 <= breakpoint; _width2++) {
+      if (blocRight[_width2].selector && blocRight[_width2].nodes.length) {
+        node.append(blocRight[_width2]);
+      }
 
-    if (blocLeft.selector && blocLeft.nodes.length) {
-      node.append(blocLeft);
+      if (blocLeft[_width2].selector && blocLeft[_width2].nodes.length) {
+        node.append(blocLeft[_width2]);
+      }
     }
   }
 };

lib/blocs-query.js

@@ -21,35 +21,24 @@ 'use strict';
 
-    for (var i = 1; i <= breakpoint; i++) {
-      blocWidth[i] = _postcss2.default.rule();
-      var blocWidthValue = opts.width * i - opts.gutter;
+    for (var width = 1; width <= breakpoint; width++) {
+      blocWidth[width] = _postcss2.default.rule();
+      var blocWidthValue = opts.width * width - opts.gutter;
       if (opts.display === 'flex') {
-        blocWidth[i].append({ prop: 'flex', value: '0 1 ' + blocWidthValue + 'rem' });
+        blocWidth[width].append({ prop: 'flex', value: '0 1 ' + blocWidthValue + 'rem' });
       } else if (opts.display === 'float') {
-        blocWidth[i].append({ prop: 'width', value: blocWidthValue + 'rem' });
+        blocWidth[width].append({ prop: 'width', value: blocWidthValue + 'rem' });
       }
     }
 
-    for (var units = 0; units <= breakpoint; units++) {
-      if (blocs[units]) {
-        for (var width = 1; width <= opts.max; width++) {
-          if (blocs[units][width]) {
-            var i1 = false;
-            if (width >= breakpoint) {
-              i1 = breakpoint;
-            } else if (units === breakpoint) {
-              i1 = width;
-            }
-
-            if (i1) {
-              var selectors = _utils2.default.flatten(blocs[units][width]);
-              _utils2.default.selectorsAdd(blocWidth[i1], selectors);
-            }
-          }
-        }
+    for (var _width = 0; _width <= breakpoint; _width++) {
+      if (blocs[breakpoint] && blocs[breakpoint][_width] && blocs[breakpoint][_width][1]) {
+        _utils2.default.selectorsAdd(blocWidth[_width], blocs[breakpoint][_width][1]);
       }
+      if (blocs[breakpoint] && blocs[breakpoint][_width] && blocs[breakpoint][_width][0]) {
+        _utils2.default.selectorsAdd(blocWidth[_width], blocs[breakpoint][_width][0]);
+      }
     }
 
-    for (var _i = 1; _i <= breakpoint; _i++) {
-      if (blocWidth[_i].selector) {
-        node.append(blocWidth[_i]);
+    for (var _width2 = 1; _width2 <= breakpoint; _width2++) {
+      if (blocWidth[_width2].selector && blocWidth[_width2].nodes.length) {
+        node.append(blocWidth[_width2]);
       }
@@ -56,0 +45,0 @@ }

lib/grid-system.js

@@ -57,2 +57,4 @@ 'use strict';
 
+// import util from 'util';
+
 exports.default = function (e, rootCss, opts) {
@@ -65,4 +67,2 @@ (0, _containers2.default)(e.containers, rootCss, opts);
 
-  (0, _blocsAlignQuery2.default)(e.blocs[0], rootCss, opts);
-  (0, _blocsQuery2.default)(e.blocs, rootCss, opts, 0);
   (0, _fractionsQuery2.default)(e.fractions[0], rootCss, opts);
@@ -72,15 +72,21 @@ (0, _columnsQuery2.default)(e.columns, rootCss, opts, 0);
 
-  for (var breakpoint = opts.min; breakpoint <= opts.max; breakpoint++) {
+  for (var breakpoint = 1; breakpoint <= opts.max; breakpoint++) {
     var queryWidth = breakpoint * opts.width - opts.gutter + 2 * opts.padding;
     var mediaQuery = _postcss2.default.atRule({ name: 'media', params: '(min-width: ' + queryWidth + 'rem)' });
 
-    (0, _containersQuery2.default)(e.containers, mediaQuery, opts, breakpoint);
-    (0, _blocsAlignQuery2.default)(e.blocs[breakpoint], mediaQuery, opts);
+    (0, _blocsAlignQuery2.default)(e.blocs, mediaQuery, opts, breakpoint);
     (0, _blocsQuery2.default)(e.blocs, mediaQuery, opts, breakpoint);
-    (0, _fractionsQuery2.default)(e.fractions[breakpoint], mediaQuery, opts);
-    (0, _columnsQuery2.default)(e.columns, mediaQuery, opts, breakpoint);
-    (0, _rulesQuery2.default)(e.rules[breakpoint], mediaQuery);
 
-    rootCss.append(mediaQuery);
+    if (breakpoint >= opts.min) {
+      (0, _containersQuery2.default)(e.containers, mediaQuery, opts, breakpoint);
+      (0, _fractionsQuery2.default)(e.fractions[breakpoint], mediaQuery, opts);
+      (0, _columnsQuery2.default)(e.columns, mediaQuery, opts, breakpoint);
+      (0, _rulesQuery2.default)(e.rules[breakpoint], mediaQuery);
+    }
+
+    if (mediaQuery.nodes && mediaQuery.nodes.length) {
+      // console.log('booo', util.inspect(mediaQuery.nodes.length, false, null));
+      rootCss.append(mediaQuery);
+    }
   }
 };

lib/index.js

@@ -114,3 +114,3 @@ 'use strict';
 
-      // console.log(util.inspect(e.containers, false, null));
+      // console.log(util.inspect(e.blocs, false, null));
       (0, _gridSystem2.default)(e, rootCss, opts);
@@ -117,0 +117,0 @@ gsAtRule.replaceWith(rootCss);

package.json

 {
   "name": "postcss-grid-system",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "A PostCSS plugin to create grids based on a fixed column width.",
@@ -5,0 +5,0 @@ "keywords": [

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

27597

increased by1.84%

No dependency changes