The validator throws an error when nesting CSS.

Nesting CSS styles (like in SASS) is supported by most modern browsers: https://caniuse.com/css-nesting

The validator throws a parse error. At least make it a warning instead of an error.

Here's the CSS. It complains about the double closing curly brackets.

<style> .snapshot{ --grid-color: #3f7082; --big-squish-txt: #b14f50; --medium-squish-txt: #806729; --header-txt: #525b64; --demographics: #b14f50; --hc-color: #c8d0b9; --text: #615e59; --link: #006699; --border: 10px solid var(--grid-color); --map-bg: url('[path]'); --map-text-position:185px; --thead: #806729; --thead-txt: white; --caption: #3f7082; --stripe: #FCF6E8; /*HC border colors*/ --international: #3f7082; --domestic: #806729; --natural: #c8d0b9; --darken:45%; .big-bold{ font-family: var(--sans); font-size: 1.25rem; font-weight: 800; line-height: 1.5; text-transform: uppercase; color: #525b64; } } </style>

Start by reproducing the parse error with the nested CSS sample in the issue, then trace the validator's CSS parsing and diagnostic path. The work is done when nested CSS no longer produces an error, or is reported as a warning as requested.