postcss-less

What is postcss-less?

The postcss-less npm package is a tool that allows you to parse LESS syntax with PostCSS, enabling you to use PostCSS plugins with LESS files. It is a syntax plugin for PostCSS, a tool for transforming styles with JavaScript plugins.

What are postcss-less's main functionalities?

Parsing LESS Syntax

This feature allows you to parse LESS files using PostCSS by specifying the postcss-less syntax. This is useful for applying PostCSS plugins to LESS files.

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

postcss().process(lessCode, { syntax: postcssLess }).then(result => {
  console.log(result.css);
});

Stringifying LESS

This feature enables you to convert a PostCSS AST (Abstract Syntax Tree) back into a LESS string. This is useful when you want to generate LESS code after manipulating the AST.

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

const root = postcss.parse(lessCode, { syntax: postcssLess });
const less = root.toString(postcssLess);

Other packages similar to postcss-less

postcss-scss

This package is similar to postcss-less but is designed to work with SCSS syntax. It allows you to use PostCSS plugins with SCSS files.

postcss-sass

Similar to postcss-less, postcss-sass enables you to parse SASS syntax with PostCSS. It is another syntax plugin for PostCSS that targets SASS files instead of LESS.

postcss-styl

This package is a PostCSS syntax for parsing Stylus. Like postcss-less, it allows you to use PostCSS plugins with Stylus files, providing similar functionality for a different preprocessor language.

README

postcss-less

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

Using yarn:

yarn add postcss-less --dev

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)