postcss-structure - npm Package Compare versions

Comparing version 0.7.9 to 0.8.0

CHANGELOG.md

@@ -0,1 +1,4 @@
+0.8.0
+- feat: add custom styles feature
+
 0.7.3
@@ -2,0 +5,0 @@ - feat: add hide feature

lib/blobs-float-query.js

@@ -17,3 +17,3 @@ 'use strict';
 
-exports.default = function (opts, breakpoint, mediaQuery, blobs) {
+exports.default = function (blobs, node, opts, breakpoint) {
   if (blobs.length && blobs[breakpoint] && blobs[breakpoint].length && opts.display === 'float') {
@@ -33,4 +33,4 @@ var blobFloat = _postcss2.default.rule();
 
-    mediaQuery.append(blobFloat);
+    node.append(blobFloat);
   }
 };

lib/blobs-query.js

@@ -17,3 +17,3 @@ 'use strict';
 
-exports.default = function (opts, breakpoint, mediaQuery, blobs) {
+exports.default = function (blobs, node, opts, breakpoint) {
   if (blobs.length && blobs[breakpoint] && blobs[breakpoint].length) {
@@ -36,3 +36,3 @@ for (var total = 2; total <= blobs[breakpoint].length; total++) {
 
-            mediaQuery.append(blobWidth);
+            node.append(blobWidth);
           }
@@ -39,0 +39,0 @@ }

lib/blobs.js

@@ -17,3 +17,3 @@ 'use strict';
 
-exports.default = function (opts, rootCss, blocs) {
+exports.default = function (blocs, node, opts) {
   var bloc = _postcss2.default.rule();
@@ -29,3 +29,3 @@ bloc.selectors = _utils2.default.flatten(blocs);
 
-  rootCss.append(bloc);
+  node.append(bloc);
 };

lib/blocs-float-query.js

@@ -17,3 +17,3 @@ 'use strict';
 
-exports.default = function (opts, breakpoint, mediaQuery, blocs) {
+exports.default = function (blocs, node, opts, breakpoint) {
   if (blocs.length && blocs[breakpoint] && blocs[breakpoint].length && opts.display === 'float') {
@@ -40,4 +40,4 @@ var blocFloat = _postcss2.default.rule();
 
-    mediaQuery.append(blocFloat);
+    node.append(blocFloat);
   }
 };

lib/blocs-query.js

@@ -17,3 +17,3 @@ 'use strict';
 
-exports.default = function (opts, breakpoint, mediaQuery, blocs) {
+exports.default = function (blocs, node, opts, breakpoint) {
   if (blocs.length) {
@@ -70,3 +70,3 @@ var blocWidth = {};
       if (blocWidth[_i].selector) {
-        mediaQuery.append(blocWidth[_i]);
+        node.append(blocWidth[_i]);
       }
@@ -73,0 +73,0 @@ }

lib/blocs.js

@@ -17,3 +17,3 @@ 'use strict';
 
-exports.default = function (opts, rootCss, blocs) {
+exports.default = function (blocs, node, opts) {
   if (blocs.length) {
@@ -32,4 +32,4 @@ var bloc = _postcss2.default.rule();
 
-    rootCss.append(bloc);
+    node.append(bloc);
   }
 };

lib/columns-query.js

@@ -17,3 +17,3 @@ 'use strict';
 
-exports.default = function (opts, breakpoint, mediaQuery, columns) {
+exports.default = function (columns, node, opts, breakpoint) {
   if (columns.length) {
@@ -63,3 +63,3 @@ var columnCount = {};
       if (columnCount[_index].selector) {
-        mediaQuery.append(columnCount[_index]);
+        node.append(columnCount[_index]);
       }
@@ -66,0 +66,0 @@ }

lib/columns.js

@@ -17,3 +17,3 @@ 'use strict';
 
-exports.default = function (opts, rootCss, columns) {
+exports.default = function (columns, node, opts) {
   if (columns.length) {
@@ -25,4 +25,4 @@ var columnsGap = _postcss2.default.rule();
 
-    rootCss.append(columnsGap);
+    node.append(columnsGap);
   }
 };

lib/containers-query.js

@@ -13,3 +13,3 @@ 'use strict';
 
-exports.default = function (opts, breakpoint, mediaQuery, containers) {
+exports.default = function (containers, node, opts, breakpoint) {
   if (containers.length) {
@@ -22,4 +22,4 @@ var containerQuery = _postcss2.default.rule();
 
-    mediaQuery.append(containerQuery);
+    node.append(containerQuery);
   }
 };

lib/containers.js

@@ -13,3 +13,3 @@ 'use strict';
 
-exports.default = function (opts, rootCss, containers) {
+exports.default = function (containers, node, opts) {
   if (containers.length) {
@@ -28,4 +28,4 @@ var container = _postcss2.default.rule();
 
-    rootCss.append(container);
+    node.append(container);
   }
 };

lib/fractions.js

@@ -17,3 +17,3 @@ 'use strict';
 
-exports.default = function (opts, rootCss, fractions) {
+exports.default = function (fractions, node, opts) {
   if (fractions.length) {
@@ -33,3 +33,3 @@ var fractionFloat = _postcss2.default.rule();
 
-    rootCss.append(fractionFloat);
+    node.append(fractionFloat);
 
@@ -53,3 +53,3 @@ for (var total = 2; total < fractions.length; total++) {
 
-            rootCss.append(fraction);
+            node.append(fraction);
           }
@@ -56,0 +56,0 @@ }

lib/hides-query.js

@@ -13,3 +13,3 @@ 'use strict';
 
-exports.default = function (breakpoint, mediaQuery, hides) {
+exports.default = function (hides, node, breakpoint) {
   if (hides.length && hides[breakpoint] && hides[breakpoint].length) {
@@ -22,4 +22,4 @@ var hide = _postcss2.default.rule();
 
-    mediaQuery.append(hide);
+    node.append(hide);
   }
 };

lib/index.js

@@ -39,3 +39,4 @@ 'use strict';
     shows: [],
-    hides: []
+    hides: [],
+    customStyles: []
   };
@@ -46,4 +47,4 @@
   return function (css) {
-    css.walkAtRules('structure', function (rule) {
-      rule.walkDecls(function (decl) {
+    css.walkAtRules('structure', function (structureAtRule) {
+      structureAtRule.walkDecls(function (decl) {
         if (decl.prop.match(/^unit/) || decl.prop.match(/^gutter/) || decl.prop.match(/^padding/) || decl.prop.match(/^max/) || decl.prop.match(/^min/)) {
@@ -56,2 +57,9 @@ opts[decl.prop] = parseFloat(decl.value, 10);
 
+      css.walkAtRules('structure-media', function (mediaAtRule) {
+        mediaAtRule.walkRules(function (rule) {
+          e.customStyles[mediaAtRule.params] = e.customStyles[mediaAtRule.params] || [];
+          e.customStyles[mediaAtRule.params].push(rule);
+        });
+      });
+
       css.walkDecls(function (decl) {
@@ -62,5 +70,7 @@ if (decl.prop.match(/^structure/)) {
             e.containers.push(decl.parent.selector);
+
             _utils2.default.declClean(decl);
           } else if (value[0] === 'row') {
             e.rows.push(decl.parent.selector);
+
             _utils2.default.declClean(decl);
@@ -121,5 +131,5 @@ } else if (value[0] === 'bloc') {
       });
-      // console.log(util.inspect(e.columns, false, null));
+      // console.log(util.inspect(e.customStyles, false, null));
       (0, _structure2.default)(opts, rootCss, e);
-      rule.replaceWith(rootCss);
+      structureAtRule.replaceWith(rootCss);
     });
@@ -126,0 +136,0 @@ };

lib/rights-query.js

@@ -13,3 +13,3 @@ 'use strict';
 
-exports.default = function (opts, breakpoint, mediaQuery, rights) {
+exports.default = function (rights, node, opts, breakpoint) {
   if (rights.length && rights[breakpoint] && rights[breakpoint].length) {
@@ -26,4 +26,4 @@ var right = _postcss2.default.rule();
 
-    mediaQuery.append(right);
+    node.append(right);
   }
 };

lib/rows.js

@@ -13,3 +13,3 @@ 'use strict';
 
-exports.default = function (opts, rootCss, rows) {
+exports.default = function (rows, node, opts) {
   if (rows.length) {
@@ -30,3 +30,3 @@ var row = _postcss2.default.rule();
 
-    rootCss.append(row);
+    node.append(row);
 
@@ -40,4 +40,4 @@ rowClearfix.selectors = rows.map(function (selector) {
 
-    rootCss.append(rowClearfix);
+    node.append(rowClearfix);
   }
 };

lib/shows-query.js

@@ -13,3 +13,3 @@ 'use strict';
 
-exports.default = function (breakpoint, mediaQuery, shows) {
+exports.default = function (shows, node, breakpoint) {
   if (shows.length && shows[breakpoint] && shows[breakpoint].length) {
@@ -22,4 +22,4 @@ var show = _postcss2.default.rule();
 
-    mediaQuery.append(show);
+    node.append(show);
   }
 };

lib/structure.js

@@ -67,2 +67,6 @@ 'use strict';
 
+var _customStyles = require('./custom-styles');
+
+var _customStyles2 = _interopRequireDefault(_customStyles);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -73,10 +77,11 @@
 
-  (0, _containers2.default)(opts, rootCss, e.containers);
-  (0, _rows2.default)(opts, rootCss, e.rows);
-  (0, _blocs2.default)(opts, rootCss, e.blocs);
-  (0, _fractions2.default)(opts, rootCss, e.fractions);
-  (0, _blocs2.default)(opts, rootCss, e.blobs);
-  (0, _blobsFloatQuery2.default)(opts, 0, rootCss, e.blobs);
-  (0, _blobsQuery2.default)(opts, 0, rootCss, e.blobs);
-  (0, _columns2.default)(opts, rootCss, e.columns);
+  (0, _containers2.default)(e.containers, rootCss, opts);
+  (0, _rows2.default)(e.rows, rootCss, opts);
+  (0, _blocs2.default)(e.blocs, rootCss, opts);
+  (0, _fractions2.default)(e.fractions, rootCss, opts);
+  (0, _blocs2.default)(e.blobs, rootCss, opts);
+  (0, _blobsFloatQuery2.default)(e.blobs, rootCss, opts, 0);
+  (0, _blobsQuery2.default)(e.blobs, rootCss, opts, 0);
+  (0, _columns2.default)(e.columns, rootCss, opts);
+  (0, _customStyles2.default)(e.customStyles, rootCss, 0);
 
@@ -87,13 +92,15 @@ for (var breakpoint = opts.min; breakpoint <= opts.max; breakpoint++) {
 
-    (0, _containersQuery2.default)(opts, breakpoint, mediaQuery, e.containers);
-    (0, _blocsFloatQuery2.default)(opts, breakpoint, mediaQuery, e.blocs);
-    (0, _blocsQuery2.default)(opts, breakpoint, mediaQuery, e.blocs);
-    (0, _blobsFloatQuery2.default)(opts, breakpoint, mediaQuery, e.blobs);
-    (0, _blobsQuery2.default)(opts, breakpoint, mediaQuery, e.blobs);
-    (0, _showsQuery2.default)(breakpoint, mediaQuery, e.shows);
-    (0, _hidesQuery2.default)(breakpoint, mediaQuery, e.hides);
-    (0, _rightsQuery2.default)(opts, breakpoint, mediaQuery, e.rights);
-    (0, _columnsQuery2.default)(opts, breakpoint, mediaQuery, e.columns);
+    (0, _containersQuery2.default)(e.containers, mediaQuery, opts, breakpoint);
+    (0, _blocsFloatQuery2.default)(e.blocs, mediaQuery, opts, breakpoint);
+    (0, _blocsQuery2.default)(e.blocs, mediaQuery, opts, breakpoint);
+    (0, _blobsFloatQuery2.default)(e.blobs, mediaQuery, opts, breakpoint);
+    (0, _blobsQuery2.default)(e.blobs, mediaQuery, opts, breakpoint);
+    (0, _showsQuery2.default)(e.shows, mediaQuery, breakpoint);
+    (0, _hidesQuery2.default)(e.hides, mediaQuery, breakpoint);
+    (0, _rightsQuery2.default)(e.rights, mediaQuery, opts, breakpoint);
+    (0, _columnsQuery2.default)(e.columns, mediaQuery, opts, breakpoint);
+    (0, _customStyles2.default)(e.customStyles, mediaQuery, breakpoint);
+
     rootCss.append(mediaQuery);
   }
 };

package.json

 {
   "name": "postcss-structure",
-  "version": "0.7.9",
+  "version": "0.8.0",
   "description": "A PostCSS plugin to create CSS grids based on a fixed block width.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -12,3 +12,2 @@ # postcss-structure [![Build Status][ci-img]][ci]
 
-
 ## Installation
@@ -72,2 +71,3 @@
 - [Right](#right)
+- [Custom styles](#custom-styles)
 
@@ -88,3 +88,3 @@ ### Containers
 
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/01.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/01.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/01.html)
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/01.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/01.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/01.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/01.html)
 
@@ -105,3 +105,3 @@ ### Rows
 
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/02.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/02.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/02.html)
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/02.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/02.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/02.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/02.html)
 
@@ -130,5 +130,5 @@ ### Blocs
 
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/03.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/03.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/03.html)
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/03.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/03.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/03.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/03.html)
 
-Example (with offset): [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/04.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/04.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/04.html)
+Example (with offset): [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/04.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/04.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/04.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/04.html)
 
@@ -150,3 +150,3 @@ ### Fractions
 
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/05.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/05.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/05.html)
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/05.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/05.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/05.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/05.html)
 
@@ -171,3 +171,3 @@ ### Blobs
 
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/06.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/06.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/06.html)
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/06.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/06.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/06.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/06.html)
 
@@ -194,5 +194,5 @@ ### Columns
 
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/07.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/07.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/07.html)
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/07.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/07.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/07.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/07.html)
 
-Example (with offset): [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/08.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/08.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/08.html)
+Example (with offset): [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/08.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/08.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/08.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/08.html)
 
@@ -211,3 +211,3 @@ ### Show
 
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/09.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/09.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/09.html)
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/09.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/09.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/09.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/09.html)
 
@@ -238,2 +238,16 @@ ### Hide
 
-Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/10.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/10.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/10.html)
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/10.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/10.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/10.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/10.html)
+
+### Custom styles
+
+``` css
+@structure-media [breakpoint] {
+    .myClass {
+        …
+    }
+}
+```
+
+- _breakpoint_: classes are applied when the screen is wider than breakpoint. To set the default styles (mobile first), use `@structure-media 0 { …`.
+
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/11.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/11.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/11.html), [demo](http://localhost/francoisromain.github.io/postcss-structure/test/11.html)

test/tests.js

@@ -13,2 +13,3 @@ import postcss from 'postcss';
 import test10 from './10';
+import test11 from './11';
 import plugin from '../src/index';
@@ -34,1 +35,2 @@
 test('right', t => run(t, test10.input, test10.output, {}));
+test('custom styles', t => run(t, test11.input, test11.output, {}));

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

61797

increased by10.09%

Number of package files

41

increased by10.81%

Lines of code

1889

increased by13.32%

Number of lines in readme file

244

increased by6.09%

No dependency changes