CSS hsl() stripped/not working

Sorry, I misspoke. The vars are not working either.

background-color: var(--theme-submenu--bg);

@eherman24 I’m not seeing this issue.

I’m trying to add CSS as follows:

add_action(
	'wp_enqueue_scripts',
	function() {
		wp_add_inline_style(
			get_template() . '-style',
			'
				:root {
					--theme-submenu--bg: red;
				}

				body {
					background-color: var(--theme-submenu--bg);
				}
			'
		);
	},
	20
);

When I look at the CSS in the style[amp-custom] element, I see:

:root{--theme-submenu--bg:red}body{background-color:var(--theme-submenu--bg)}

And the body background is red as expected.

Could you please isolate the issue in a plugin in a Gist to share?

Hi @westonruter

Thanks for the quick response. I’ve got a PR up with the current state of the theme (Go): https://github.com/godaddy-wordpress/go/pull/447

The CSS vars are defined https://github.com/godaddy-wordpress/go/blob/master/includes/customizer.php#L766 and output to wp_head. It seems like some of the CSS vars aren’t working in our style-shared.css and the ones in the new amp.css file in that PR.

If I add background-color: hsl(var(--theme-submenu--bg, var(--theme-color-heading))); directly into the inspector, things work fine – so I know the vars are defined and exist. Maybe it’s just an order of execution issue I’m facing?

I’ll check it out.

Aside: I suggest trying things out with 1.5-alpha of the AMP plugin, which features immensely-improved tooling for diagnosing CSS issues and sources of validation errors. You can access a build here: https://github.com/ampproject/amp-wp/pull/4135#issuecomment-578272748

I’m having trouble building the theme or else I can’t seem to find where --theme-submenu--bg is being added to the page.

Could you please add a standalone example in plugin form which I can use with Twenty Twenty?

@westonruter No problem – I can build one now.

@westonruter I’ve attached a build to that PR.
https://github.com/godaddy-wordpress/go/pull/447#issuecomment-578282594

@eherman24 I’m still not seeing --theme-submenu--bg added to the page, even in the non-AMP version. Could you please create a standalone example plugin that has just the CSS variables defined and then used?

Steps to reproduce:
– Go to the customizer.
– Click ‘Site Design’, select ‘Playful’, select any Color Scheme.
– Check front end of site
– Compare against front end of site with ?amp at the end of the URL.
– Notice the site header background color (among others) are not styled correctly.

I noticed that the .site-header element does not have any of it’s styles, but the child element .header__inner does contain it’s styles, which does use CSS vars.

OK, I seem to be able to reproduce it now. Specifically, this style rule is absent in the AMP version:

.header {
    background-color: hsl(var(--theme-header--bg));
}

In Twenty Twenty I can reproduce the issue with:

add_action(
	'wp_head',
	function() {
		?>
		<style id="try-hsl-var">
			:root {
			    --theme-header--bg: 236, 47%, 46%;
			}
			header#site-header {
			    background-color: hsl(var(--theme-header--bg));
			}
		</style>
		<?php
	}
);

The stylesheet is getting parsed as:

:root { --theme-header--bg:236,47%,46%; }

So this value is getting dropped: hsl(var(--theme-header--bg)).

This appears to be a bug with the PHP-CSS-Parser. A workaround that is working for me is to store the hsa() value in the variable, rather than the arguments that go into the hsa() function. So like this:

:root {
    --theme-header--bg: hsl(236, 47%, 46%);
}
header#site-header {
    background-color: var(--theme-header--bg);
}

@westonruter Ah, great. Thanks for confirming the bug. I thought I was doing something wrong. Thanks for the example on the work around – I’ve got a few things working, but it looks like it’s going to take a larger refactor. I’ll continue chipping away at this and see where I land.

Thanks again for chiming in and taking a look at that – Have a great weekend.