css warning "variable '--some-var' is undefined"

[amitport]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

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

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.10
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

add to global styles.scss:

:root {
  --some-var: blue;
}

add to some component scss:

.some-class {
  background: var(--some-var);
}

ng serve

The log given by the failure.

NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-custom-properties:
<my-component>.scss:2:3: variable '--some-var' is undefined and used without a fallback
    at Object.emitWarning (<path>\node_modules\webpack\lib\NormalModule.js:117:16)
    at <path>\node_modules\postcss-loader\index.js:131:24
    at Array.forEach (<anonymous>)
    at <path>\node_modules\postcss-loader\index.js:130:31
    at <anonymous>

Desired functionality.

no warning needed, the component is defined in the global styles.scss and everything works

Mention any other details that might be useful.

one workaround is the create a _variables.scss with all the global :root { --my-var ... } and include this files in components. This will make to warning go away but the declarations in _variables.scss will be included few times

[filipesilva]

Thanks for reporting this issue. However, this issue is a duplicate of an existing issue #1253. Please subscribe to that issue for future updates.

[amitport]

@filipesilva this issue is about native css variables. Including a variables file make sense for #1253 and scss, but not in this case. Here, the global css code will be added to the bundle for each include.

(#1253 is more about the need to specify a relative path, scss variable declaration is removed in compilation)

Can you please take a second look, Thank you!

[filipesilva]

Thank you for making that clear, I saw the scss files and thought it was the same thing. I'll reopen.

I don't have an answer for it right now though...

[clydin]

Currently postcss-custom-properties is unconditionally enabled even in the case where the app will only be used on browsers that natively support css variables. Among postcss-custom-properties limitations is that it needs full knowledge of the context. In this case that cannot be known at build time hence the warning.

The most appropriate solution would be to only enable the plugin when the app needs to support browsers that do not have native css variable support.

[SanderElias]

@clydin I ran into the same issue, and your explanation makes sense. My project only uses default CSS, and is targeting supported browsers only, so your solution would be ideal in my situation too.

Although I only get the issue in cli 1.5 as I compile without AOT. If AOT is enabled, the warning is gone. Not sure why that happens.

[mmc41]

Also, using native css only (no scss) and got the same problem. Eagerly awaiting a fix for this.