npm i postcss-less


PostCSS Syntax for parsing LESS

by Andrew Powell

6.0.0 (see all)License:MITTypeScript:DefinitelyTyped
npm i postcss-less


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




No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

No reviews found
Be the first to rate