Home

Awesome

A Complete Compile-LESS-to-CSS PostCSS plugin

Note: this plugin was mostly a proof-of-concept of converting ASTs and not something I'm actively maintaining. The best way to do this is probably just to use a tool like Gulp and pipe through gulp-less and then gulp-postcss.

This is a PostCSS custom parser plugin for integrating the popular Less.js CSS pre-processor into your PostCSS workflow! It integrates the entire Less engine, evaluates your .less, and exports a PostCSS AST that you can use to attach multiple subsequent PostCSS plugins.

Note

Example

Input example.less file

.add-bg-size(@size) {
	-webkit-background-size+: @size;
	background-size+: @size;
}

@default-size: 20px;

.box {
	.add-bg-size(@default-size (@default-size / 2));
	.add-bg-size(cover);
	width: calc(100% - 50px);
}

JavaScript

var less = require('postcss-less-engine');
var autoprefixer = require('autoprefixer');
var clean = require('postcss-clean');

var exampleLess = fs.readFileSync(path.join(__dirname, 'example.less'), 'utf8');

postcss([
    less({ strictMath: true }), 
    autoprefixer(), 
    clean()
  ])
  .process(exampleLess, { parser: less.parser, from: 'example.less' })
  .then(function (result) {
    console.log(result.css);
  }, function(err) {});

Output

.box{background-size:20px 10px,cover;width:calc(100% - 50px)}

Usage

Follow these simple steps to use postcss-less-engine.

Add postcss-less-engine to your build tool. (You must have Less.js and PostCSS installed as prerequisites.)

npm install postcss-less-engine --save-dev

Node

var less = require('postcss-less-engine');
less({ /* Less.js options */ }).process(YOUR_CSS, { parser: less.parser });

Load postcss-less-engine as a PostCSS plugin:

var less = require('postcss-less-engine');
postcss([
    less({ /* Less.js options */ })
]).process(YOUR_CSS, { parser: less.parser }).then(function (result) {
	// do something with result.css
});

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable postcss-less-engine within your Gulpfile:

var postcss = require('gulp-postcss');
var less = require('postcss-less-engine');

gulp.task('less', function () {
    return gulp.src('./css/src/style.less').pipe(
        postcss([
            less({ /* Less.js options */ })
        ], { parser: less.parser })
    ).pipe(
        gulp.dest('./css')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install postcss-less-engine --save-dev

Enable postcss-less-engine within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			parser: require('postcss-less-engine').parser,
			processors: [
				require('postcss-less-engine')({ /* Less.js options */ })
			]
		},
		dist: {
			src: 'css/*.css'
		}
	}
});

Misc

Similarly to postcss-import, the list of imported files can be viewed by assigning a function to the onImport key among the options:

less({
	/* other Less.js options */
	onImport: function(sources){
		console.log(sources)
	}
})

The received sources will be an array of strings, containing the absolute path to the files, which were imported, including the source file.