broken @import errors with the ember-cli-jquery-ui addon

[eibrahim]

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

    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)

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

[stefanpenner]

does this happen with a basic app, or does it require something special? Can you provide a reduced application that demonstrate this, as it will aide in debugging.

[eibrahim]

very easy to reproduce...

ember new demo
cd demo
ember install ember-cli-jquery-ui
ember build --environment production

[stefanpenner]

@eibrahim thank you

[jasonmit]

I'm seeing this as well, started happening this morning.

[eibrahim]

So can I keep 1.1 and set relativeTo = assets

[jasonmit]

No, that won't work. Your best bet is to lock broccoli-clean-css down to 1.0.0 until the underlying issue is triaged further and fixed.

[jasonmit]

var app = new EmberApp(defaults, {
  minifyCSS: {
    options: {
      processImport: false
    }
  }
});

Should solve/workaround this in the meantime, but I suspect as more people upgrade to 2.3.0 this will reported on more and more.

It looks like the guard which allowed for swallowing of errors, and was enabled by default, was removed which introduced the issue, but it should have been treated as an API breaking change. I've sent PRs in to resolve the issue.

[eibrahim]

The processImport workaround worked for me and I was able to build with the production flag. But wouldn't that break the CSS? If a css import abc.css and we tell it not to process it, does that mean abc.css will not be part of the final css?

[jasonmit]

@eibrahim clean-css is used for minifying. You likely are using a preprocessor like LESS or SaSS to handle imports.

[jaaksarv]

I'm having the same problem. Any solutions?

[RogerLevy]

We're having the same problem.

[Kurshith]

Having same problem. Any updates?

[rwjblue]

processImport: false was added by default in ember-cli/ember-cli#5874, which should address this for folks.

Closing for now (let me know if that does not address folks' issue).