search

apache / incubator-pagespeed-mod

Apache module for rewriting web pages to reduce latency and bandwidth.
http://modpagespeed.com
Apache License 2.0
697 stars 158 forks source link

rewrite_css filter minifies CSS Custom Properties #1971

Open andreiglingeanu opened 4 years ago

andreiglingeanu commented 4 years ago

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 commented 4 years ago

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 commented 2 years ago

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 commented 2 years ago

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

Can you just disallow the specific CSS file causing problems?

epelc commented 2 years ago

@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.