Improve CSS Variable Support in Additional CSS

[ersatzpenguin]

Is your feature request related to a problem? Please describe.

Right now, when CSS is added to the Additional CSS section of the Customizer, it seems we're using CSSTidy to parse/optimize it etc. However, CSSTidy strips out the formatting necessary for CSS variables to work and otherwise valid CSS variables are not applied.

Describe the solution you'd like

Adjust the CSSTidy formatting behavior to add support for CSS variables.

Describe alternatives you've considered

Anything set with a CSS variable can certainly be set directly without it by using the right selector etc. However, with more and more themes using variables, along with Gutenberg etc., having the ability to quickly and easily adjust variables in the Customizer would be really rad. It'd also make theme customizations much cleaner and faster when compared to manually specifying a color (for instance) for every element that uses it.

Additional context

This came up because I was attempting to customize the colors for a theme that sets almost everything via CSS variables. I reached out via Slack p1619535922496400-slack-C010KDAPG49 and chatted with @annemirasol and @mirka about the issue, and was made aware of the fact that it might be related to CSSTidy and formatting set through it: https://github.com/Automattic/jetpack/blob/master/projects/plugins/jetpack/modules/custom-css/custom-css.php#L279 https://github.com/Automattic/jetpack/blob/master/projects/plugins/jetpack/modules/custom-css/custom-css.php#L1630

Also, with some additional digging, it seems like CSS Tidy isn't being actively maintained as a project anymore (see changelog), so if modifying/updating it doesn't make the most sense, perhaps there's a more up-to-date alternative (that supports CSS variables) that could be used instead?

[kraftbj]

Related: #1874

[andrewserong]

This could also be an issue for dealing with experimental link color support in Gutenberg (which currently appears to use CSS variables for the color).

[metabreakr]

26011821-hc

I couldn't use aspect-ratio on a simple site, which is a result of CSS Tidy stripping out the declaration.

[ryelle]

It looks like CSSTidy has been forked/continued on github: Cerdic/CSSTidy, and they've recently added custom properties support. I think the Jetpack version has diverged, so it's probably not a drop-in replacement, but maybe that fix could be ported over?

[kraftbj]

@ryelle We just came across that ourselves (Cerdic/CSSTidy). We'll have to do some exploration of versions too since the latest version doesn't support PHP 5.6 (which we do), but the last version that does support 5.6 may be throwing warnings/issues in PHP 8/8.1, etc.

My hope is that we can utilize it wholesale so we don't have to maintain a fork, 🤞🏼