Awesome Open Source
Awesome Open Source

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.

Install

Using npm:

npm install postcss-less --save-dev

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

Usage

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
});

LESS Specific Parsing

@import

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.

Mixins

Parsing of LESS mixins is supported.

.my-mixin {
  color: black;
}

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

!important

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

Variables

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.

Stringifying

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;

Use Cases

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

Meta

CONTRIBUTING

LICENSE (MIT)


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