manually run postcss and add it to vendor

Author: mansona

addon/styles/helpers/index.css

@@ -1,9 +1,9 @@
-@import 'unstyled.css';
-@import 'embed.css';
-@import 'flex.css';
-@import 'margin.css';
-@import 'padding.css';
-@import 'rounded.css';
+@import 'helpers/unstyled.css';
+@import 'helpers/embed.css';
+@import 'helpers/flex.css';
+@import 'helpers/margin.css';
+@import 'helpers/padding.css';
+@import 'helpers/rounded.css';
 
 .img-fluid {
   width: 100%;

ember-cli-build.js

@@ -1,9 +1,6 @@
 'use strict';
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
-const CssImport = require('postcss-import')
-const PresetEnv = require('postcss-preset-env');
-
 module.exports = function(defaults) {
   let app = new EmberAddon(defaults, {
     fingerprint: {
@@ -18,21 +15,6 @@ module.exports = function(defaults) {
         'tests/dummy/public'
       ]
     },
-    postcssOptions: {
-      compile: {
-        enabled: true,
-        plugins: [
-          { module: CssImport },
-          {
-            module: PresetEnv,
-            options: {
-              stage: 3,
-              features: { 'nesting-rules': true }
-            }
-          }
-        ]
-      }
-    },
     // required until https://github.com/ember-cli/ember-cli/issues/8448 is fixed
     'ember-prism': {
       components: [

index.js

@@ -5,26 +5,16 @@ const path = require('path');
 const CssImport = require('postcss-import');
 const PresetEnv = require('postcss-preset-env');
 
+const broccoliPostCSS = require('broccoli-postcss')
+const mergeTrees = require('broccoli-merge-trees');
+const funnel = require('broccoli-funnel');
+const get = require('lodash.get');
+const { join } = require('path');
+
 module.exports = {
   name: require('./package').name,
 
   options: {
-    postcssOptions: {
-      compile: {
-        enabled: true,
-        plugins: [
-          { module: CssImport },
-          {
-            module: PresetEnv,
-            options: {
-              stage: 3,
-              features: { 'nesting-rules': true }
-            }
-          }
-        ]
-      }
-    },
-
     svgJar: {
       sourceDirs: [
         'public/images/icons',
@@ -34,6 +24,36 @@ module.exports = {
     },
   },
 
+  treeForAddon() {
+    var tree = this._super(...arguments);
+
+    const addonWithoutStyles = funnel(tree, {
+      exclude: ['**/*.css'],
+    });
+
+    const addonStyles = funnel(tree, {
+      include: ['**/*.css']
+    });
+
+    // I don't know exactly why targets is private so I am using `get()` to make
+    // sure that it isn't missing
+    let overrideBrowserslist = get(this, 'app.project._targets.browsers');
+
+    let processedStyles = broccoliPostCSS(addonStyles, {
+      plugins: [
+        CssImport({
+          path: join(__dirname, 'addon', 'styles'),
+        }),
+        PresetEnv({
+          stage: 3,
+          features: { 'nesting-rules': true },
+          overrideBrowserslist,
+        })
+      ]});
+
+    return mergeTrees([addonWithoutStyles, processedStyles]);
+  },
+
   treeForPublic: function() {
     return new Funnel(path.join(this.root, 'public'));
   },

package-lock.json

@@ -29,12 +29,13 @@
     "@ember/render-modifiers": "^1.0.0",
     "broccoli-funnel": "^2.0.1",
     "broccoli-merge-trees": "^3.0.1",
+    "broccoli-postcss": "^5.0.0",
     "ember-angle-bracket-invocation-polyfill": "^2.0.2",
     "ember-cli-babel": "^7.7.3",
     "ember-cli-htmlbars": "^3.0.1",
-    "ember-cli-postcss": "^4.2.0",
     "ember-svg-jar": "^1.2.2",
     "ember-truth-helpers": "^2.1.0",
+    "lodash.get": "^4.4.2",
     "normalize.css": "^8.0.1",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.6.0",