release v1.2.0

[stefanpenner]

• confirm in some apps (with and without an explicit css preprocess

[XrXr]

It seems that the update has broken Ember CLI test. I just ran it locally.
clean-css is not doing @import correctly. Probably just need to pass it some path

[ember-cli]# mocha tests/acceptance/smoke-test-slow.js --grep concatenated


  Acceptance: smoke-test
    1) ember new foo, build production and verify css files are concatenated
      Running: node_modules/ember-cli/bin/ember build --environment=production in: /home/alan/projects/ember-cli/tmp/some-cool-app
version: 1.13.13-master-9b037df946

Building
Building.
Build failed.

File: assets/some-cool-app.css

Broken @import declaration of "some-styles.css"
Broken @import declaration of "some-other-styles.css"

Error: Broken @import declaration of "some-styles.css"
Broken @import declaration of "some-other-styles.css"
    at arrayToError (/home/alan/projects/ember-cli/node_modules/array-to-error/index.js:41:15)
    at minifyCallback (/home/alan/projects/ember-cli/node_modules/clean-css-promise/index.js:32:20)
    at whenSourceMapReady (/home/alan/projects/ember-cli/node_modules/clean-css/lib/clean.js:139:16)
    at Object.whenDone (/home/alan/projects/ember-cli/node_modules/clean-css/lib/clean.js:155:14)
    at processNext (/home/alan/projects/ember-cli/node_modules/clean-css/lib/imports/inliner.js:105:13)
    at importFrom (/home/alan/projects/ember-cli/node_modules/clean-css/lib/imports/inliner.js:79:10)
    at processNext (/home/alan/projects/ember-cli/node_modules/clean-css/lib/imports/inliner.js:104:16)
    at inlineLocalResource (/home/alan/projects/ember-cli/node_modules/clean-css/lib/imports/inliner.js:349:12)
    at inline (/home/alan/projects/ember-cli/node_modules/clean-css/lib/imports/inliner.js:220:10)
    at importFrom (/home/alan/projects/ember-cli/node_modules/clean-css/lib/imports/inliner.js:74:12)

[stefanpenner]

@shinnn anything come to mind? (im on vacation so i haven't had a chance to dig in myself yet)

[XrXr]

I dug into it a little bit, it seems that broccoli-clean-css is trying to resolve import in the temporary build directory, which doesn't have the other files. I'm guessing that Emebr CLI is passing a broccoli tree that only contains the file to minimize but not the other files?

[XrXr]

Here is a hacky way to pass that test. It's ugly but it works though 😈

 preprocessors.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/preprocessors.js b/preprocessors.js
index 936ff76..64f4d83 100644
--- a/preprocessors.js
+++ b/preprocessors.js
@@ -115,6 +115,11 @@ module.exports.preprocessMinifyCss = function(tree, options) {

   if (plugins.length === 0) {
     var compiler = require('broccoli-clean-css');
+    var oriRelativeTo = options.relativeTo;
+    Object.defineProperty(options, 'relativeTo', {
+       get: () => oriRelativeTo,
+       set: () => undefined
+    });
     return compiler(tree, options);
   } else if (plugins.length > 1) {
     throw new Error('You cannot use more than one minify-css plugin at once.');

It works by preventing broccoli-clean-css from changing options.relativeTo

[rwjblue]

I just tested this again, and the tests all seem to be passing.

@stefanpenner - If you can give me access to publish, I'll release 1.2.0 and watch for any fallout (unpublishing if needed)...

[rwjblue]

I published 1.2.0 and I was wrong about it not being an issue anymore 😢.

However, the issue is with ember-cli not broccoli-clean-css. broccoli-clean-css is ensuring that relativeTo is relative to the input broccoli tree that it receives (which is correct). What was happening before was that we were allowing broccoli-clean-css to access the raw app/styles directory instead of where these *.css are in relation to the tree we provided broccoli-clean-css. This means that you could not have @import'ed any files that were not in app/styles (even if they were allowed/provided from addon's or merged into the styles in the ember-cli-build.js).

In order to allow the tests to pass in ember-cli, we need to change the default value of relativeTo from app/styles (the raw styles dir in the project root) to assets (where the *.css files actually are in the tree provided to broccoli-clean-css).

Since this is not a compatible change (broccoli-clean-css bumped major versions to allow for this change), I have unpublished 1.2.0 from NPM (existing/older ember-cli's cannot use the updated broccoli-clean-css without changing relativeTo value) and will republish as 2.0.0 so we can get ember-cli updated...

[rwjblue]

I updated ember-cli/ember-cli#5463 with the relativeTo change and pointed it at master of this repo to confirm all tests pass before releasing 2.0.0.

[rwjblue]

Builds passed when using the correct relativeTo (in https://travis-ci.org/ember-cli/ember-cli/builds/109156596).

Released as v2.0.0 and updating in ember-cli in ember-cli/ember-cli#5463.

[eibrahim]

I am getting the broken @import errors with the ember-cli-jquery-ui addon... The only way I was able to make my build work was to add

    minifyCSS: {
      enabled: false,
    },

But obviously this turns off my CSS minification... Any idea what is going on?

The full error is:

File: assets/vendor.css
Broken @import declaration of "theme.css"
Broken @import declaration of "accordion.css"
Broken @import declaration of "autocomplete.css"
Broken @import declaration of "button.css"
Broken @import declaration of "datepicker.css"
Broken @import declaration of "dialog.css"
Broken @import declaration of "draggable.css"
Broken @import declaration of "menu.css"
Broken @import declaration of "progressbar.css"
Broken @import declaration of "resizable.css"
Broken @import declaration of "selectable.css"
Broken @import declaration of "selectmenu.css"
Broken @import declaration of "sortable.css"
Broken @import declaration of "slider.css"
Broken @import declaration of "spinner.css"
Broken @import declaration of "tabs.css"
Broken @import declaration of "tooltip.css"
Error: Broken @import declaration of "theme.css"
Broken @import declaration of "accordion.css"
Broken @import declaration of "autocomplete.css"
Broken @import declaration of "button.css"
Broken @import declaration of "datepicker.css"
Broken @import declaration of "dialog.css"
Broken @import declaration of "draggable.css"
Broken @import declaration of "menu.css"
Broken @import declaration of "progressbar.css"
Broken @import declaration of "resizable.css"
Broken @import declaration of "selectable.css"
Broken @import declaration of "selectmenu.css"
Broken @import declaration of "sortable.css"
Broken @import declaration of "slider.css"
Broken @import declaration of "spinner.css"
Broken @import declaration of "tabs.css"
Broken @import declaration of "tooltip.css"
    at arrayToError (/myapp/node_modules/array-to-error/index.js:41:15)
    at minifyCallback (/myapp/node_modules/clean-css-promise/index.js:33:20)
    at whenSourceMapReady (/myapp/node_modules/clean-css/lib/clean.js:139:16)
    at Object.whenDone (/myapp/node_modules/clean-css/lib/clean.js:155:14)
    at processNext (/myapp/node_modules/clean-css/lib/imports/inliner.js:105:13)
    at importFrom (/myapp/node_modules/clean-css/lib/imports/inliner.js:79:10)
    at processNext (/myapp/node_modules/clean-css/lib/imports/inliner.js:104:16)
    at inlineLocalResource (/myapp/node_modules/clean-css/lib/imports/inliner.js:347:12)
    at inline (/myapp/node_modules/clean-css/lib/imports/inliner.js:218:10)
    at importFrom (/myapp/node_modules/clean-css/lib/imports/inliner.js:74:12)

[eibrahim]

by the way ember build works but ember build --environment production breaks which I guess comes back to minifyCSS.enabled = true

[stefanpenner]

@eibrahim let me recommend you open a new issue, and link back to this one.