Solvedangular cli postcss-custom-properties warnings when overriding css variables

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?

18 Answers

✔️Accepted Answer

Found a hackable workaround.

As there is no "official" way to provide Angular CLI a postcss-custom-properties config - yet.

Open index.js from your projects node_modules\postcss-custom-properties\dist folder
Find this line:
warnings: options.warnings === undefined ? true : options.warnings,

We're going to change warnings property from true to false.
warnings: options.warnings === undefined ? false : options.warnings,

Save and run ng serve
image

Other Answers:

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

If you don't want to eject from ng and you can afford not having postcss-custom-properties postprocessor at all (e.g. because you don't support older browsers anyway), you can remove it completely with a little command like the one below.

I add it to my package.json scripts entry and run as a postinstall script, so it runs always after you do any changes in installed packages. It removes each line where customProperties occurs in the above webpack config. Tested with angular-cli 1.5.

"scripts": {
  "remove-postcss-custom-properties": "sed -i -E '/customProperties/s/^.*$//g' node_modules/@angular/cli/models/webpack-configs/styles.js",
}

Hack-ish, I know... but might do as a temp solution, while we decide what do we want to do with these custom properties and backward support.

What is the workaround for adding postcss-custom-properties support now? We needed this and had it working, albeit in a hacky way, for our IE support, and now it is gone with no official alternative besides rolling back to before this pr was merged.

More Issues: