Do not break valid code

[LeaVerou]

I know you don't process custom properties outside :root but you could defer those to the UA instead of breaking them. Take the following example:

:root {
    --foo: yellow;
}

div {
    --foo: red;
}

div p {
    color: var(--foo);
}

The output is:

div {
    --foo: red;
}

div p {
    color: yellow;
}

Which makes <p>s inside divs yellow instead of the correct red. It's easy to tweak the output to preserve the variables, and then sit back and watch CSS cascade and graceful error handling do their job. Something like this:

:root {
    --foo: yellow; /* preserve var declarations */
}

div {
    --foo: red;
}

div p {
    color: yellow;
    color: var(--foo); /* preserve var(), just add your value as a fallback */
}

This way you get the best of both worlds: Same rewriting, and correct behavior in CSS variable supporting browsers.

[MoOx]

I think you can use preserve option for this.

[LeaVerou]

Yup, this looks like what I suggested (though haven't tried it yet)! Awesome, thanks!