Using New LESS Plugins With Your Build Process

In early November, the world’s second favorite CSS preprocessor, LESS, hit version 2.0. With v2.0 came plugins, which means compiling your LESS into your idea of perfect CSS is about to get a whole lot simpler. If you are using LESS in your build processes (grunt, gulp, burp, etc.) then you are going to want to learn about these plugins.

Existing Plugins

cleancss— The quintessential CSS compresser / minifier, formally part of LESS core, is now a plugin.

group-css-media-queries — It can be fun to write nested media queries in LESS, group-css-media-queries puts all of your identical media query definitions into one.

autoprefixer — goodbye lesshat, hello not having -webkit-border-radius in your output ever again. Autoprefixer lets you write plain CSS and define the level of support you want to provide. It will do the dirty work of checking the latest figures from caniuse.com and add in vendor prefixes for you.

inlineurls — Magically turns your url(‘logo.png’) into a gigantic data-uri, reducing the number of network requests for your end users.

Npm Import —Adds the ability for LESS to import from npm packages.

Bower Resolve — Import LESS files from Bower packages.

New plugins are constantly being added, so check lesscss.org for the most up-to-date list.

But, but gulp already has tasks that can do all of those things.

True, but by using the plugin version you are using a plugin that is not tied to the ephemerality of the build tool of the year. You can migrate to a different build tool and use the same core LESS plugins to create your CSS.

Plugin Wishlist

Wouldn’t it be cool if someone built plugins that:

• Beautified the output?
• Linted the output?
• Automatically converted non word characters in psuedo elements’ content to their hex equivalents?

That is my small wish list for now, any more ideas?

Anyhow, here is a running list of how to use plugins in your build process:

Using Gulp

Just like any npm module, LESS plugins need to be installed and saved as a devDependency in your package.json file (or globally). So fire up your terminal inside your project’s directory and do a quick

npm install less-plugin-autoprefix --save-dev

That was easy.

The next step is to require pull in and reference the plugin in your gulpfile, so add the following to your gulpfile.js

var autoprefix-plugin = require('less-plugin-autoprefix');
var autoprefix-options = {browsers: ["last 2 versions"]};
var autoprefix = new autoprefix-plugin(autoprefix-options);

The final step is to pass your new plugin into the LESS compile task. That looks something like this:

gulp.src('./less/**/*.less')
    .pipe(less({
        plugins: [autoprefix]
    }))
    .pipe(gulp.dest('./public/css'));

Want to use another plugin, say group media queries?

npm install less-plugin-group-css-media-queries --save-dev

Just require it.

var groupMediaQueries = require('less-plugin-group-css-media-queries');

Since this plugin doesn’t take any options, we don’t need to new it up. Just put it right into the LESS compile task like so:

gulp.src('./less/**/*.less')
    .pipe(less({
        plugins: [autoprefix, groupMediaQueries]
    }))
    .pipe(gulp.dest('./public/css'));

Using Grunt

grunt-contrib-less has updated to 1.0.0, and with the major rev comes support for LESS plugins.

The first step is installing the plugins, lets start with the autoprefixer:

npm install less-plugin-autoprefix --save-dev

and how about combine media queries too:

npm install less-plugin-group-css-media-queries --save-dev

Now you can use and configure these plugins by adding them to your grunt task. Plugins without options seem to not require the “new” keyword in order to work.

grunt.initConfig({
  less: {
    development: {
      options: {
        paths: ["assets/css"],
        plugins: [
          new (require('less-plugin-autoprefix'))({browsers: ["last 2 versions"]}),
          require('less-plugin-group-css-media-queries')
        ]
      },
      files: {
        "test/grunt.css": "less/test.less"
      }
    }
  }
});

Cris Noble is a developer and partner at Kovalent, a San Diego based design and development studio. You can find out more about him at crisnoble.com, fork his code on github, or follow him on Twitter @crisnoble.