feat(route-namesapce): Enable name-spacing of route styles

Added in a `styleNamespace` on a controller and a `routeStyleNamespaceClassSet` on the application controller to enable styling for routes.

README.md

@@ -84,6 +84,25 @@ Note: If you are using more than one type of component style files (ie a .less f
 
 To use this with pods, you just need to include a style file in your component pods directory alongside your `template.hbs` or `component.js` files.
 
+### Usage with routes
+
+To use this with routes you need to use pods for the routes and modify the `application.hbs` template a little bit.
+Let's assume your `application.hbs` template looks like this:
+
+```hbs
+{{outlet}}
+```
+
+To be able to use this for routes, you need to add a wrapping `div` around the outlet:
+
+```hbs
+<div class={{routeStyleNamespaceClassSet}}>
+  {{outlet}}
+</div>
+```
+
+After that it's quite easy: add a style file in your route directory alongside your `route.js` or `template.hbs` files.
+
 ### Usage with classic (non pod) structure
 
 You can use classic Ember app structure by placing component styles in
@@ -96,13 +115,13 @@ the same component both are included but the pod style will take precedence.
 ### Use in addons
 In order to use this inside of an addon, you need to add your style files inside of the components in the
 addon directory. You will then be able to import the 'pod-styles' file inside of your addon style file which
-is in the `/addon/styles` directory. These styles will then be added to the `vendor.css` file like normal. 
+is in the `/addon/styles` directory. These styles will then be added to the `vendor.css` file like normal.
 
 If you are using classic (non pod) structure, your addon directory structure might look like:
 ```
 yourAddonDirectory
 │   index.js
-│   ... etc    
+│   ... etc
 └───addon
 │   └───components
 │       │   yourAddonComponent.js

app/initializers/route-styles.js

@@ -0,0 +1,28 @@
+import Router from '@ember/routing/router';
+import { getOwner } from '@ember/application';
+import podNames from 'ember-component-css/pod-names';
+
+Router.reopen({
+  didTransition(routes) {
+    this._super(...arguments);
+
+    const classes = [];
+    for (let route of routes) {
+      let currentPath = route.name.replace(/\./g, '/');
+
+      if (podNames[currentPath]) {
+        getOwner(this).lookup(`controller:${route.name}`).set('routeStyleNamespaceClass', podNames[currentPath]);
+        classes.push(podNames[currentPath]);
+      }
+    }
+
+    getOwner(this).lookup('controller:application').set('routeStyleNamespaceClassSet', classes.join(' '));
+  }
+});
+
+export function initialize() {}
+
+export default {
+  name: 'route-styles',
+  initialize
+};

tests/acceptance/css-test.js

@@ -44,3 +44,19 @@ test('BEM variant rule followed', function(assert) {
     assert.equal(find('[class$=__element--variant]').css('color'), 'rgb(0, 0, 5)');
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});

tests/acceptance/less-test.js

@@ -44,3 +44,23 @@ test('BEM variant rule followed', function(assert) {
     assert.equal(find('[class$=__element--variant]').css('color'), 'rgb(0, 0, 5)');
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+
+  andThen(function() {
+    visit(`/${TYPE}/nested`);
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});

tests/acceptance/sass-test.js

@@ -54,3 +54,19 @@ test('mixin psudo elements do not get scoped', function(assert) {
     assert.equal(item.css('color'), 'rgb(0, 0, 6)');
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});

tests/acceptance/scss-test.js

@@ -65,3 +65,19 @@ test('children of root @for rules are namspaced', function(assert) {
     }
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});

tests/acceptance/styl-test.js

@@ -44,3 +44,19 @@ test('BEM variant rule followed', function(assert) {
     assert.equal(find('[class$=__element--variant]').css('color'), 'rgb(0, 0, 5)');
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});

tests/dummy/app/css/nested/styles.css

@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 2, 0);
+}

tests/dummy/app/css/styles.css

@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 1, 0);
+}

tests/dummy/app/less/nested/styles.less

@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 2, 0);
+}

tests/dummy/app/less/styles.less

@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 1, 0);
+}

tests/dummy/app/router.js

@@ -4,14 +4,26 @@ import config from './config/environment';
 const Router = EmberRouter.extend({
   location: config.locationType,
   rootURL: config.rootURL
-});
+}).map(function() {
+  this.route('css', function() {
+    this.route('nested');
+  });
 
-Router.map(function() {
-  this.route('scss');
-  this.route('sass');
-  this.route('styl');
-  this.route('less');
-  this.route('css');
+  this.route('scss', function() {
+    this.route('nested');
+  });
+
+  this.route('sass', function() {
+    this.route('nested');
+  });
+
+  this.route('styl', function() {
+    this.route('nested');
+  });
+
+  this.route('less', function() {
+    this.route('nested');
+  });
 
   this.route('template-style-only');
   this.route('no-style-files-yet');

tests/dummy/app/sass/nested/styles.sass

@@ -0,0 +1,3 @@
+&
+  color: rgb(0, 2, 0);
+

tests/dummy/app/sass/styles.sass

@@ -0,0 +1,2 @@
+&
+  color: rgb(0, 1, 0)

tests/dummy/app/scss/nested/styles.scss

@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 2, 0);
+}

tests/dummy/app/scss/styles.scss

@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 1, 0);
+}

tests/dummy/app/styl/nested/styles.styl

@@ -0,0 +1,3 @@
+&
+  color: rgb(0, 2, 0);
+

tests/dummy/app/styl/styles.styl

@@ -0,0 +1,2 @@
+&
+  color rgb(0, 1, 0)

tests/dummy/app/templates/application.hbs

@@ -1 +1,3 @@
-{{outlet}}
+<div class={{routeStyleNamespaceClassSet}}>
+  {{outlet}}
+</div>