postcss-less
Advanced tools
Package description
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.
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);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.
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.
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
A PostCSS Syntax for parsing LESS
Note: This module requires Node v6.14.4+. poscss-less is not a LESS compiler. For compiling LESS, please use the official toolset for LESS.
Using npm:
npm install postcss-less --save-dev
Please consider becoming a patron if you find this module useful.
The most common use of postcss-less is for applying PostCSS transformations directly to LESS source. eg. ia theme written in LESS which uses Autoprefixer to add appropriate vendor prefixes.
const syntax = require('postcss-less');
postcss(plugins)
.process(lessText, { syntax: syntax })
.then(function (result) {
result.content // LESS with transformations
});
@importParsing of LESS-specific @import statements and options are supported.
@import (option) 'file.less';
The AST will contain an AtRule node with:
import: true propertyfilename: <String> property containing the imported filenameoptions: <String> property containing any import options specifiedParsing of single-line comments in CSS is supported.
:root {
// Main theme color
--color: red;
}
The AST will contain a Comment node with an inline: true property.
Parsing of LESS mixins is supported.
.my-mixin {
color: black;
}
The AST will contain an AtRule node with a mixin: true property.
!importantMixins that declare !important will contain an important: true property on their respective node.
Parsing of LESS variables is supported.
@link-color: #428bca;
The AST will contain an AtRule node with a variable: true property.
Note: LESS variables are strictly parsed - a colon (:) must immediately follow a variable name.
To process LESS code without PostCSS transformations, custom stringifier should be provided.
const postcss = require('postcss');
const syntax = require('postcss-less');
const less = `
// inline comment
.container {
.mixin-1();
.mixin-2;
.mixin-3 (@width: 100px) {
width: @width;
}
}
.rotation(@deg:5deg){
.transform(rotate(@deg));
}
`;
const result = await postcss().process(less, { syntax });
// will contain the value of `less`
const { content } = result;
FAQs
LESS parser for PostCSS
The npm package postcss-less receives a total of 887,226 weekly downloads. As such, postcss-less popularity was classified as popular.
We found that postcss-less 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
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.