Normally Palatable Mango

    optimizer-less

    2.0.3 • Public • Published

    optimizer-less

    Build Status

    Optimizer plugin to support compilation of Less CSS dependencies

    Installation

    npm install optimizer-less --save

    The optimizer-less plugin will then need to be registered as shown below before you can start adding Less dependencies:

    require('optimizer').configure({
        ...
        plugins: [
            'optimizer-less',
            ...
        ]
    });

    Basic Usage

    Optimizer.json

    {
        "dependencies": [
            "./variables.less",
            "./foo.less",
            "./bar.less"
        ]
    }

    The optimizer-less plugin will concatenate all of the Less dependencies targeted for the same bundle and pass that as input to the Less renderer. Therefore, given the following contents of each file:

    variables.less:

    @foo-color: red;
    @bar-color: green;
    @logo-image: url(logo.png);

    foo.less:

    .foo {
        color: @foo-color;
        background-image: @logo-image;
    }

    bar.less:

    .bar {
        color: @bar-color;
    }

    The output will be the following:

    .foo {
        color: red;
        background-image: url(logo-a0db53.png);
    }
     
    .bar {
        color: green;
    }

    Less Imports

    You can use @import (e.g., @import "foo.less";) inside a Less file to import other Less files, but if you want to provide global imports to all Less files across all bundles then you can use the less-import dependency type as shown below:

    {
        "dependencies": [
            "less-import: ./variables.less",
            "./foo.less",
            "./bar.less"
        ]
    }

    The optimizer-less plugin also supports resolving Less files using the Node.js module resolver. If you need to include a Less file found in an installed module then you can prefix an import with require:. For example, given the following directory structure:

    ./
    └── node_modules/
        └── my-module/
            └── foo.less
    

    The foo.less file that is part of the installed my-module can then be added as a dependency using either of the following approaches:

    using @import:

    @import "require: my-module/foo.less";

    using optimizer.json:

    {
        "dependencies": [
            "require: my-module/foo.less"
        ]
    }

    URLs

    URLs in the form url(path) inside Less files will automatically be resolved by the optimizer. For example:

    input.less:

    .foo {
        background-image: url(foo.png);
    }

    output.css:

    .foo {
        background-image: url(/static/foo-a0db53.png);
    }

    The optimizer-less plugin resolves resource URLs (e.g. url(logo.png)) before the CSS is produced. Therefore, the following is not allowed since Less variables are not allowed in the url() function:

    /* BAD! ☹ */
     
    @logo-image: "logo.png";
     
    .foo {
        background-image: url("@{logo-image}"); 
    }

    Instead, you must do the following:

    /* GOOD! ☺ */
     
    @logo-image: url(logo.png);
     
    .foo {
        background-image: @logo-image;
    }

    Install

    npm i optimizer-less

    DownloadsWeekly Downloads

    17

    Version

    2.0.3

    License

    Apache License v2.0

    Last publish

    Collaborators

    • austinkelleher
    • dylanpiercey
    • mlrawlings
    • pnidem
    • philidem