postcss-less

PostCSS LESS Syntax - Work in Progress

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

Comment Node

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 stringifier from postcss-less module:

import postCssLess from 'postcss-less';

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

root.first.toString(); // returns '/* Hello world */'

root.first.toString({
    stringify: postCssLess.stringify
}); // returns '// Hello world'

Comment Node

postcss-less extends the default structure of 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'

Stylelint support

postcss-less parser is not compatible with Stylelint, because Stylelint can't process syntax tree from postcss-less!

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