Support nested loops. Resolves #6

ChangeLog.md

@@ -1,3 +1,6 @@
+## 1.1.0
+* Added support for nested loops
+
 ## 1.0.1
 * Update examples and tests to contain valid CSS
 

index.js

@@ -3,9 +3,13 @@ var list    = require('postcss/lib/list');
 var vars    = require('postcss-simple-vars');
 
 module.exports = postcss.plugin('postcss-for', function (opts) {
+
     opts = opts || {};
+    opts.nested = opts.nested || true;
+
+    var checkNumber, checkParams, processLoops, unrollLoop;
 
-    var checkNumber = function (rule) {
+    checkNumber = function (rule) {
         return function (param) {
             if (isNaN(parseInt(param)) || !param.match(/^\d+\.?\d*$/)) {
 
@@ -18,7 +22,7 @@ module.exports = postcss.plugin('postcss-for', function (opts) {
         };
     };
 
-    var checkParams = function (rule, params) {
+    checkParams = function (rule, params) {
 
         if (!params[0].match(/(^|[^\w])\$([\w\d-_]+)/) ||
              params[1] !== 'from' ||
@@ -30,7 +34,7 @@ module.exports = postcss.plugin('postcss-for', function (opts) {
         [params[2], params[4], params[6] || '0'].forEach(checkNumber(rule));
     };
 
-    var unrollLoop = function (rule) {
+    unrollLoop = function (rule) {
         var params = list.space(rule.params);
 
         checkParams(rule, params);
@@ -44,18 +48,23 @@ module.exports = postcss.plugin('postcss-for', function (opts) {
         var value = {};
         for ( var i = index; i * dir <= top * dir; i = i + by ) {
             var content = rule.clone();
+            if (opts.nested) processLoops(content);
             value[iterator] = i;
             vars({ only: value })(content);
             rule.parent.insertBefore(rule, content.nodes);
         }
         if ( rule.parent ) rule.removeSelf();
     };
 
-    return function (css) {
+    processLoops = function (css) {
         css.eachAtRule(function (rule) {
             if ( rule.name === 'for' ) {
                 unrollLoop(rule);
             }
         });
     };
+
+    return function (css) {
+        processLoops(css);
+    };
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-for",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "PostCSS plugin that enables SASS-like for loop syntax in your CSS",
   "keywords": [
     "postcss",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "postcss": "^4.1.0",
-    "postcss-simple-vars": "^0.2.4"
+    "postcss-simple-vars": "^0.3.0"
   },
   "devDependencies": {
     "gulp-eslint": "0.11.1",

test/test.js

@@ -24,6 +24,11 @@ describe('postcss-for', function () {
              '.b-1 {\n    width: 1px\n}\n.b-3 {\n    width: 3px\n}');
     });
 
+    it('it supports nested loops', function () {
+        test('@for $i from 1 to 2 { @for $j from 1 to 2 {.b-$(i)-$(j) {} } }',
+             '.b-1-1 {}\n.b-1-2 {}\n.b-2-1 {}\n.b-2-2 {}');
+    });
+
     it('it throws an error on wrong syntax', function () {
         expect(function () {
             test('@for $i since 1 until 3 { .b-$i { width: $(i)px; } }');