Novices Plagiarizing Mozart

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

    2.0.0 • Public • Published

    PostCSS LESS Syntax Build Status npm Version

    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.

    npm Downloads npm License js-strict-standard-style

    Install

    npm i postcss-less@2.0.0

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    93.9 kB

    Total Files

    58

    Last publish

    Collaborators

    • shellscape