postcss-less
LESS parser for PostCSS
Last updated 7 months ago by shellscape .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install postcss-less 
SYNC missed versions from official npm registry.

postcss-less

tests cover size

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

Please consider becoming a patron if you find this module useful.

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)

Current Tags

  • 3.1.4                                ...           latest (7 months ago)

42 Versions

  • 3.1.4                                ...           7 months ago
  • 3.1.3                                ...           7 months ago
  • 3.1.2                                ...           9 months ago
  • 3.1.1                                ...           9 months ago
  • 3.1.0                                ...           a year ago
  • 3.0.2                                ...           a year ago
  • 3.0.1                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.1.5                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.16.1                                ...           2 years ago
  • 0.16.0                                ...           2 years ago
  • 0.15.0                                ...           3 years ago
  • 0.14.0                                ...           3 years ago
  • 0.13.0                                ...           3 years ago
  • 0.12.0                                ...           3 years ago
  • 0.11.1                                ...           3 years ago
  • 0.11.0                                ...           3 years ago
  • 0.10.0                                ...           3 years ago
  • 0.9.0                                ...           4 years ago
  • 0.8.0                                ...           4 years ago
  • 0.7.0                                ...           4 years ago
  • 0.6.0                                ...           4 years ago
  • 0.5.0                                ...           4 years ago
  • 0.4.0                                ...           4 years ago
  • 0.3.0                                ...           4 years ago
  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.5                                ...           4 years ago
  • 0.1.4                                ...           4 years ago
  • 0.1.3                                ...           4 years ago
  • 0.1.2                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 148
This Week 6,724
This Month 51,253
Last Day 3,378
Last Week 17,161
Last Month 77,051
Dependencies (1)
Dev Dependencies (16)
Dependents (104)

Copyright 2014 - 2016 © taobao.org |