Color Update Commit breaks Valid CSS Output & Inline Variables Fall Away

[LeventDag]

Hello,

i have observed a bug originating from the commit 98ee6246b2dacaa6fe0134366d1b6592e073b7c9 in which the CSS Output seems to drop out some properties, set with variables.

Additionally this bug report also contains a follow up in that an inline/"inblock" defined CSS variable drops out even after reverting the mentioned commit in the class .variables-local.

Test Setup

I've prepared a test case with a CSS and just executing CSSValidator with the following command.

-p file:_03_css_custom_properties_root.css

the css file

@charset "UTF-8";

:root {
    --primary-color: #0066cc;
    --secondary-color: rgb(255 0 0 / 50%);
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --font-stack: "Open Sans", sans-serif;
    --nested-color: var(--primary-color);
}

.variables-basic {
    color: var(--primary-color);
    background-color: white;
    margin: var(--spacing-medium);
    font-family: var(--font-stack);
}

.variables-fallback {
    color: var(--missing-color, blue);
    background-color: white;
}

.variables-nested {
    color: var(--nested-color);
    background-color: white;
}

.variables-local {
    --local-color: green;
    color: var(--local-color);
    background-color: white;
}

.variables-calc {
    width: calc(100% - var(--spacing-medium));
}

I will only print the output beginning from the Warnings section

Main Output

the output from the main branch as of commit [a95d8f83f80159dedf957fdf65e21d9eac868b33](https://github.com/w3c/css-validator/commit/a95d8f83f80159dedf957fdf65e21d9eac868b33)

Warnings (10)

URI : file:_03_css_custom_properties_root.css

Line : 13 -  Due to their dynamic nature, CSS variables are currently not statically checked
Line : 14 -  You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
Line : 15 -  Due to their dynamic nature, CSS variables are currently not statically checked
Line : 16 -  Due to their dynamic nature, CSS variables are currently not statically checked
Line : 20 -  Due to their dynamic nature, CSS variables are currently not statically checked
Line : 21 -  You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
Line : 25 -  Due to their dynamic nature, CSS variables are currently not statically checked
Line : 26 -  You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
Line : 31 -  Due to their dynamic nature, CSS variables are currently not statically checked
Line : 32 -  You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.

Valid CSS information

@charset "UTF-8";

    :root
    {
        --primary-color : #0066cc ;
        --secondary-color : rgb(255 0 0 / 50%) ;
        --spacing-small : 8px ;
        --spacing-medium : 16px ;
        --font-stack : "Open Sans",sans-serif ;
        --nested-color : var(--primary-color) ;
    }
    .variables-basic
    {
        background-color : white ;
    }
    .variables-fallback
    {
        background-color : white ;
    }
    .variables-nested
    {
        background-color : white ;
    }
    .variables-local
    {
        --local-color : green ;
        background-color : white ;
    }
    .variables-calc
    {
        width : calc(100% - var(--spacing-medium)) ;
    }

Reverted Output

And now if i revert the problematic commit 98ee6246b2dacaa6fe0134366d1b6592e073b7c9.

Warnings (3)

URI : file:_03_css_custom_properties_root.css

Line : 16 -  Due to their dynamic nature, CSS variables are currently not statically checked
Line : 31 -  Due to their dynamic nature, CSS variables are currently not statically checked
Line : 32 -  You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.



Valid CSS information

@charset "UTF-8";

    :root
    {
        --primary-color : #0066cc ;
        --secondary-color : rgb(255 0 0 / 50%) ;
        --spacing-small : 8px ;
        --spacing-medium : 16px ;
        --font-stack : "Open Sans",sans-serif ;
        --nested-color : var(--primary-color) ;
    }
    .variables-basic
    {
        color : var(--primary-color) ;
        background-color : white ;
        margin : var(--spacing-medium) ;
    }
    .variables-fallback
    {
        color : var(--missing-color, blue) ;
        background-color : white ;
    }
    .variables-nested
    {
        color : var(--nested-color) ;
        background-color : white ;
    }
    .variables-local
    {
        --local-color : green ;
        background-color : white ;
    }
    .variables-calc
    {
        width : calc(100% - var(--spacing-medium)) ;
    }

Remaining Issues

As mentioned .variables-local is still wrong, but i couldn't find the causing commit for it.

EDIT:

.variables-basic is also wrong, missing font-family.

[ylafon]

I see what is going on, it is general to all properties containing variables, and color with a variable was not properly flagged before.
I'll check how to fix for all properties instead of reverting what is basically the right thing for color()

[ylafon]

Should work again with #511 now merged

[LeventDag]

It did indeed work but exposes another issue, i'll create a pullrequest to it.