PostCSS Syntax for parsing LESS
Please note: poscss-less is not a LESS compiler. For compiling LESS, please use the official toolset for LESS.
First thing's first, install the module:
npm install postcss-less --save-dev
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
});Parsing of single-line comments in CSS is also supported.
:root {
// Main theme color
--color: red;
}Note that you don't need a custom stringifier to handle the output; the default stringifier will automatically convert single line comments into block comments. If you need to support inline comments, please use a custom PostCSSLess stringifier.
Determines whether or not a rule contains declarations.
Note: Previously ruleWithoutBody. This is a breaking change from v0.16.0 to v1.0.0.
import postCssLess from 'postcss-less';
const less = `
.class2 {
&:extend(.class1);
.mixin-name(@param1, @param2);
}
`;
const root = postCssLess.parse(less);
root.first.nodes[0].empty // => true for &:extend
root.first.nodes[1].empty // => true for calling of mixinDetermines whether or not a rule is nested.
Note: Previously extendRule. This is a breaking change from v0.16.0 to v1.0.0.
import postCssLess from 'postcss-less';
const less = `
.class2 {
&:extend(.class1);
}
`;
const root = postCssLess.parse(less);
root.first.nodes[0].extend // => trueDetermines whether or not a rule is marked as important.
Note: This is a breaking change from v0.16.0 to v1.0.0.
import postCssLess from 'postcss-less';
const less = `
.class {
.mixin !important;
}
`;
const root = postCssLess.parse(less);
root.first.nodes[0].important // => true
root.first.nodes[0].selector // => '.mixin'Determines whether or not a rule is a mixin.
import postCssLess from 'postcss-less';
const less = `
.class2 {
.mixin-name;
}
`;
const root = postCssLess.parse(less);
root.first.nodes[0].mixin // => trueAn Array of child nodes.
Note that nodes is undefined for rules that don't contain declarations.
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 mixinDetermines whether or not a comment is inline.
import postCssLess from 'postcss-less';
const root = postCssLess.parse('// Hello world');
root.first.inline // => trueDetermines whether or not a comment is a block comment.
import postCssLess from 'postcss-less';
const root = postCssLess.parse('/* Hello world */');
root.first.block // => truePrecending characters of a comment node. eg. // or /*.
Raw content of the comment.
import postCssLess from 'postcss-less';
const root = postCssLess.parse('// Hello world');
root.first.raws.content // => '// Hello world'To process LESS code without PostCSS transformations, custom stringifier should be provided.
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 comments or mixins
});- Lint LESS code with 3rd-party plugins.
- Apply PostCSS transformations (such as Autoprefixer) directly to the LESS source code
Please, check our guidelines: CONTRIBUTING.md
This module is based on the postcss-scss library.
