diff --git a/addon/styles/helpers/index.css b/addon/styles/helpers/index.css index 0936e898..3acb4117 100644 --- a/addon/styles/helpers/index.css +++ b/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%; diff --git a/ember-cli-build.js b/ember-cli-build.js index 2243ae35..92ab2105 100644 --- a/ember-cli-build.js +++ b/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: [ diff --git a/index.js b/index.js index d9581db2..8e6587da 100644 --- a/index.js +++ b/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: ['ember-styleguide.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')); }, diff --git a/package-lock.json b/package-lock.json index 73225d87..46c158ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3134,15 +3134,6 @@ "tree-sync": "^1.2.2" } }, - "broccoli-file-creator": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/broccoli-file-creator/-/broccoli-file-creator-2.1.1.tgz", - "integrity": "sha512-YpjOExWr92C5vhnK0kmD81kM7U09kdIRZk9w4ZDCDHuHXW+VE/x6AGEOQQW3loBQQ6Jk+k+TSm8dESy4uZsnjw==", - "requires": { - "broccoli-plugin": "^1.1.0", - "mkdirp": "^0.5.1" - } - }, "broccoli-filter": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/broccoli-filter/-/broccoli-filter-1.3.0.tgz", @@ -3393,18 +3384,6 @@ "postcss": "^7.0.5" } }, - "broccoli-postcss-single": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/broccoli-postcss-single/-/broccoli-postcss-single-3.0.0.tgz", - "integrity": "sha512-+CsV6zdK9CXTplZvQeAsZm7mEh+BwIN6GBzpqm7agqsMZTvW6kkcWDaL2ahG1+Aq2HfLYk1Sam6iQ3jdESNmPA==", - "requires": { - "broccoli-caching-writer": "^3.0.3", - "include-path-searcher": "^0.1.0", - "mkdirp": "^0.5.1", - "object-assign": "^4.1.1", - "postcss": "^7.0.0" - } - }, "broccoli-rollup": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/broccoli-rollup/-/broccoli-rollup-2.1.1.tgz", @@ -6401,19 +6380,6 @@ "resolved": "https://registry.npmjs.org/ember-cli-path-utils/-/ember-cli-path-utils-1.0.0.tgz", "integrity": "sha1-Tjmvi1UwHN3FAXc5t3qAT7ogce0=" }, - "ember-cli-postcss": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ember-cli-postcss/-/ember-cli-postcss-4.2.1.tgz", - "integrity": "sha512-tbJuvyjwNXUeY80nvwfypkQlc4GSX5AVhCwW+B9gj3KZBg0aOETeWNwZLP9ZB5mWlDI8AYacNkkHdaxOM5YFgw==", - "requires": { - "broccoli-file-creator": "^2.1.1", - "broccoli-merge-trees": "^3.0.0", - "broccoli-postcss": "^5.0.0", - "broccoli-postcss-single": "^3.0.0", - "ember-cli-babel": "^7.1.0", - "merge": "^1.2.0" - } - }, "ember-cli-preprocess-registry": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/ember-cli-preprocess-registry/-/ember-cli-preprocess-registry-3.3.0.tgz", @@ -10901,11 +10867,6 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, - "include-path-searcher": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/include-path-searcher/-/include-path-searcher-0.1.0.tgz", - "integrity": "sha1-wM8t36Fk+y6uB7x8pDp/GRy0170=" - }, "indent-string": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz", @@ -12298,8 +12259,7 @@ "lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", - "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=", - "dev": true + "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=" }, "lodash.identity": { "version": "2.3.0", @@ -12751,11 +12711,6 @@ "yargs-parser": "^10.0.0" } }, - "merge": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz", - "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==" - }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", diff --git a/package.json b/package.json index d3f1b337..c462ad0a 100644 --- a/package.json +++ b/package.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", diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css index 26eec054..90a322f8 100644 --- a/tests/dummy/app/styles/app.css +++ b/tests/dummy/app/styles/app.css @@ -1,4 +1,4 @@ -@import 'color-pallet'; +@import 'color-pallet.css'; .self-executing-code-block { margin-bottom: 2rem;