postcss-structure - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

index.js

@@ -6,3 +6,3 @@ var postcss = require('postcss');
     var opts = {
-        width: 18.75,
+        width: 18,
         gutter: 1.5,
@@ -14,10 +14,132 @@ padding: 1.5,
         align: 'center',
-        display: 'flex'
+        display: 'flex',
+        columns: 1,
+        blocs: 1
     };
     var r = postcss.root();
 
-    var createBlocs = function (a, b, media) {
+    var makeBlocs = function () {
 
+        var row = postcss.rule({ selector: '.row' });
+        row.append({ prop: 'clear', value: 'both' });
+        row.append({
+            prop: 'margin-right',
+            value: '-' + opts.gutter + 'rem'
+        });
+        if (opts.display === 'flex') {
+            row.append({ prop: 'display', value: 'flex' });
+            row.append({ prop: 'flex-flow', value: 'row wrap' });
+            row.append({ prop: 'align-items', value: 'flex-start' });
+            row.append({ prop: 'align-content', value: 'flex-start' });
+        }
+        r.append(row);
+
+        var rowAfter = postcss.rule({ selector: '.row:after' });
+        rowAfter.append({ prop: 'content', value: '""' });
+        rowAfter.append({ prop: 'display', value: 'table' });
+        rowAfter.append({ prop: 'clear', value: 'both' });
+        r.append(rowAfter);
+
+        var bloc = postcss.rule({ selector: '.bloc' });
+        bloc.append({ prop: 'margin-right', value: opts.gutter + 'rem' });
+        bloc.append({ prop: 'margin-bottom', value: opts.gutter + 'rem' });
+        if (opts.display === 'flex') {
+            bloc.append({ prop: 'flex', value: '0 1 100%' });
+        } else if (opts.display === 'float') {
+            bloc.append({ prop: 'clear', value: 'both' });
+        }
+        r.append(bloc);
+
+        var blocLeft = postcss.rule({ selector: '.bloc-left' });
+        if (opts.display === 'flex') {
+            blocLeft.append({ prop: 'flex', value: '0 1 auto' });
+        } else if (opts.display === 'float') {
+            blocLeft.append({ prop: 'float', value: 'left' });
+            blocLeft.append({ prop: 'clear', value: 'none' });
+            blocLeft.selector +=
+                ', .bloc-one-half, .bloc-one-third' +
+                ', .bloc-two-third, .bloc-thumb';
+        }
+        r.append(blocLeft);
+
+        var blocOneHalf = postcss.rule({ selector: '.bloc-one-half' });
+        var blocOneHalfValue = opts.width / 2 - opts.gutter;
+        if (opts.display === 'flex') {
+            blocOneHalf.append({
+                prop: 'flex',
+                value: '0 1 ' + blocOneHalfValue + 'rem'
+            });
+        } else if (opts.display === 'float') {
+            blocOneHalf.append({
+                prop: 'width',
+                value: blocOneHalfValue + 'rem'
+            });
+        }
+        r.append(blocOneHalf);
+
+        var blocOneThird = postcss.rule({ selector: '.bloc-one-third' });
+        var blocOneThirdValue = opts.width / 3 - opts.gutter;
+        if (opts.display === 'flex') {
+            blocOneThird.append({
+                prop: 'flex',
+                value: '0 1 ' + blocOneThirdValue + 'rem'
+            });
+        } else if (opts.display === 'float') {
+            blocOneThird.append({
+                prop: 'width',
+                value: blocOneHalfValue + 'rem'
+            });
+        }
+        r.append(blocOneThird);
+
+        var blocTwoThird = postcss.rule({ selector: '.bloc-two-third' });
+        var blocTwoThirdValue = opts.width * 2 / 3 - opts.gutter;
+        if (opts.display === 'flex') {
+            blocTwoThird.append({
+                prop: 'flex',
+                value: '0 1 ' + blocTwoThirdValue + 'rem'
+            });
+        } else if (opts.display === 'float') {
+            blocTwoThird.append({
+                prop: 'width',
+                value: blocTwoThirdValue + 'rem'
+            });
+        }
+        r.append(blocTwoThird);
+
+        var thumbQty = 1;
+        var blocThumb = postcss.rule({ selector: '.bloc-thumb' });
+        blocThumb.append({
+            prop: 'text-align',
+            value: 'center'
+        });
+        while (opts.width / thumbQty - opts.gutter > opts.thumb) {
+            thumbQty++;
+        }
+        var blocThumbValue = opts.width / (thumbQty - 1) - opts.gutter;
+        if (opts.display === 'flex') {
+            blocThumb.append({
+                prop: 'flex',
+                value: '0 1 ' + blocThumbValue + 'rem'
+            });
+        } else if (opts.display === 'float') {
+            blocThumb.append({
+                prop: 'width',
+                value: blocThumbValue + 'rem'
+            });
+        }
+        r.append(blocThumb);
+    };
+
+    var makeColumns = function () {
+        var columns = postcss.rule({ selector: '.columns' });
+        columns.append({ prop: 'column-gap', value: opts.gutter + 'rem' });
+        r.append(columns);
+    };
+
+    var makeBlocsQuery = function (a, media) {
+
         var blocWidth = {},
             blocWidthValue, idx;
+
         for (idx = 1; idx <= a; idx++) {
@@ -39,3 +161,3 @@ blocWidth[idx] = postcss.rule();
 
-        for (b = 1; b <= a; b++) {
+        for (var b = 1; b <= a; b++) {
             for (var col = 1; col <= b; col++) {
@@ -81,6 +203,42 @@ var i1 = false;
 
-    var createColumns = function (a, b, media) {
+    var makeBlocsFloatQuery = function (a, media) {
 
+        if (opts.display === 'float') {
+            var blocFloat = postcss.rule();
+            blocFloat.append({ prop: 'float', value: 'left' });
+            blocFloat.append({ prop: 'clear', value: 'none' });
+            for (var coll = a; coll > 0; coll--) {
+                blocFloat.selector = blocFloat.selector ?
+                    blocFloat.selector + ', .bloc-' + a + '-' + coll :
+                    '.bloc-' + a + '-' + coll;
+
+                if (coll > 1 && coll < opts.max) {
+                    for (var offf = 1; offf <= opts.max - coll; offf++) {
+                        blocFloat.selector = blocFloat.selector +
+                            ', .bloc-' + a + '-' + coll + '-' + offf;
+                    }
+                }
+            }
+            media.append(blocFloat);
+        }
+
+        var show = postcss.rule({ selector: '.show-' + a });
+        show.append({ prop: 'display', value: 'block !important' });
+        show.append({ prop: 'visibility', value: 'visible !important' });
+        media.append(show);
+
+        var floatRight = postcss.rule({ selector: '.right-' + a });
+        if (opts.display === 'flex') {
+            floatRight.append({ prop: 'margin-left', value: 'auto' });
+        } else if (opts.display === 'float') {
+            floatRight.append({ prop: 'float', value: 'right' });
+        }
+        media.append(floatRight);
+    };
+
+    var makeColumnsQuery = function (a, media) {
+
         var columnCount = {},
             idx;
+
         for (idx = 1; idx <= a; idx++) {
@@ -94,3 +252,3 @@ columnCount[idx] = postcss.rule();
 
-        for (b = 1; b <= a; b++) {
+        for (var b = 1; b <= a; b++) {
             for (var col = 1; col <= opts.max; col++) {
@@ -138,54 +296,2 @@ var i1 = false;
 
-    var createMediaQuerie = function (a) {
-        var b, col, off;
-        var containerWidth = a * opts.width - opts.gutter + 2 * opts.padding;
-        var totalWidth = a * opts.width - opts.gutter + 4 * opts.padding;
-        var media = postcss.atRule({
-            name: 'media',
-            params: '(width > ' + totalWidth + 'rem)'
-        });
-
-        var container = postcss.rule({ selector: '.container' });
-        container.append({ prop: 'width', value: containerWidth + 'rem' });
-        media.append(container);
-
-        var show = postcss.rule({ selector: '.show-' + a });
-        show.append({ prop: 'display', value: 'block !important' });
-        show.append({ prop: 'visibility', value: 'visible !important' });
-        media.append(show);
-
-        var floatRight = postcss.rule({ selector: '.right-' + a });
-        if (opts.display === 'flex') {
-            floatRight.append({ prop: 'margin-left', value: 'auto' });
-        } else if (opts.display === 'float') {
-            floatRight.append({ prop: 'float', value: 'right' });
-        }
-        media.append(floatRight);
-
-
-        if (opts.display === 'float') {
-            var blocFloat = postcss.rule();
-            blocFloat.append({ prop: 'float', value: 'left' });
-            blocFloat.append({ prop: 'clear', value: 'none' });
-            for (col = a; col > 0; col--) {
-                blocFloat.selector = blocFloat.selector ?
-                    blocFloat.selector + ', .bloc-' + a + '-' + col :
-                    '.bloc-' + a + '-' + col;
-
-                if (col > 1 && col < opts.max) {
-                    for (off = 1; off <= opts.max - col; off++) {
-                        blocFloat.selector = blocFloat.selector +
-                            ', .bloc-' + a + '-' + col + '-' + off;
-                    }
-                }
-            }
-            media.append(blocFloat);
-        }
-
-        createColumns(a, b, media);
-        createBlocs(a, b, media);
-
-        r.append(media);
-    };
-
     return function (css) {
@@ -195,5 +301,5 @@ css.walkAtRules('structure', function (rule) {
                 if (decl.prop in opts) {
-                    opts[decl.prop] = Number(decl.value) ?
-                        Number(decl.value) :
-                        decl.value.substring(1, decl.value.length - 1);
+                    opts[decl.prop] = isNaN(decl.value) ?
+                        decl.value.substring(1, decl.value.length - 1) :
+                        Number(decl.value);
                 }
@@ -217,118 +323,37 @@ });
 
-            var grid = postcss.rule({ selector: '.grid' });
-            grid.append({ prop: 'clear', value: 'both' });
-            grid.append({
-                prop: 'margin-right',
-                value: '-' + opts.gutter + 'rem'
-            });
-            if (opts.display === 'flex') {
-                grid.append({ prop: 'display', value: 'flex' });
-                grid.append({ prop: 'flex-flow', value: 'row wrap' });
-                grid.append({ prop: 'align-items', value: 'flex-start' });
-                grid.append({ prop: 'align-content', value: 'flex-start' });
+            if (opts.blocs) {
+                makeBlocs();
             }
-            r.append(grid);
 
-            var gridAfter = postcss.rule({ selector: '.grid:after' });
-            gridAfter.append({ prop: 'content', value: '""' });
-            gridAfter.append({ prop: 'display', value: 'table' });
-            gridAfter.append({ prop: 'clear', value: 'both' });
-            r.append(gridAfter);
-
-            var bloc = postcss.rule({ selector: '.bloc' });
-            bloc.append({ prop: 'margin-right', value: opts.gutter + 'rem' });
-            bloc.append({ prop: 'margin-bottom', value: opts.gutter + 'rem' });
-            if (opts.display === 'flex') {
-                bloc.append({ prop: 'flex', value: '0 1 100%' });
-            } else if (opts.display === 'float') {
-                bloc.append({ prop: 'clear', value: 'both' });
+            if (opts.columns) {
+                makeColumns();
             }
-            r.append(bloc);
 
-            var blocLeft = postcss.rule({ selector: '.bloc-left' });
-            if (opts.display === 'flex') {
-                blocLeft.append({ prop: 'flex', value: '0 1 auto' });
-            } else if (opts.display === 'float') {
-                blocLeft.append({ prop: 'float', value: 'left' });
-                blocLeft.append({ prop: 'clear', value: 'none' });
-                blocLeft.selector +=
-                    ', .bloc-one-half, .bloc-one-third' +
-                    ', .bloc-two-third, .bloc-thumb';
-            }
-            r.append(blocLeft);
-
-            var blocOneHalf = postcss.rule({ selector: '.bloc-one-half' });
-            var blocOneHalfValue = opts.width / 2 - opts.gutter;
-            if (opts.display === 'flex') {
-                blocOneHalf.append({
-                    prop: 'flex',
-                    value: '0 1 ' + blocOneHalfValue + 'rem'
+            for (var a = opts.min; a <= opts.max; a++) {
+                var containerWidth = a * opts.width - opts.gutter +
+                    2 * opts.padding;
+                var totalWidth = a * opts.width - opts.gutter +
+                    4 * opts.padding;
+                var mediaQuery = postcss.atRule({
+                    name: 'media',
+                    params: '(width > ' + totalWidth + 'rem)'
                 });
-            } else if (opts.display === 'float') {
-                blocOneHalf.append({
-                    prop: 'width',
-                    value: blocOneHalfValue + 'rem'
-                });
-            }
-            r.append(blocOneHalf);
 
-            var blocOneThird = postcss.rule({ selector: '.bloc-one-third' });
-            var blocOneThirdValue = opts.width / 3 - opts.gutter;
-            if (opts.display === 'flex') {
-                blocOneThird.append({
-                    prop: 'flex',
-                    value: '0 1 ' + blocOneThirdValue + 'rem'
-                });
-            } else if (opts.display === 'float') {
-                blocOneThird.append({
+                var containerQuery = postcss.rule({ selector: '.container' });
+                containerQuery.append({
                     prop: 'width',
-                    value: blocOneHalfValue + 'rem'
+                    value: containerWidth + 'rem'
                 });
-            }
-            r.append(blocOneThird);
+                mediaQuery.append(containerQuery);
 
-            var blocTwoThird = postcss.rule({ selector: '.bloc-two-third' });
-            var blocTwoThirdValue = opts.width * 2 / 3 - opts.gutter;
-            if (opts.display === 'flex') {
-                blocTwoThird.append({
-                    prop: 'flex',
-                    value: '0 1 ' + blocTwoThirdValue + 'rem'
-                });
-            } else if (opts.display === 'float') {
-                blocTwoThird.append({
-                    prop: 'width',
-                    value: blocTwoThirdValue + 'rem'
-                });
-            }
-            r.append(blocTwoThird);
+                if (opts.blocs) {
+                    makeBlocsFloatQuery(a, mediaQuery);
+                    makeBlocsQuery(a, mediaQuery);
+                }
 
-            var thumbQty = 1;
-            var blocThumb = postcss.rule({ selector: '.bloc-thumb' });
-            blocThumb.append({
-                prop: 'text-align',
-                value: 'center'
-            });
-            while (opts.width / thumbQty - opts.gutter > opts.thumb) {
-                thumbQty++;
-            }
-            var blocThumbValue = opts.width / (thumbQty - 1) - opts.gutter;
-            if (opts.display === 'flex') {
-                blocThumb.append({
-                    prop: 'flex',
-                    value: '0 1 ' + blocThumbValue + 'rem'
-                });
-            } else if (opts.display === 'float') {
-                blocThumb.append({
-                    prop: 'width',
-                    value: blocThumbValue + 'rem'
-                });
-            }
-            r.append(blocThumb);
+                if (opts.columns) {
+                    makeColumnsQuery(a, mediaQuery);
+                }
 
-            var columns = postcss.rule({ selector: '.columns' });
-            columns.append({ prop: 'column-gap', value: opts.gutter + 'rem' });
-            r.append(columns);
-
-            for (var a = opts.min; a <= opts.max; a++) {
-                createMediaQuerie(a);
+                r.append(mediaQuery);
             }
@@ -335,0 +360,0 @@

package.json

 {
   "name": "postcss-structure",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "PostCSS plugin that create a grid based on a fixed block width",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -13,10 +13,10 @@ # PostCSS Structure [![Build Status][ci-img]][ci]
 @structure {
-  width:    18;     
-  gutter:   1.5;   
-  padding:  1.5;  
-  max:      2;        
-  min:      8;        
-  thumb:    3;         
-  display:  flex;
-  align:    center;    
+  width: 18,
+  gutter: 1.5,
+  padding: 1.5,
+  max: 8,
+  min: 2,
+  thumb: 3,
+  align: 'center',
+  display: 'flex'   
 }
@@ -23,0 +23,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

19515

increased by0.82%

Lines of code

400

increased by5.26%

No dependency changes