WordPress.org

Plugin Directory

jetpack

#1596 closed enhancement (fixed)

Jetpack Custom CSS: Support for SASS/LESS

Reported by: danielbachhuber Owned by: betzster
Priority: normal Severity: normal
Plugin: jetpack Keywords:
Cc: cfinke, erick@…

Description

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

Attachments (2)

1596.patch (184.4 KB) - added by betzster 18 months ago.
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.
1596.2.patch (184.5 KB) - added by betzster 17 months ago.

Download all attachments as: .zip

Change History (13)

comment:1 betzster18 months ago

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.

comment:2 danielbachhuber18 months ago

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

comment:3 cfinke18 months ago

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.

comment:4 cfinke18 months ago

  • Cc cfinke added

comment:5 ethitter18 months ago

  • Cc erick@… added

betzster18 months ago

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.

comment:6 betzster18 months ago

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.

comment:7 danielbachhuber18 months ago

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

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

comment:8 betzster18 months ago

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.

comment:9 cfinke17 months ago

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.

betzster17 months ago

comment:10 betzster17 months ago

Now:

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

comment:11 cfinke17 months ago

  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.