fix(scss @ rules): now allowing namespaceing of rules deinfed inside of a scss @ for rule. Fixes #216

Author: webark

ember-cli-build.js

@@ -1,11 +1,13 @@
 /* eslint-env node */
 'use strict';
 
-var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
+let EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
-  var app = new EmberAddon(defaults, {
-    // Add options here
+  let app = new EmberAddon(defaults, {
+    "ember-cli-babel": {
+      includePolyfill: true
+    },
   });
 
   /*

package.json

@@ -64,6 +64,7 @@
     "eslint-plugin-ember-suave": "^1.0.0",
     "loader.js": "^4.0.10",
     "no-style-files-yet": "file:./tests/dummy/lib/no-style-files-yet",
+    "postcss-selector-namespace": "^1.3.0",
     "second-test-addon": "file:./tests/dummy/lib/second-test-addon",
     "test-addon": "file:./tests/dummy/lib/test-addon"
   },

tests/acceptance/scss-test.js

@@ -54,3 +54,14 @@ test('mixin psudo elements do not get scoped', function(assert) {
     assert.equal(item.css('color'), 'rgb(0, 0, 6)');
   });
 });
+
+test('children of root @for rules are namspaced', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    for (let index of Array(10).keys()) {
+      let item = find(`[class$=__element--${index}]`);
+      assert.equal(item.css('color'), `rgb(0, 0, ${index})`);
+    }
+  });
+});

tests/dummy/app/components/scss/for-loop/component.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+const {
+  Component,
+} = Ember;
+
+export default Component.extend({
+  items: [...Array(10).keys()],
+});

tests/dummy/app/components/scss/for-loop/styles.scss

@@ -0,0 +1,5 @@
+@for $index from 0 through 9 {
+  &__element--#{$index} {
+    color: rgb(0, 0, $index);
+  }
+}

tests/dummy/app/components/scss/for-loop/template.hbs

@@ -0,0 +1,3 @@
+{{#each items as |item|}}
+  <span class="{{componentCssClassName}}__element--{{item}}"></span>
+{{/each}}

tests/dummy/app/scss/template.hbs

@@ -1 +1,2 @@
 {{scss/base-rules}}
+{{scss/for-loop}}