Awesome Open Source
Awesome Open Source


tests cover size

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');
  .process(lessText, { syntax: syntax })
  .then(function (result) {
    result.content // LESS with transformations

LESS Specific Parsing


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

Inline Comments

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-3 (@width: 100px) {
            width: @width;


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

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

Use Cases

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




Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,537,680
Parser (4,814
Less (1,773
Postcss (1,263
Parse (944
Stylelint (547
Syntax (420
Postcss Plugin (235
Related Projects