Passing clean-css options doesn't work

[v-jacques]

We recently updated all the packages and dependencies in our Ember.js project to their latest versions. Since then when this project is built with the --environment production flag, the CSS looks broken when browsing through its web pages. Disabling the CSS minifying fixes the issue.

I am trying to investigate and find out which CSS optimization is breaking our CSS styles, but it doesn't look like passing custom clean-css options is working correctly:

enabled works:

minifyCSS: {
      enabled: true // or false
}

level (integer) works:

minifyCSS: {
    options: {
        level: 1 // 0, 1 or 2
    }
}

level (with options) doesn't work:

minifyCSS: {
      options: {
        level: {
          1: {
            all: false,
            optimizeFont: true
          },
          2: {
            all: false
          }
        }
      }
    }

Passing the last options above does not have the desired result, which would be to only have optimizeFont enabled and all other optimizations disabled. The final CSS minifying looks the same as if everything was enabled.

The clean-css documentation says that we should be able to individually enable or disable each optimization (https://github.com/clean-css/clean-css?tab=readme-ov-file#level-0-optimizations) but I haven't encountered a single example of such a thing being done in Ember.js or in ember-cli-clean-css.

[v-jacques]

I was able to solve my minifying issue by using the clean-css-cli tool (https://github.com/clean-css/clean-css-cli).

When I minified my CSS files the tool output showed a few warnings (invalid selectors and invalid properties), after fixing these warnings I no longer notice any CSS errors when building my project with the --environment production setting.