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

    0.6.0 • Public • Published

    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.

    Build Status npm Downloads npm Version npm License js-strict-standard-style

    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 a plugin such as Stylelint.
    • 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
    });

    Parser options

    • mixinsAsAtRules - parse all mixins as AtRule nodes

    • innerMixinsAsRules - parse all inner mixins as Rule nodes

    It makes sense to use this option with mixinsAsAtRules if you want to parse mixins on the root level as AtRule and all inner mixins as Rule nodes.

    Options help you to tell postcss-less to fake LESS-specific syntax. For example, Stylelint requires the next options:

    const syntax = require('postcss-less');
    const postcssParserOptions = { 
        syntax: syntax, 
        mixinsAsAtRules: true,
        innerMixinsAsRules: true
    };
    
    postcss().process(lessText, postcssParserOptions).then(function (result) {
        result.content // LESS with transformations
    });

    Inline Comments for PostCSS

    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.

    Restrictions

    Skipping mixins without body

    postcss-less parses all mixins without body as custom nodes with specifix types:

    .foo(); //'mixin-function' node
    .foo; // 'mixin-inline' node

    PostCSS skips all these mixins, so you won't have them in the result.

    Skipping inner extend

    postcss-less parses nested &:extend constructions as custom nodes with type nested-extend. PostCSS doesn't parse this node type and you won't have these constructions in the result.

    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

    Install

    npm i postcss-less@0.6.0

    Version

    0.6.0

    License

    MIT

    Last publish

    Collaborators

    • shellscape