Minification Problem with CSS Pseudo-Classes

[jaswrks]

A copy of: wpsharks/comet-cache#544

Reference: https://webshark.zendesk.com/agent/tickets/7790

CSS pseudo-classes require a space between the class-name and pseudo-class-name. When minifying CSS with ZenCache, that space is removed, breaking the code.

For example:

.test :first-child { color: green; } would be changed to .test:first-child{color:green;}

Work-Around to Avoid This Issue

To avoid this issue, choose "No, do not compress the code in any unified CSS files" from the panel at WordPress Dashboard → ZenCache → Plugin Options → HTML Compression.

[lkraav]

.test :first-child and .test:first-child are two different things, but both are valid.

The issue description currently reads like the space is always required, which it isn't.

[jaswrks]

I'm considering the use of this library to help us achieve a better-er-er, more standards-compliant compression for CSS. cc @raamdev ~ http://leafo.github.io/scssphp/

[raamdev]

http://leafo.github.io/scssphp/

@jaswsinc That looks like an SCSS compiler, not specifically a CSS compressor. Does it support straight CSS compression? I looked through the docs but everything seems to indicate starting with SCSS and then outputting compressed CSS.

[jaswrks]

Does it support straight CSS compression?

Yes. Sure does!

It's an SCSS library, and Sass (SCSS) is the most modern way of dealing with CSS compression. The SCSS syntax itself is such that any valid CSS file (i.e., something that we would be compressing), is also a valid SCSS file.

The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “Sass”).

Over the past year or so I have been using SCSS almost exclusively in new projects, and I just finished converting ZenCache to SCSS also. The --style=compressed output format supported by SCSS compilers (including this one written in PHP) should be a perfect fit for the HTML Compressor.

[jaswrks]

Referencing: http://leafo.github.io/scssphp/docs/#output-formatting

[raamdev]

The SCSS syntax itself is such that any valid CSS file (i.e., something that we would be compressing), is also a valid SCSS file.

Fascinating! Thanks! I'll have to dig into SCSS a bit more.

[jaswrks]

Closing. Resolved by: wpsharks/css-minifier#1
~ Coming in a future release of ZenCache.

[jaswrks]

Next Release Changelog:

• Resolves a bug related to CSS pseudo selectors : and whitespace. See this GitHub issue if you'd like additional details.