Fix inclusion order (#56)

* Fix inclusion order

Tailwind was getting included at the end of vendor.css, making it
impossible for addons to override or @extend Tailwind classes.

I am still not completely sure how the Tailwind file ends up in the
build, because it seems to work without any sort of @import statement
on the addon's behalf. Perhaps all *.css files under `/addon` are
included automatically.

In any case, tweaking the location of the built Tailwind output
file made it so it was included at the beginning, thus allowing
addons to override Tailwind classes.

* Allow tailwind to be imported by addons

* Extract CopyTailwinBuildPlugin

* Updates

* Ignore DEBUG

* Remove DEBUG

* Fix dep order

.gitignore

@@ -16,6 +16,7 @@
 /npm-debug.log*
 /testem.log
 /yarn-error.log
+DEBUG
 
 # ember-try
 /.node_modules.ember-try/

.npmignore

@@ -15,6 +15,7 @@ bower.json
 ember-cli-build.js
 testem.js
 yarn.lock
+DEBUG
 
 # ember-try
 .node_modules.ember-try/

index.js

@@ -4,9 +4,11 @@ const fs = require('fs');
 const path = require('path');
 const Funnel = require('broccoli-funnel');
 const Rollup = require('broccoli-rollup');
+const Merge = require('broccoli-merge-trees');
 const BuildTailwindPlugin = require('./lib/build-tailwind-plugin');
 const resolve = require('rollup-plugin-node-resolve');
 const commonjs = require('rollup-plugin-commonjs');
+const debugTree = require('broccoli-debug').buildDebugCallback(`ember-cli-tailwind:${this.name}`);
 
 const buildDestinations = {
   dummy: {
@@ -28,6 +30,10 @@ const validBuildTargets = Object.keys(buildDestinations);
 module.exports = {
   name: 'ember-cli-tailwind',
 
+  isDevelopingAddon() {
+    return true;
+  },
+
   included(includer) {
     this._super.included.apply(this, arguments);
 
@@ -62,16 +68,24 @@ module.exports = {
     this.tailwindInputPath = this._getInputPath(this.parent.root, buildConfig.path);
   },
 
-  treeForStyles() {
+  treeForStyles(tree) {
+    let trees = tree ? [ tree ] : [];
+
     if (this.projectType === 'app' && this._hasTailwindConfig()) {
-      return this._buildTailwind();
+      trees.push(this._buildTailwind());
     }
+
+    return new Merge(trees);
   },
 
-  treeForAddonStyles() {
+  treeForAddonStyles(tree) {
+    let trees = tree ? [ tree ] : [];
+
     if (this.projectType === 'addon' && this._hasTailwindConfig()) {
-      return this._buildTailwind();
+      trees.push(this._buildTailwind());
     }
+
+    return new Merge(trees);
   },
 
   treeForApp(tree) {
@@ -83,7 +97,7 @@ module.exports = {
       });
     }
 
-    return appTree;
+    return debugTree(appTree);
   },
 
   _shouldIncludeStyleguide() {
@@ -111,7 +125,7 @@ module.exports = {
   },
 
   _buildTailwind() {
-    let basePath = this.projectType === 'app' ? 'app/styles' : '';
+    let basePath = this.projectType === 'app' ? 'app/styles' : 'addon/styles';
     let tailwindConfig = new Rollup(this.tailwindInputPath, {
       rollup: {
         input: 'config/tailwind.js',
@@ -128,7 +142,10 @@ module.exports = {
 
     return new BuildTailwindPlugin([this.tailwindInputPath, tailwindConfig], {
       srcFile: path.join('modules.css'),
-      destFile: path.join(basePath, 'tailwind.css')
+      destFile: path.join(basePath, 'tailwind.css'),
+      didBuild: tailwindOuputFile => {
+        this.tailwindOutputFile = tailwindOuputFile;
+      }
     });
   },
 

lib/build-tailwind-plugin.js

@@ -13,6 +13,7 @@ module.exports = class BuildTailwindPlugin extends BroccoliPlugin {
     super(inputTrees, options);
     this.srcFile = options.srcFile;
     this.destFile = options.destFile;
+    this.didBuild = options.didBuild;
   }
 
   build() {
@@ -28,6 +29,8 @@ module.exports = class BuildTailwindPlugin extends BroccoliPlugin {
     .then(result => {
       fs.ensureDirSync(path.dirname(outputFile));
       fs.writeFileSync(outputFile, result.css)
+
+      this.didBuild(outputFile);
     });
   }
 

lib/copy-tailwind-build-plugin.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const fs = require('fs-extra');
+const BroccoliPlugin = require('broccoli-plugin');
+
+module.exports = class CopyTailwindBuildPlugin extends BroccoliPlugin {
+
+  constructor(inputTrees, project) {
+    super(inputTrees);
+
+    this.project = project;
+  }
+
+  build() {
+    let outputFile = path.join(this.outputPath, 'tailwind.css');
+    let tailwindFile = this.project.findOwnAddonByName('ember-cli-tailwind').tailwindOutputFile;
+    let tailwindCSS = fs.readFileSync(tailwindFile, 'utf-8');
+
+    fs.writeFileSync(outputFile, tailwindCSS);
+  }
+}

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "broccoli-funnel": "^2.0.1",
+    "broccoli-merge-trees": "^3.0.1",
     "broccoli-plugin": "^1.3.0",
     "broccoli-rollup": "^2.0.0",
     "ember-cli-babel": "^6.6.0",
@@ -34,9 +35,7 @@
     "ember-cli-string-utils": "^1.1.0",
     "ember-composable-helpers": "^2.1.0",
     "ember-truth-helpers": "^2.0.0",
-    "fixturify": "^0.3.4",
     "fs-extra": "^5.0.0",
-    "jsdom": "^11.6.2",
     "postcss": "^6.0.20",
     "postcss-easy-import": "^3.0.0",
     "rollup-plugin-commonjs": "^8.3.0",
@@ -45,6 +44,7 @@
   },
   "devDependencies": {
     "broccoli-asset-rev": "^2.7.0",
+    "broccoli-debug": "^0.6.4",
     "broccoli-test-helper": "^1.2.0",
     "chai": "^4.1.2",
     "ember-ajax": "^3.0.0",
@@ -56,6 +56,7 @@
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-qunit": "^4.3.2",
     "ember-cli-shims": "^1.2.0",
+    "ember-cli-sass": "7.1.7",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^2.0.0",
     "ember-disable-prototype-extensions": "^1.1.2",
@@ -69,6 +70,8 @@
     "ember-try": "^0.2.23",
     "eslint-plugin-ember": "^5.0.0",
     "eslint-plugin-node": "^6.0.1",
+    "fixturify": "^0.3.4",
+    "jsdom": "^11.6.2",
     "loader.js": "^4.2.3",
     "mocha": "^5.1.1",
     "qunit-dom": "^0.6.2"

scripts/link-them.sh

@@ -2,7 +2,11 @@
 # Copied from https://github.com/ef4/ember-auto-import/blob/master/scripts/link-them.sh
 set -e
 
-# Scenario 1: App using Tailwind
+
+###
+### Scenario 1: App using Tailwind
+###
+
 # All packages get a node_modules directory and a .bin link
 for package in "sample-app"; do
     mkdir -p ./test-projects/scenario-1-app-using-tailwind/$package/node_modules
@@ -20,7 +24,12 @@ for package in "sample-app"; do
     popd > /dev/null
 done
 
-# Scenario 2: Addon using Tailwind
+
+
+###
+### Scenario 2: Addon using Tailwind
+###
+
 # All packages get a node_modules directory and a .bin link
 for package in "sample-app" "sample-addon"; do
     mkdir -p ./test-projects/scenario-2-addon-using-tailwind/$package/node_modules
@@ -46,7 +55,11 @@ for package in "sample-app"; do
     popd > /dev/null
 done
 
-# Scenario 3: Disabled styleguide
+
+###
+### Scenario 3: Disabled styleguide
+###
+
 # All packages get a node_modules directory and a .bin link
 for package in "sample-addon" "sample-addon-with-tailwind"; do
     mkdir -p ./test-projects/scenario-3-disabled-styleguide/$package/node_modules
@@ -71,3 +84,33 @@ for package in "sample-addon"; do
     ln -s ../../sample-addon-with-tailwind ./sample-addon-with-tailwind
     popd > /dev/null
 done
+
+
+###
+### Scenario 4: Addon using Sass
+###
+
+# All packages get a node_modules directory and a .bin link
+for package in "sample-app" "sample-addon"; do
+    mkdir -p ./test-projects/scenario-4-addon-using-sass/$package/node_modules
+    pushd ./test-projects/scenario-4-addon-using-sass/$package/node_modules > /dev/null
+    rm -rf .bin
+    ln -s ../../../../node_modules/.bin .bin
+    popd > /dev/null
+done
+
+# These packages get to depend on ember-cli-tailwind
+for package in "sample-addon"; do
+    pushd ./test-projects/scenario-4-addon-using-sass/$package/node_modules > /dev/null
+    rm -rf ./ember-cli-tailwind
+    ln -s ../../../.. ./ember-cli-tailwind
+    popd > /dev/null
+done
+
+# These packages get to depend on our sample-addon
+for package in "sample-app"; do
+    pushd ./test-projects/scenario-4-addon-using-sass/$package/node_modules > /dev/null
+    rm -rf ./sample-addon
+    ln -s ../../sample-addon ./sample-addon
+    popd > /dev/null
+done

scripts/test.sh

@@ -6,4 +6,5 @@ cd test-projects/scenario-2-addon-using-tailwind/sample-addon && yarn test
 cd test-projects/scenario-2-addon-using-tailwind/sample-app && yarn test
 cd test-projects/scenario-3-disabled-styleguide/sample-addon && yarn test
 cd test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind && yarn test
+cd test-projects/scenario-4-addon-using-sass/sample-addon && yarn test
 EOF

test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/styles/addon.css

@@ -0,0 +1,3 @@
+.text-secondary {
+  color: orange;
+}

test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/colors.js

@@ -15,6 +15,7 @@
 */
 
 export default {
+  'white': 'white',
   'brand': '#E04E39',
-  'white': 'white'
+  'secondary': 'blue'
 };

test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/acceptance/dummy-app-smoke-test.js

@@ -22,3 +22,12 @@ test(`I can use my addon's Tailwind components in my addon's dummy app`, async f
   let textColor = window.getComputedStyle(button).getPropertyValue("color");
   assert.equal(textColor, 'rgb(255, 255, 255)');
 });
+
+test(`My addon's classes in addon.css come after Tailwind, and thus can override them`, async function(assert) {
+  await visit('/');
+
+  let paragraph = find('p.text-secondary')[0];
+  let textColor = window.getComputedStyle(paragraph).getPropertyValue("color");
+
+  assert.equal(textColor, 'rgb(255, 165, 0)');
+});

test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/dummy/app/templates/application.hbs

@@ -6,4 +6,8 @@
   Click me
 {{/ui-button}}
 
+<p class='text-secondary'>
+  My addon's classes should come after Tailwind's
+</p>
+
 {{outlet}}

test-projects/scenario-4-addon-using-sass/sample-addon/.bin

@@ -0,0 +1 @@
+../../../node_modules/.bin

test-projects/scenario-4-addon-using-sass/sample-addon/.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.hbs]
+insert_final_newline = false
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

test-projects/scenario-4-addon-using-sass/sample-addon/.ember-cli

@@ -0,0 +1,9 @@
+{
+  /**
+    Ember CLI sends analytics information by default. The data is completely
+    anonymous, but there are times when you might want to disable this behavior.
+
+    Setting `disableAnalytics` to true will prevent any data from being sent.
+  */
+  "disableAnalytics": false
+}

test-projects/scenario-4-addon-using-sass/sample-addon/.eslintignore

@@ -0,0 +1 @@
+/blueprints/*/files/**/*.js

test-projects/scenario-4-addon-using-sass/sample-addon/.eslintrc.js

@@ -0,0 +1,60 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 2017,
+    sourceType: 'module'
+  },
+  plugins: [
+    'ember'
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended'
+  ],
+  env: {
+    browser: true
+  },
+  rules: {
+  },
+  overrides: [
+    // node files
+    {
+      files: [
+        'ember-cli-build.js',
+        'index.js',
+        'testem.js',
+        'blueprints/*/index.js',
+        'config/**/*.js',
+        'tests/dummy/config/**/*.js'
+      ],
+      excludedFiles: [
+        'addon/**',
+        'addon-test-support/**',
+        'app/**',
+        'tests/dummy/app/**'
+      ],
+      parserOptions: {
+        sourceType: 'script',
+        ecmaVersion: 2015
+      },
+      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
+      })
+    },
+
+    // test files
+    {
+      files: ['tests/**/*.js'],
+      excludedFiles: ['tests/dummy/**/*.js'],
+      env: {
+        embertest: true
+      }
+    },
+
+  ]
+};