Different css output in prod buildd with ember-cli-sass

Ember CLI
1

Hi everyone!

I’m using ember-cli-sass v11.0.1, and I noticed that the production build has missing CSS attributes, even though when I render the app in develop mode works fine.

development build example:

.responsive-value .responsive-value-item {
  border: 3px solid transparent;
  transition: border 0.2s ease-in-out;
}
.responsive-value .responsive-value-item:hover {
  border: 3px solid rgb(var(--bs-blue-300-rgb));
}
.responsive-value .responsive-value-item .form-select,
.responsive-value .responsive-value-item .form-control {
  border-left: 0;
}

prod build result:

.responsive-value .responsive-value-item {
 border:3px solid transparent;
 transition:border .2s ease-in-out
}
.responsive-value .responsive-value-item:hover {
 border:3px solid
}
.responsive-value .responsive-value-item .form-control,
.responsive-value .responsive-value-item .form-select {
 border-left:0
}
.responsive-value .ember-power-select-trigger,
.responsive-value .form-control,
.responsive-value .form-select {
 font-size:1em;
 border:1px solid;
 border-radius:0
}

you can see that rgb(var(--bs-blue-300-rgb)); is missing from the production build.

Is there any build optimisation run for the production build? If yes, How can I disable it?

Best, Bogdan

2

reminds me of this issue, probably is this issue v1.x of this addon produces invalid/broken CSS in production builds · Issue #297 · ember-cli/ember-cli-clean-css · GitHub

3

hmm this is really hidden… so it looks like ember-cli-clean-css is using clean-css-promise which is using clean-css v3.4.5. This is 2 major versions behind the last release and maybe it thinks that CSS variables are invalid CSS.

I am not sure if this is the right fix, but I hacked it in my ember-cli-build.js by replacing the bad implementation by using the latest clean-css package:

const CleanCss = require('clean-css');
const CleanCSSFilter = require('broccoli-clean-css');
const inlineSourceMapComment = require('inline-source-map-comment');

CleanCSSFilter.prototype.processString = async function (str) {
  this._cleanCss = new CleanCss(this.options);
  const result = await this._cleanCss.minify(str);

  if (result.sourceMap) {
    return result.styles + '\n' + inlineSourceMapComment(result.sourceMap, { block: true }) + '\n';
  }

  return result.styles;
};
4

You could also depend on this commit in ember-cli-clean-css which depends on the latest clean-css and just wait for a new (major) version to be released so you can change to it.