Plugin Directory


Opened 5 years ago

Closed 5 years ago

#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@…


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 5 years 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 5 years ago.

Download all attachments as: .zip

Change History (13)

comment:1 @betzster5 years 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 @danielbachhuber5 years ago

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

comment:3 @cfinke5 years 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 @cfinke5 years ago

  • Cc cfinke added

comment:5 @ethitter5 years ago

  • Cc erick@… added

@betzster5 years 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 @betzster5 years 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 @danielbachhuber5 years 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 @betzster5 years 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 @cfinke5 years 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.

@betzster5 years ago

comment:10 @betzster5 years ago


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

comment:11 @cfinke5 years ago

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

In 631022:

Error: Failed to load processor CommitTicketReference
No macro or processor named 'CommitTicketReference' found
Note: See TracTickets for help on using tickets.