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 Syntax

This project is not stable and is in development. If you'd like to contribute, please submit a Pull Request.

A LESS parser for PostCSS.

This module does not compile LESS. It simply parses mixins and variables so that PostCSS plugins can then transform LESS source code alongside CSS.

Use Cases

• lint your LESS code with 3rd-part plugins.
• apply PostCSS transformations (such as Autoprefixer) directly to the LESS source code

Usage

LESS Transformations

The main use case of this plugin is to apply PostCSS transformations directly to LESS source code. For example, if you ship a theme written in LESS and need Autoprefixer to add the appropriate vendor prefixes to it.

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

Comments

Inline comments

This module also enables parsing of single-line comments in CSS source code.

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

Note that you don't need a special stringifier to handle the output; the default one will automatically convert single line comments into block comments. If you need to get inline comments, use custom PostCSSLess stringifier

Rule node

PostCSS Rule Node

rule.ruleWithoutBody

It shows that Rule node has body or not.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        &:extend(.class1);
        .mixin-name(@param1, @param2);
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].ruleWithoutBody // => true for &:extend
root.first.nodes[1].ruleWithoutBody // => true for calling of mixin

rule.nodes

Array of children nodes. Note that rules without body don't have this property.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        &:extend(.class1);
        .mixin-name(@param1, @param2);
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].nodes // => undefined for &:extend
root.first.nodes[1].nodes // => undefined for mixin calling

rule.extendRule

It shows that Rule node is a nested extend rule.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        &:extend(.class1);
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].extendRule // => true

Comment Node

PostCSS Comment Node

comment.inline

It's inline comment or not.

import postCssLess from 'postcss-less';

const root = postCssLess.parse('// Hello world');

root.first.inline // => true

comment.block

It's block comment or not.

import postCssLess from 'postcss-less';

const root = postCssLess.parse('/* Hello world */');

root.first.block // => true

comment.raws.begin

Precending characters of comment node: // or /*.

comment.raws.content

Raw content of the comment.

import postCssLess from 'postcss-less';

const root = postCssLess.parse('// Hello world');

root.first.raws.content // => '// Hello world'

Stringifier

If you need to have LESS code without PostCSS transformation, you have to specify a custom stringifier:

import postcss from 'postcss';
import postcssLess from 'postcss-less';
import stringify from 'postcss-less/less-stringify';

const lessCode = `
    // Non-css comment
    
    .container {
        .mixin-1();
        .mixin-2;
        .mixin-3 (@width: 100px) {
            width: @width;
        }
    }
    
    .rotation(@deg:5deg){
      .transform(rotate(@deg));
    }
`;

postcss().process(less, {
    syntax: postcssLess,
    stringifier: stringify
}).then((result) => {
    console.log(result.content); // this will be value of `lessCode` without changing of comment nodes and mixins
});         

Contribution

Please, check our guidelines: CONTRIBUTING.md

Attribution

This module is based on the work of postcss-scss library and includes the LESS parser efforts of github:gilt/postcss-less