Fixed root selector support. Resolves #16

ChangeLog.md

@@ -1,3 +1,6 @@
+## 2.1.1
+* Fixed `:root` selector support
+
 ## 2.1.0 by Travis Palmer
 * Added support for nesting `@for` loops while using variables in the range that are iterators of parent `@for` loops
 * Added tests for added functionality

index.js

@@ -25,7 +25,8 @@ module.exports = postcss.plugin('postcss-for', function (opts) {
 
     manageIterStack = function (rule) {
         if (rule.parent.type !== 'root') {
-            var parentIterVar = list.space(rule.parent.params)[0];
+            console.log('\n\nRule:\n', rule, '\n\nList:\n', list, '\n\nParent:\n', rule.parent)
+            var parentIterVar = rule.parent.params && list.space(rule.parent.params)[0];
             if (iterStack.indexOf(parentIterVar) === -1) {
                 // If parent isn't in stack, wipe stack
                 iterStack.splice(0, iterStack.length);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-for",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "PostCSS plugin that enables SASS-like for loop syntax in your CSS",
   "keywords": [
     "postcss",
@@ -28,7 +28,8 @@
     "chai": "3.2.0",
     "gulp": "3.9.0",
     "gulp-eslint": "0.11.1",
-    "gulp-mocha": "2.1.3"
+    "gulp-mocha": "2.1.3",
+    "postcss-custom-properties": "^5.0.1"
   },
   "scripts": {
     "test": "gulp"

test/test.js

@@ -2,9 +2,10 @@ var postcss = require('postcss');
 var expect  = require('chai').expect;
 
 var plugin = require('../');
+var postcssCustomProps = require('postcss-custom-properties');
 
 var test = function (input, output, opts) {
-    expect(postcss([plugin(opts)]).process(input).css).to.eql(output);
+    expect(postcss([plugin(opts), postcssCustomProps]).process(input).css).to.eql(output);
 };
 
 describe('postcss-for', function () {
@@ -79,4 +80,9 @@ describe('postcss-for', function () {
         }).to.throw('<css input>:2:23: External variable (not from a parent for loop) cannot be used as a range parameter');
     });
 
+    it('it supports :root selector', function () {
+      test(':root { \n@for $weight from 100 to 900 by 100 \n{ --foo-$(weight): $weight; }\n}\n.b { font-weight: var(--foo-200) }',
+           '.b { font-weight: 200 }');
+    });
+
 });