A PostCSS Syntax for parsing LESS

Note: This module requires Node v6.14.4+. poscss-less is not a LESS compiler. For compiling LESS, please use the official toolset for LESS.

Using npm:

 npm install postcss-less --save-dev

Please consider becoming a patron if you find this module useful.

The most common use of postcss-less is for applying PostCSS transformations directly to LESS source. eg. ia theme written in LESS which uses Autoprefixer to add appropriate vendor prefixes.

 const  syntax  =  require ( 'postcss-less' ) ;
 postcss ( plugins )
   . process ( lessText ,  {  syntax : syntax  } )
   . then ( function  ( result )  {
     result . content  // LESS with transformations
 } ) ;

Parsing of LESS-specific @import statements and options are supported.

 @import (option) ' file.less ' ;

The AST will contain an AtRule node with:

• an import: true property
• a filename: <String> property containing the imported filename
• an options: <String> property containing any import options specified

Parsing of single-line comments in CSS is supported.

 :root { // Main theme color
     --color : red ; }

The AST will contain a Comment node with an inline: true property.

Parsing of LESS mixins is supported.

 .my-mixin { color : black ; }

The AST will contain an AtRule node with a mixin: true property.

Mixins that declare ! important will contain an important: true property on their respective node.

Parsing of LESS variables is supported.

 @link-color : #428bca ;

The AST will contain an AtRule node with a variable: true property.

Note: LESS variables are strictly parsed - a colon ( : ) must immediately follow a variable name.

To process LESS code without PostCSS transformations, custom stringifier should be provided.

 const  postcss  =  require ( 'postcss' ) ;
 const  syntax  =  require ( 'postcss-less' ) ;

 const  less  =  `
 // inline comment

 .container {
 .mixin-1();
 .mixin-2;
 .mixin-3 (@width: 100px) {
 width: @width;
 }
 }

 .rotation(@deg:5deg){
 .transform(rotate(@deg));
 }
 ` ;

 const  result  =  await  postcss ( ) . process ( less ,  { syntax } ) ;

  // will contain the value of `less`
 const  { content }  =  result ;

• Lint LESS code with 3rd-party plugins.
• Apply PostCSS transformations (such as Autoprefixer ) directly to the LESS source code

CONTRIBUTING

LICENSE (MIT)