rewrite_css filter minifies CSS Custom Properties

[andreiglingeanu]

Hello,

With the rewrite_css filter enabled, CSS Custom Property definitions are broken -- their definition is lowercased. This is wrong because the css variables are case sensitive. That is variables --test and --Test are two different variables.

Inline <style> tag before:

<style>
	:root {
		--testMeNow: 123px;
	}
</style>

Inline <style> after:

<style>:root{--testmenow:123px}</style>

This breakes the page because in actual CSS files the variables are referenced with var(--testMeNow) , while it's defined using lowercase-only characters.

Now I understand that this issue might be caused by the css_parser and please let me know if I have to redirect the report somewhere else -- I don't mind doing the legwork.

The mod-pagespeed version is 1.13.35.2-0 (checked from the X-Mod-Pagespeed response header).

Please advice on how to better move forward with this. Obviously, I would love to keep the rewrite_css filter enabled but because of this issue I have to keep it off for now.

[oschaaf]

Thanks for the report; I guess someone will have to dive into the css parser to figure out how to fix this. Contributions welcome! :-)

[epelc]

Also just ran into this! Took a while to figure out but was basically breaking our entire page and there were no error messages or anything to go off of.

Also still a bug on latest mod_pagespeed/1.13.35.2-0

[jmarantz]

actually 1.14 is available. Not sure if that bug is fixed.

Can you just disallow the specific CSS file causing problems?

[epelc]

@jmarantz oh I installed latest stable today.

Ended up just working around by renaming all our css variables to be lowercase instead. ie --myVariable is now --my-variable. Not perfect as there is extra character but it works easily.

You could disable mod_pagespeed for a specific file though as an alternative workaround. One thought was to define all your variables in a separate file that mod_pagespeed ignored.

Was more of an issue figuring out the cause of everything breaking than actually fixing things.