Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

postcss-custom-properties warnings when overriding css variables

See original GitHub issue

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?

Issue Analytics

State:
Created 6 years ago
Reactions:23
Comments:17 (1 by maintainers)

Top GitHub Comments

18reactions

trimoxcommented, Nov 21, 2017

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