Automattic / Automattic/jetpack

Improve CSS Variable Support in Additional CSS

Open
#19,669 5 comments 3 reactions 1 assignee Claimed by @danieldudzic View on GitHub
[Feature] Custom CSS [Status] In Progress Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

#### 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](http://csstidy.sourceforge.net/changelog.php)), 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?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.