Jetpack Custom CSS: Support for SASS/LESS

[danielbachhuber]

It would be awesome if the Custom CSS editor in Jetpack supported SASS and LESS.

[betzster]

It looks like the best PHP port of SASS is ​https://github.com/leafo/scssphp. There's also a LESS port ​https://github.com/leafo/lessphp. Unfortunately the SASS port is only the SCSS syntax and not the SASS syntax. There's also ​http://code.google.com/p/phamlp/, but the last update was over 2 years ago.

[danielbachhuber]

I don't have a strong preference and trust your judgement. Let me see if Team Custom wants to weigh in.

[cfinke]

Agreed on ​https://github.com/leafo/scssphp looking like the best one out there, and if we're supporting LESS as well, using the same vendor's libraries for both seems like a good idea.

I'm ok with only supporting SCSS syntax - even though the Sass developers have said that indented syntax isn't and won't be dropped entirely, they've also made it clear that SCSS is their preferred syntax for the future. Also, since SCSS is a superset of CSS, we're less likely to run into problems with integrating it into our CSS editor.

[betzster]

First pass at adding SCSS and LESS preprocessors - Adds a dropdown to select a preprocessor and turn off CSS Tidy for the editor if a preprocessor is used.

[betzster]

I have it compile with the preprocessor right before it minifies the CSS. The only problem I ran into is that we can't run CSS Tidy for the editor if a preprocessor is being used because it will stomp stuff like nested blocks.

[danielbachhuber]

Cool. Have you benchmarked the performance? How long does it take to compile?

Is there an equivalent to CSS Tidy for SCSS and LESS?

[betzster]

I haven't been able to find a CSS Tidy equivalent for SCSS or LESS. Normally you could use sass-convert to format SCSS or SASS, but that's not available in this PHP port. Testing on 950 lines of SCSS took 0.19 seconds.

[cfinke]

This looks good; it stores the original SASS/LESS in the post content and the compiled and minified CSS in post_content_filtered, which is how I imagined it would work. The only issue is that when something is stripped out in the CSS Tidy step, it won't be obvious in the editor, but there is such a small list of valid CSS that we remove, it shouldn't be a problem.

One nitpick: $preprocessor doesn't need to be escaped on line 358 since it's never output.

[betzster]

Now:

• Catches exceptions thrown by the preprocessors and returns the CSS
• doesn't escape $preprocessor
• Updated to trunk

[cfinke]

In 631022:

Custom CSS: Support for CSS preprocessing, with LESS and SCSS included.

Plugins can add additional preprocessors (e.g., Stylus) or overwrite the LESS and SCSS processors with their own. See modules/custom-css/custom-css/preprocessors.php for documentation on registering a preprocessor.

scss.inc.php comes from ​https://github.com/leafo/scssphp/blob/master/scss.inc.php
lessc.inc.php comes from ​https://github.com/leafo/lessphp/blob/master/lessc.inc.php

props @betzster

Fixes #1596.