Repository navigation
Color Update Commit breaks Valid CSS Output & Inline Variables Fall Away #508
Description
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.
Activity
ylafon commentedon Jun 18, 2026
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 commentedon Jun 24, 2026
Should work again with #511 now merged
Addressing w3c#508 the proper way, properties with variable() in them…
LeventDag commentedon Jun 25, 2026
It did indeed work but exposes another issue, i'll create a pullrequest to it.
fix(css-validator): Validate properties that contain var()