You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

postcss-less-parser

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-less-parser

PostCSS plugin for integrating the popular Less CSS pre-processor into your PostCSS workflow

0.5.1
latest
Source
npmnpm
Version published
Maintainers
1
Created
Source

Finally, Less comes to PostCSS

Build Status

The PostCSS plugin you've been waiting for: 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.

Instead of trying to assemble a hodge-podge collection of PostCSS plugins that "emulate" a pre-processor, use a pre-processor!

THAT'S RIGHT. This plugin doesn't give you "Less-like" functionality, or "Less-like" parsing. It gives you the full awesomeness of Less, with the flexibility of PostCSS. Basically, you can throw your "pre-processor-y" plugins away now.

Having said that...

  • Because this uses the Less.js parser and not the default PostCSS processor, some parsing will be different. PostCSS accepts "broken" CSS, whereas Less doubles as a de facto CSS linter, and will return errors if your Less / CSS is poorly structured.
  • PostCSS will also sometimes "fix" CSS that uses property hacks, which Less preserves as the property name, or will remove comments from within values, which are also kept in the value by Less.
  • The less() plugin needs to be the first plugin called.
  • Less.js does not save "raws" when parsing. It also only preserves the start line / column of your source, which is still fine for Source Maps.

Usage

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

Add postcss-less-parser to your build tool:

npm install postcss-less-parser --save-dev

Node

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

Load postcss-less-parser as a PostCSS plugin:

var less = require('postcss-less-parser');
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-parser within your Gulpfile:

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

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

Grunt

Add [Grunt PostCSS] to your build tool:

npm install postcss-less-parser --save-dev

Enable postcss-less-parser within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

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

Keywords

postcss

FAQs

Package last updated on 11 May 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts