Proposal: Add More Ways to Filter Global Stylesheet Output

[eric-michel]

What problem does this address?

theme.json and the global stylesheet offer a ton of customization options in WP, but they're currently limited in how extensible they are. It would be great if the global stylesheet could be easily filtered or altered so that a theme developer could 1) enhance/add selectors and 2) add styles to existing selectors. To my knowledge, there is no current mechanism for this, but please correct me if I'm wrong.

Why is selector enhancement/addition needed?

Take the button styles produced by the global stylesheet. This is what they look like in the theme I'm currently testing:

.wp-element-button,
.wp-block-button__link {
	background-color: var(--wp--custom--button-background-color);
	border-radius: 0;
	border-width: 0;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
}

Now let's say I install WooCommerce, and I want WooCommerce's buttons to look like the other buttons on my site. WooCommerce provides a variety of links throughout its templates that are intended to look like buttons, and are given the class .button. It would be ideal if I could filter the global stylesheet in such a way to produce this:

.wp-element-button,
.wp-block-button__link,
.button {
	background-color: var(--wp--custom--button-background-color);
	border-radius: 0;
	border-width: 0;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
}

This would save me from having to replicate these styles in my theme's stylesheet. Similarly, I could add other selectors like button and input[type=submit] to make form buttons inherit the same look.

Why is adding styles to existing selectors needed?

A good example of this is providing contrasting default foreground colors for background colors, which is not yet supported natively by theme.json.

For instance, I may wish to use a formula in PHP to calculate an appropriate contrasting foreground color for primary and supplement

.has-primary-background-color {
	background-color: var(--wp--preset--color--primary) !important;
}

with

.has-primary-background-color {
	background-color: var(--wp--preset--color--primary) !important;
	color: #fff;
}

Currently this is possible by iterating through the color options set in theme.json via wp_get_global_settings() and using wp_add_inline_style() to add to the global stylesheet, but this requires duplicating the selectors themselves rather than adding the styles to the existing selectors, which is not as efficient.

So instead, I get:

.has-primary-background-color {
	background-color: var(--wp--preset--color--primary) !important;
}
.has-primary-background-color {
	color: #fff;
}

What is your proposed solution?

Simply adding a filter to wp_enqueue_global_styles() such that a str_replace() could be run on it prior to output would technically be sufficient for modifying the selectors. However, I suspect there is a more efficient mechanism that could be implemented that would make this easier and more performant. I'm not sure what the best solution would be for adding styles to existing selectors.

[ramonjd]

Thanks for posting this.

I've made a note of this issue over in the Style Engine tracking issue. Hopefully, once the Style Engine is doing the bulk of the work organizing and parsing styles for Global styles, approaching such customizability features will be more structured.