Neighborly Package Megalodon

    postcss-less
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/postcss-less package

    3.1.1 • Public • Published

    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

    Using yarn:

    yarn add postcss-less --dev

    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)

    Install

    npm i postcss-less@3.1.1

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    17.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • shellscape