Search code examples
cssminifypseudo-element

CSS gets broken when minimizing


I have a website, where we are using a tool to minimize and compress css code. It is called JCH, it is a plugin for Joomla, I think you can use it on Drupal too. I have an issue this css code:

#sp-user3 .help-menu .nav.menu :not(.user-menu){
display: inline-flex;
}

It is being converted to:

#sp-user3 .help-menu .nav.menu:not(.user-menu){display:inline-flex}

As you can see ".nav.menu :not" is converted to ".nav.menu:not" which causes the css rule to not be applied as intended.

This can be an error on the tool. How can i rewrite it or add a character to avoid that confusion? any ideas are welcome.


Solution

  • This is indeed a bug, and this is not the first time I encountered it.

    The StackSnippet editor on this site used to have the very same bug in its Tidy button. See my bug report. It was fixed soon after.

    So you can file a bug report with JCH and then wait for it to be fixed as well.

    Meanwhile, you can insert a * before the : in the CSS as a workaround.
    :not() is a shorthand for *:not() anyway, so you won't be changing the meaning of the selector, just writing out in full what was implied.