postcss-custom-properties warnings when overriding css variables

[Morente5]

Bug Report

From Issue #7514
Related to PR #7712

Versions.

Angular CLI: 1.5.0-rc.0
Node: 8.1.2
OS: win32 x64
Angular: 5.0.0-rc.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0-rc.0
@angular-devkit/build-optimizer: 0.0.25
@angular-devkit/core: 0.0.17
@angular-devkit/schematics: 0.0.30
@ngtools/json-schema: 1.1.0
@schematics/angular: 0.0.41
typescript: 2.5.3
webpack: 3.7.1

The log given by the failure.

A lot of warnings are being shown to me since #7712 :

WARNING in ./path/to/component/some-component.component.scss
(Emitted value instead of an instance of Error) postcss-custom-properties: path\to\component\some-component.component.scss: Custom property ignored: not scoped to the top-level :root element (some-css-selector { ... --custom-property: ... })
    at Object.emitWarning (path-to-my-project\node_modules\webpack\lib\NormalModule.js:117:16)
    at path-to-my-project\node_modules\postcss-loader\index.js:131:24
    at Array.forEach (native)
    at path-to-my-project\public\node_modules\postcss-loader\index.js:130:31
    at <anonymous>

Repro steps.

when I set:

:root {
  --custom-property: 200; 
}

on styles.scss,
and I override it in a component, some-component.scss

some-css-selector {
  --custom-property: 100; 
}

It's working perfectly fine but it's very annoying seeing a warning for each css variable I override.

May that be related to a postcss-custom-properties limitation?

[renestalder]

postcss-custom-properties doesn't support variable declarations on CSS selectors other than :root. Only :root is allowed. That's why you get the warning. Mostly this only means that your variable will not be transpiled back for older browsers. So when you want this to work with older browsers, you have to use :root all the time, so postcss-custom-properties knows what to do with it.

[adrm]

Is there a way to silence this warning or noting to the tool that I don't care about transpiling this feature back to older browsers? Thanks.

[renestalder]

I don't know about the angular-cli and how it can be configured with it (you have to check by yourself), but the setting of the postcss-custom-properties package you'll find here:
https://github.com/postcss/postcss-custom-properties#warnings

[darrenmothersele]

We need a way to add custom PostCSS config to Angular CLI projects.

This issue is related: Using the Bulma CSS library current causes lots of warnings:
jgthms/bulma#1190

[jycouet]

Hi,
In my project, by design, we have a lot of css variables.
How should I get rid of these warnings?

Thank you for your support 👍

[mgmarlow]

Not using Bulma, but running into the same issue since our project doesn't care about older browsers. We really don't want to eject the webpack configuration at this point, so can we can an extra configuration setting or expose the postcss configuration to get rid of these warnings?

[calebeaires]

Same here with bulma when calling sass! Does anyone has find an way to fix it?

[zoonman]

I think fix explained here MoOx/postcss-cssnext#186 but we need a way to deliver to Angular.