postcss-less

library6.0.0jsnpmunverified

postcss-less is a PostCSS syntax parser specifically designed for LessCSS. It facilitates the application of PostCSS plugins, such as Autoprefixer or Stylelint, directly to Less source code without the need for prior Less compilation. The current stable version is 6.0.0, which mandates PostCSS v8.3.5 or higher as a peer dependency and requires Node.js v12+ for execution. This library's core function is to parse Less syntax into a PostCSS Abstract Syntax Tree (AST), enabling manipulation by other PostCSS tools and subsequent stringification back into Less. It is crucial to understand that postcss-less is *not* a Less compiler; users seeking Less compilation should utilize the official Less toolchain. Releases typically align with PostCSS major version updates, often introducing breaking changes to maintain ecosystem compatibility, alongside regular bug fixes and minor feature enhancements. Its key differentiators include tight integration with the PostCSS ecosystem for Less-specific linting and transformation, and its robust ability to parse Less features like `@import` statements, inline comments, mixins, and variables into a manipulable AST.

web-framework devops

npm install postcss-less

github ↗package ↗

INSTALL

IMPORT

SIG · POSTCSS-LESS

postcss-less

web-frameworkjavascriptv6.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

syntax

✓ import syntax from 'postcss-less'; // or const syntax = require('postcss-less');

The package exports a default `syntax` object. CommonJS `require` is shown in examples, but ESM `import` is also supported in Node.js v12+ environments. This `syntax` object is then passed to `postcss().process()`.

postcss

✓ import postcss from 'postcss'; // or const postcss = require('postcss');

✗ import { postcss } from 'postcss';

PostCSS itself is a default export, commonly imported as `postcss`. This is a peer dependency of `postcss-less`.

Demonstrates how to use `postcss-less` with a PostCSS plugin to process LESS source code, showing a basic transformation and output.

import postcss from 'postcss'; import lessSyntax from 'postcss-less'; // Example PostCSS plugin (e.g., Autoprefixer) const myPostcssPlugin = { postcssPlugin: 'MyPlugin', Root (root) { // console.log('Processing Less root:', root.toString()); root.append('// Added by MyPlugin\n.generated-class { color: green; }'); } }; const lessText = ` @link-color: #428bca; // inline comment .container { .mixin-1(); .mixin-2; .mixin-3 (@width: 100px) { width: @width; } a { color: @link-color; } } .rotation(@deg:5deg){ transform: rotate(@deg); } `; async function processLess() { try { const result = await postcss([myPostcssPlugin]).process(lessText, { syntax: lessSyntax, from: undefined }); console.log('Processed LESS:\n', result.css); // Output: LESS with transformations from myPostcssPlugin } catch (error) { console.error('Error processing LESS:', error); } } processLess();

Debug

Known issues

breakingVersion 6.0.0 introduced PostCSS as a mandatory peer dependency. Projects must explicitly install `postcss` alongside `postcss-less`.

fix

Ensure `postcss` is installed in your project: `npm install postcss` or `yarn add postcss`.

affects: >=6.0.0

breakingVersion 5.0.0 deprecated support for Node.js versions older than 12. Running on unsupported Node.js versions may lead to runtime errors or installation failures.

fix

Upgrade your Node.js environment to v12 or a newer compatible version. Tools like `nvm` (Node Version Manager) can help manage multiple Node.js versions.

affects: >=5.0.0

breakingVersion 4.0.0 updated `postcss-less` to be compatible with PostCSS 8, which introduced significant API changes. This version also dropped support for Node.js v8.

fix

Ensure your `postcss` dependency is compatible with PostCSS 8 (`^8.3.5` for `postcss-less@6.0.0`). Review your PostCSS plugin configurations for PostCSS 8 API changes, particularly around `postcss.parse()` and `processor.process()`.

affects: >=4.0.0

breakingVersion 3.0.0 was a complete rewrite, introducing significant changes to the Abstract Syntax Tree (AST) structure for Less-specific nodes. `@import` statements, Less variables, and Less mixins are now represented differently (e.g., as `AtRule` or `Rule` with specific boolean properties like `import: true`).

fix

If you are directly manipulating the PostCSS AST generated by `postcss-less`, you will need to update your code to reflect the new node structures. Refer to the v3.0.0 release notes for details on how specific Less constructs are now represented.

affects: >=3.0.0

gotcha`postcss-less` is solely a parser and syntax highlighter for Less; it does not compile Less code into CSS. Attempting to use it as a Less compiler will not work as expected.

fix

For Less compilation, use the official Less compiler (e.g., `less` npm package). `postcss-less` should be used when you want to apply PostCSS plugins to your Less source before or instead of compilation.

affects: all

gotchaLess variables are strictly parsed; a colon (`:`) must immediately follow a variable name (e.g., `@var: value;` is valid, `@var : value;` is not).

fix

Always ensure there is no whitespace between a Less variable name and its colon assignment operator to avoid parsing errors.

affects: all

Errors

Common errors & fixes

Error: Cannot find module 'postcss'

The `postcss` peer dependency is not installed in the project.

fix

Run `npm install postcss` or `yarn add postcss` to install the required `postcss` package.

npm ERR! code ENOSUPPORTEDENGINE

Attempting to install or run `postcss-less` on a Node.js version older than v12, which is unsupported since v5.0.0.

fix

Upgrade Node.js to v12 or higher. Use a tool like `nvm` to manage Node.js versions: `nvm install 18` and `nvm use 18`.

TypeError: (0, _postcss.default) is not a function

This typically indicates an incompatibility between your `postcss-less` version and the `postcss` version, or incorrect PostCSS API usage, especially when migrating from PostCSS 7 to 8.

fix

Ensure your `postcss` dependency aligns with the `postcss-less` requirements (e.g., `^8.3.5` for `postcss-less@6.0.0`). Update your PostCSS integration code to use `postcss([plugins]).process(css, options)` as per PostCSS 8 API.

Upgrade

Version history

6.0.0latest on npm

Audit

Dependencies

postcssrequiredPeer dependency required for PostCSS processing functionality.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/shellscape/postcss-less ↗

packagehttps://www.npmjs.com/package/postcss-less ↗