ember build -prod fails with broccoli-persistent-filter:CleanCSSFilter error

[ezpuzz]

Build failed.
Build Error (broccoli-persistent-filter:CleanCSSFilter) in assets/my-app.css

Broken @import declaration of "tailwind.css"

app/styles/app.css

@import 'tailwind.css';

Reproduction Steps:

$ ember -v
ember-cli: 3.1.4
node: 8.11.3
os: darwin x64
$ ember init
$ ember install ember-cli-tailwind
$ ember build --production

Workaround: Disable minifyCSS in ember-cli-build.js

Desired Behavior: CSS is run through Clean-CSS after PostCSS when building for production.

[ezpuzz]

https://github.com/ember-cli/ember-cli-preprocessor-registry/commit/5e4dea301eabbb1dca32bd2257426568412f90cf

[samselikoff]

Thanks for opening this!

Does your linked commit mean the bug is upstream?

[ezpuzz]

It looks like upstream Clean-CSS will not be part of ember-cli by default or at least be a separate module. I'm thinking that ember-cli-tailwind is not registered properly as a pre-processor to run before clean-css at this point.

[michaelfich]

I ran into the same issue this evening after adding ember-cli-tailwind to my Ember 3.2.0 application and trying to run ember deploy production through ember-cli-deploy.

Error: Build Canceled: Broccoli Builder ran into an error with `broccoli-persistent-filter:CleanCSSFilter` plugin. 💥
Broken @import declaration of "tailwind.css"
Error: Broken @import declaration of "tailwind.css"

[knownasilya]

Encountered this as well, brand new app.

My workaround, so others don't have to search

let app = new EmberApp(defaults, {
  // TODO: remove when https://github.com/embermap/ember-cli-tailwind/issues/37 is fixed
  minifyCSS: {
    enabled: false
  }
});

[michaelfich]

I disabled minifyCSS as well though I'd really like to not have to 😄

[john-griffin]

An alternative way to get around this while still maintaining the minified css is to add the following to your package.json (as of ember-cli 3.3.0)

"resolutions": {
    "ember-cli-preprocess-registry": "3.1.0"
}

There might be side effects I'm not aware of by doing this.

From a fresh install production builds do not work without extra config. Is there an agreed upon fix or approach that needs to be worked on either in this addon or upstream?

[samselikoff]

I could use some help figuring out how to best fix this bug.

• Is Broken @import declaration coming from clean-css? If so what does that mean - paths are misconfigured, or clean-css doesn't know what to do if it sees @import?
• What does minify-css have to do with this?
• I don't believe ember-cli-tailwind is a preprocessor so I'm not sure we can register it as one - please correct me if I'm wrong (this is in response to @ezpuzz's comment above)

[samselikoff]

There's an Ember CLI fix for a seemingly related issue, but I tried everything out on Ember CLI 3.4.0-beta.2 (which includes the fix) and now I'm seeing other issues.

I added a comment there, let's see if anyone chimes in. As for now I'm a little lost on how to fix this.

[jkarsrud]

I had the same issue when building for production. My workaround was to actually link the tailwind.css file in index.html manually;

  <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+ <link integrity="" rel="stylesheet" href="{{rootURL}}assets/tailwind.css">
  <link integrity="" rel="stylesheet" href="{{rootURL}}assets/frontend.css">

It might not be the best workaround, but it does the job, and the CSS is still minified.

[Benjy1979]

3.3.0 has the issue, fixed with minifyCSS: { enabled: false }

Is it something that will be addressed in the future?

[championswimmer]

Still facing the issue. Any better solution than not minifying CSS ?

[samselikoff]

I'd like to move away from Sass and @import and use PostCSS for all the Tailwind inclusion stuff. Would that fix this issue?

[linearza]

Ran into this now as well., ie:

Build Error (broccoli-persistent-filter:CleanCSSFilter) in assets/vendor.css

Cannot read property '0' of null

By process of elimination I tracked it down to this rule:

.telerik-blazor.k-button-flat {
  // the culprit
  &:after{
    content: none;
  }

  &.other {
    ...
  }
}

When I swap it around, it builds fine:

.telerik-blazor.k-button-flat {
  &.other {
    ...
  }

  // the culprit
  &:after{
    content: none;
  }
}

Worth nothing this isnt a problem during development, only when doing prod builds. Also were not using ember-cli-tailwind but the following via postcss rather:

  "postcss": "^7.0.39",
  "postcss-focus-visible": "^6.0.1",
  "postcss-import": "^14.0.2",
  "postcss-nested": "^5.0.6",
  "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"

Dono if that helps, but there ya have it!

EDIT: Seems like the following also resolves it. Clearly something else happening here

.parentClass.subClassOne{}
.parentClass.subClassTwo{}
.parentClass.subClassThree{}

Changing this to

.parentClass{
  &.subClassOne{}
  &.subClassTwo{}
  &.subClassThree{}
}