var(--property) warnings not triggered by postcss when the variable references a variable

[oleersoy]

Within commit 0a687c5f23355050bce870d4c83e207f3986444c of the variables-colors repository I have the following code snippet in the file src/main/css/index.css.

/* 1 */
:root {
  --color-white:                   #fff;
  --color-text:                    var(--color-dark-gray);
  --color-text-muted:              var(--color-light-gray);
  --color-link:                    var(--color-primary);
  --color-link-hover:              color(var(--color-link) blackness(var(--percentage-link-hover)));
  --color-abbr-border:             var(--color-gray-light);
  --color-table-background:        transparent;
  --color-table-background-accent: #f9f9f9;
  --color-table-background-hover:  #f5f5f5;
  --color-table-background-active: var(--color-table-background-hover);
  --color-table-border-color:      var(--color-gray-lighter);
}

The color variables referenced here come from the @import ./browser/ import, however there is no such variable as --color-gray-light. The build postcss does not warn that this variable does not exist.

It does however warn when this module is included in other modules. For example the @superflycss/foundation references the @superflycss/foundation module, and when building foundation I noticed the --color-gray-light variable did not exist.

I'm going to rename the color to correct the module, and bump the minor version number, so if you want to see this in action, make sure you use variables-colors@3.0.3 as the foundation dependency when building foundation.

git clone https://github.com/superflycss/foundation
cd foundation
npm i -g @superflycss/cli
sfc build

[jonathantneal]

I’m not sure if you meant to post this here. If you did, I would need a clear description of what is going on with postcss-custom-properties.

[oleersoy]

I did. If you look at the line:

    --color-abbr-border:             var(--color-gray-light);

The variable --color-gray-light does not exist. However the build does not log it when building the referenced CSS file. However when the file is referenced as an NPM dependency, the missing variable issue is logged by the build. So PostCSS is detecting it for transitive dependencies, but not when building the project itself.

I'm assuming that the custom properties plugin is supposed to notify postcss when a variable is missing in the build, and that if one is missing, then the build logs that as an error?

[oleersoy]

This is what the console prints for the build when without the fix that I just posted for variables-colors:

src/main/css/foundation/index.css
203:3   ⚠  variable '--color-gray-light' is undefined and used without a fallback [postcss-custom-properties]

src/main/css/foundation/index.css
203:3   ⚠  variable '--color-gray-light' is undefined and used without a fallback [postcss-custom-properties]

That is what got logged when building the superflycss foundation project (As described). That project has the variables-colors project as an NPM dependency.

[oleersoy]

BTW - It's a multi project / multi module error ... which is why the description is a little tricky to get right ... The first project that does not produce the logging statement only has css variables in it. The second project is similar to normalize.css and it's the one that produces the logging warning ... based on having the first pure variable project as a dependency. Make sense?

I'm guessing that since it's a pure variable project (With variables that reference other variables), postcss errors are not triggered, but when does variables are included in a project that reference them, the logging warnings are triggered by postcss ...

[jonathantneal]

Thanks for the explanation. Are you saying PostCSS is unable to reference the variable because it is coming from another file? It doesn’t warn by default, but you can enable with the warning option. Or, are you asking for an option to reference where the variables are coming from?

By default, warnings are set to false and are not logged. — https://github.com/postcss/postcss-custom-properties#warnings

[danny-andrews]

Link is dead. Was this option removed?

[jonathantneal]

Yes, please use https://github.com/csstools/stylelint-value-no-unknown-custom-properties if you want to lint your project for missing variable references.