Non --dev build removes CSS style

[kensodemann]

Stencil version:

 @stencil/core@0.14.0-6 (also occurs in 0.13.2)

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Given the following scss:

        .stable-border {
          // border: 1px solid cssvar(stable-light) !important;
          border: 1px solid cssvar(stable-light);
        }

If the line with !important is used, the color portion is elided from the generated CSS when doing npm run build.

If the line without !important is used, the color portion is included in the generated CSS when doing npm run build.

If using npm run build -- --dev, the color portion is always included whether or not !important is used.

Expected behavior:

The color portion would always be included in the generated CSS.

Steps to reproduce:

I have a private repo that can be cloned. It is based on code from a community member. If you need the URL, please DM me on Slack.

1. clone the private repo
2. npm i
3. search for "stable-border" in the code, it should only be in one place
4. alternate the line that is used in the build
5. look at the output

With npm run build -- --dev the color portion will always be there
With npm run build the color portion will not be included when !important is used

[kensodemann]

Duplicated in a much simpler case without SASS or any other complications.

1. clone this https://github.com/kensodemann/kws-weather-widgets
2. npm run build
3. grep -lir stable-border dist/*
4. look at the generated component, the styling line will look like this: get: function () { return ".stable-border{border:1px solid!important}"; },
5. npm run build -- --dev
6. grep -lir stable-border dist/* - generated component should be in dist/kwsweather/kws-condition.entry.js
7. look at the generated component, the styling line will look like this: static get style() { return ".stable-border {\n border: 1px solid var(--stable-light, #f1f1f1) !important;\n}"; }

Besides being static and whatnot, notice the var(--stable-light, #f1f1f1) bit that is properly included here but missing from the non-dev build.

Actual CSS is here: https://github.com/kensodemann/kws-weather-widgets/blob/master/src/components/kws-temperature/kws-temperature.css

[kensodemann]

Note that if you remove the !important then the npm run build (without -- --dev) also works: https://github.com/ionic-team/stencil/issues/1152

It is only with the non-dev build AND using !important that the issue seems to manifest.