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.
less()
plugin needs to be the first PostCSS plugin called.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'
}
}
});
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.