postcss-less

What is postcss-less?

The postcss-less npm package is a tool that allows you to parse LESS syntax with PostCSS, enabling you to use PostCSS plugins with LESS files. It is a syntax plugin for PostCSS, a tool for transforming styles with JavaScript plugins.

What are postcss-less's main functionalities?

Parsing LESS Syntax

This feature allows you to parse LESS files using PostCSS by specifying the postcss-less syntax. This is useful for applying PostCSS plugins to LESS files.

const postcss = require('postcss');
const postcssLess = require('postcss-less');

postcss().process(lessCode, { syntax: postcssLess }).then(result => {
  console.log(result.css);
});

Stringifying LESS

This feature enables you to convert a PostCSS AST (Abstract Syntax Tree) back into a LESS string. This is useful when you want to generate LESS code after manipulating the AST.

const postcss = require('postcss');
const postcssLess = require('postcss-less');

const root = postcss.parse(lessCode, { syntax: postcssLess });
const less = root.toString(postcssLess);

Other packages similar to postcss-less

postcss-scss

This package is similar to postcss-less but is designed to work with SCSS syntax. It allows you to use PostCSS plugins with SCSS files.

postcss-sass

Similar to postcss-less, postcss-sass enables you to parse SASS syntax with PostCSS. It is another syntax plugin for PostCSS that targets SASS files instead of LESS.

postcss-styl

This package is a PostCSS syntax for parsing Stylus. Like postcss-less, it allows you to use PostCSS plugins with Stylus files, providing similar functionality for a different preprocessor language.

README

PostCSS LESS syntax

A LESS parser for PostCSS.

This module does not compile LESS. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform LESS source code alongside CSS.

Usage

const syntax = require('postcss-less');
postcss(plugins).process(yourLessCode, {syntax: syntax}).then((result) => {
    // result.content - LESS with transformations
});

Problems

• This plugin skips all inner mixins and &:extend() selector