
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
postcss-less-engine
Advanced tools
PostCSS plugin for integrating the popular Less CSS pre-processor into your PostCSS workflow
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" and "Sass-ish" plugins away now.
less()
plugin needs to be the first PostCSS plugin called.With a Less.js plugin, your LESS is parsed, evaluated, and exported as a string which is sent to the plugin. In the case of less-plugin-autoprefix, the plugin calls PostCSS / Autoprefixer to parse that CSS output string. So, parsing happens twice, although in real-world scenarios that probably doesn't matter a whole lot.
The postcss-less-engine plugin instead directly converts the evaluated Less AST to a PostCSS AST without re-parsing. WHICH WAS REALLY HARD. But that work makes this plugin more of a "proper" PostCSS plugin.
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);
}
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) {});
.box{background-size:20px 10px,cover;width:calc(100% - 50px)}
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
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
});
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')
);
});
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'
}
}
});
FAQs
PostCSS plugin for integrating the popular Less CSS pre-processor into your PostCSS workflow
We found that postcss-less-engine demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.