Moving to a more stable way of compiling the styles

.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

.ember-cli

@@ -1,5 +1,4 @@
 {
-  "usePods": true,
   /**
     Ember CLI sends analytics information by default. The data is completely
     anonymous, but there are times when you might want to disable this behavior.

.eslintrc.js

@@ -1,8 +1,14 @@
+'use strict';
+
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
-    ecmaVersion: 2017,
-    sourceType: 'module'
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
   },
   plugins: [
     'ember'
@@ -14,12 +20,12 @@ module.exports = {
   env: {
     browser: true
   },
-  rules: {
-  },
+  rules: {},
   overrides: [
     // node files
     {
       files: [
+        'lib/**/*.js',
         '.eslintrc.js',
         '.template-lintrc.js',
         'ember-cli-build.js',
@@ -36,17 +42,14 @@ module.exports = {
         'tests/dummy/app/**'
       ],
       parserOptions: {
-        sourceType: 'script',
-        ecmaVersion: 2015
+        sourceType: 'script'
       },
       env: {
         browser: false,
         node: true
       },
       plugins: ['node'],
-      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
-        // add your custom rules and overrides for node files here
-      })
+      extends: ['plugin:node/recommended']
     }
   ]
 };

.gitignore

@@ -9,6 +9,8 @@
 /node_modules/
 
 # misc
+/.env*
+/.pnp*
 /.sass-cache
 /connect.lock
 /coverage/

.npmignore

@@ -9,8 +9,10 @@
 /.bowerrc
 /.editorconfig
 /.ember-cli
+/.env*
 /.eslintignore
 /.eslintrc.js
+/.git/
 /.gitignore
 /.template-lintrc.js
 /.travis.yml

.template-lintrc.js

@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended'
+  extends: 'octane'
 };

.travis.yml

@@ -5,8 +5,7 @@ node_js:
   # so that your addon works for all apps
   - "10"
 
-sudo: false
-dist: trusty
+dist: xenial
 
 addons:
   chrome: stable
@@ -26,42 +25,41 @@ branches:
     - /^v\d+\.\d+\.\d+/
 
 jobs:
-  fail_fast: true
+  fast_finish: true
   allow_failures:
     - env: EMBER_TRY_SCENARIO=ember-canary
 
   include:
     # runs linting and tests with current locked deps
-
     - stage: "Tests"
       name: "Tests"
-      install:
-        - yarn install --non-interactive
       script:
-        - yarn lint:hbs
-        - yarn lint:js
-        - yarn test
+        - yarn lint
+        - yarn test:ember
 
-    - name: "Floating Dependencies"
+    - stage: "Additional Tests"
+      name: "Floating Dependencies"
+      install:
+        - yarn install --no-lockfile --non-interactive
       script:
-        - yarn test
+        - yarn test:ember
 
     # we recommend new addons test the current and previous LTS
     # as well as latest stable release (bonus points to beta/canary)
-    - stage: "Additional Tests"
-      env: EMBER_TRY_SCENARIO=ember-lts-2.16
-    - env: EMBER_TRY_SCENARIO=ember-lts-2.18
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.12
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.16
     - env: EMBER_TRY_SCENARIO=ember-release
     - env: EMBER_TRY_SCENARIO=ember-beta
     - env: EMBER_TRY_SCENARIO=ember-canary
     - env: EMBER_TRY_SCENARIO=ember-default-with-jquery
+    - env: EMBER_TRY_SCENARIO=ember-classic
 
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - export PATH=$HOME/.yarn/bin:$PATH
 
 install:
-  - yarn install --no-lockfile --non-interactive
+  - yarn install --non-interactive
 
 script:
   - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO

CONTRIBUTING.md

@@ -3,14 +3,14 @@
 ## Installation
 
 * `git clone <repository-url>`
-* `cd my-addon`
-* `npm install`
+* `cd ember-component-css`
+* `yarn install`
 
 ## Linting
 
-* `npm run lint:hbs`
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+* `yarn lint:hbs`
+* `yarn lint:js`
+* `yarn lint:js --fix`
 
 ## Running tests
 
@@ -23,4 +23,4 @@
 * `ember serve`
 * Visit the dummy application at [http://localhost:4200](http://localhost:4200).
 
-For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
+For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

addon/instance-initializers/route-styles.js → addon/instance-initializers/add-style-namespaces.js

@@ -1,11 +1,12 @@
-import initRouteStyles from '../utils/init-route-styles';
+import addRouteStyleNamespace from 'ember-component-css/utils/add-route-style-namespace';
+import addComponentStyleNamespace from 'ember-component-css/utils/add-component-style-namespace';
+
 
-// This file is removed from the build in Ember < 3.6
 export function initialize(appInstance) {
   let router = appInstance.lookup('service:router');
   router.on('routeDidChange', function({ to }) {
     if (likeRouteInfo(to)) {
-      initRouteStyles(appInstance, nestedRouteNames(to));
+      addRouteStyleNamespace(appInstance, nestedRouteNames(to));
     }
   });
 
@@ -16,10 +17,12 @@ export function initialize(appInstance) {
           // loading route names are set with an _loading even though
           // their path is -loading
           .map(name => name.replace(/_loading$/, '-loading'));
-        initRouteStyles(appInstance, routeNames);
+        addRouteStyleNamespace(appInstance, routeNames);
       }
     }
   });
+
+  addComponentStyleNamespace(appInstance);
 }
 
 function nestedRouteNames({ name, parent }, routeNames = []) {
@@ -31,9 +34,9 @@ function nestedRouteNames({ name, parent }, routeNames = []) {
 }
 
 function likeRouteInfo(info) {
-  return info && typeof info === 'object' && info.hasOwnProperty('name');
+  return info && typeof info === 'object' && Object.prototype.hasOwnProperty.call(info, 'name');
 }
 
 export default {
   initialize
-};
+}

addon/modifiers/style-namespace.js

@@ -0,0 +1,8 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(function styleNamespace(element, classAppends = [], { buildClass, argsClass, runClass }) {
+  const mainClassNmae = argsClass || runClass || buildClass;
+  const className = [mainClassNmae, ...classAppends].join('');
+
+  element.classList.add(className);
+});

addon/utils/add-component-style-namespace.js

@@ -0,0 +1,22 @@
+import processStyleType from 'ember-component-css/utils/process-style-type';
+
+export default function addComponentStyleNamespace(owner) {
+  const styles = processStyleType(owner);
+
+  for (const styleFullName of styles) {
+    const component = owner.lookup(`component:${styleFullName}`);
+    const { styleNamespace } = owner.lookup(`style:${styleFullName}`) || {};
+
+    if (styleNamespace && component) {
+      const proto = Object.getPrototypeOf(component);
+
+      if (!component.styleNamespace) {
+        proto.styleNamespace = styleNamespace;
+      }
+
+      if (!component.classNameBindings.includes('styleNamespace')) {
+        proto.classNameBindings = component.classNameBindings.concat('styleNamespace');
+      }
+    }
+  }
+}

addon/utils/add-route-style-namespace.js

@@ -0,0 +1,17 @@
+export default function addRouteStyleNamespace(owner, routes) {
+  const classes = [];
+
+  for (const name of routes) {
+    const { styleNamespace } = owner.lookup(`style:${name}`) || {};
+    const controller = owner.lookup(`controller:${name}`);
+
+    if (styleNamespace && controller) {
+      controller.set('styleNamespace', styleNamespace);
+      classes.push(styleNamespace);
+    }
+  }
+
+  if (owner.lookup('controller:application')) {
+    owner.lookup('controller:application').set('routeStyleNamespaceClassSet', classes.join(' '));
+  }
+}