Angular-cli: 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:
https://github.com/jgthms/bulma/issues/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 https://github.com/MoOx/postcss-cssnext/issues/186 but we need a way to deliver to Angular.

[jycouet]

Thank you @zoonman for the update! :)
How to put this part of angular-cli? That is the question.

[zoonman]

@jycouet I believe it has to be a part of .angular-cli.json file, but I don't know how to declare config and pass that declaration inside.
I'm newbie in the modern Angular world (I mean 2.+). I noticed there is an eject.d.ts file inside @angular/cli/tasks which exports postcssArgs. So we need someone like @Brocco, who knows Angular implementation really well.
In my case error looks like this:

WARNING in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/stylus-loader?{"sourceMap":false,"paths":[]}!./src/styles.styl
(Emitted value instead of an instance of Error) postcss-custom-properties: /Users/zoonman/Projects/www/liverecord/client/src/styles.styl:115:3: Custom property ignored: not scoped to the top-level :root element (.default :root { ... --body-color: ... })
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-custom-properties: /Users/zoonman/Projects/www/liverecord/client/src/styles.styl:115:3: Custom property ignored: not scoped to the top-level :root element (.default :root { ... --body-color: ... })
    at Object.emitWarning (/Users/zoonman/Projects/www/liverecord/client/node_modules/webpack/lib/NormalModule.js:117:16)
    at /Users/zoonman/Projects/www/liverecord/client/node_modules/postcss-loader/index.js:131:24
    at Array.forEach (<anonymous>)
    at /Users/zoonman/Projects/www/liverecord/client/node_modules/postcss-loader/index.js:130:31
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/styles.styl 4:14-186
 @ multi ./src/styles.styl ./node_modules/font-awesome/css/font-awesome.css

I found that error is coming from postcss but there in no way to change its config.
Looks like this was planned https://github.com/angular/angular-cli/issues/5701 but it I don't know anything more. I can't say more, I'm newbie, I just started with this new version of Angular.

[trimox]

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

[eitanfr]

@trimox thx it works, until there will be a fix or a way to pass options to postcss-custom-properties I add hacked postcss-custom-properties to my project and used it as local package.

[ryzy]

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.

[calebeaires]

@ryzy After put this line on script and run it manually, the warnings does nos desapear. May you explain how to entirely implement it?

[clydin]

Closing as #8289 has a more up to date discussion on the issue.

[briancmpbll]

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}