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

**URL:** <https://discuss.emberjs.com/t/different-css-output-in-prod-buildd-with-ember-cli-sass/20155>\
**Category:** Ember CLI\
**Created:** [July 16, 2023, 10:04pm UTC](https://discuss.emberjs.com/t/different-css-output-in-prod-buildd-with-ember-cli-sass/20155 "2023-07-16T22:04:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Szabo\_Bogdan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/szabo_bogdan/32/16959_2.png) [@Szabo\_Bogdan](https://discuss.emberjs.com/u/Szabo_Bogdan)\
**Post date:** [July 16, 2023, 10:04pm UTC](https://discuss.emberjs.com/t/different-css-output-in-prod-buildd-with-ember-cli-sass/20155/1 "2023-07-16T22:04:32Z")

</div>

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:

```auto
.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:

```auto
.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

---

<div class="post-metadata">

**Author:** ![runspired](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/runspired/32/18654_2.png) [@runspired](https://discuss.emberjs.com/u/runspired)\
**Post date:** [July 17, 2023, 4:40am UTC](https://discuss.emberjs.com/t/different-css-output-in-prod-buildd-with-ember-cli-sass/20155/2 "2023-07-17T04:40:05Z")

</div>

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](https://github.com/ember-cli/ember-cli-clean-css/issues/297)

---

<div class="post-metadata">

**Author:** ![Szabo\_Bogdan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/szabo_bogdan/32/16959_2.png) [@Szabo\_Bogdan](https://discuss.emberjs.com/u/Szabo_Bogdan)\
**Post date:** [July 17, 2023, 12:26pm UTC](https://discuss.emberjs.com/t/different-css-output-in-prod-buildd-with-ember-cli-sass/20155/3 "2023-07-17T12:26:03Z")

</div>

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:

```auto
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;
};

```

---

<div class="post-metadata">

**Author:** ![boris](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/boris/32/12457_2.png) [@boris](https://discuss.emberjs.com/u/boris)\
**Post date:** [July 20, 2023, 9:57am UTC](https://discuss.emberjs.com/t/different-css-output-in-prod-buildd-with-ember-cli-sass/20155/4 "2023-07-20T09:57:56Z")

</div>

You could also depend on [this commit in ember-cli-clean-css](https://github.com/ember-cli/ember-cli-clean-css/commit/1101263d2a0f261b5a066a9823668406c6f5dcd2) which depends on the latest `clean-css` and just wait for a new (major) version to be released so you can change to it.