Package Exports

postcss-less
postcss-less/dist/less-parser
postcss-less/dist/less-stringify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-less) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS LESS Syntax

PostCSS Syntax for parsing LESS

Please note: poscss-less is not a LESS compiler. For compiling LESS, please use the official toolset for LESS.

Getting Started

First thing's first, install the module:

npm install postcss-less --save-dev

LESS Transformations

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

Inline Comments

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.

Rule Node

PostCSS Rule Node

rule.empty

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 mixin

rule.extend

Determines 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 // => true

rule.important

Determines 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'

rule.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 // => true

rule.nodes

An 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 mixin

Comment Node

PostCSS Comment Node

comment.inline

Determines whether or not a comment is inline.

import postCssLess from 'postcss-less';

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

root.first.inline // => true

comment.block

Determines whether or not a comment is a block comment.

import postCssLess from 'postcss-less';

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

root.first.block // => true

comment.raws.begin

Precending characters of a comment node. eg. // 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'

Stringifying

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

Use Cases

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

Contribution

Please, check our guidelines: CONTRIBUTING.md

Attribution

This module is based on the postcss-scss library.