WordPress.org

Plugin Directory

jetpack

Opened 3 years ago

Closed 2 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@…

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

Download all attachments as: .zip

Change History (13)

comment:1 @betzster2 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 @danielbachhuber2 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 @cfinke2 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 @cfinke2 years ago

  • Cc cfinke added

comment:5 @ethitter2 years ago

  • Cc erick@… added

@betzster2 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 @betzster2 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 @danielbachhuber2 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 @betzster2 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 @cfinke2 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.

@betzster2 years ago

comment:10 @betzster2 years ago

Now:

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

comment:11 @cfinke2 years 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.