Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shellscape/postcss-less
PostCSS Syntax for parsing LESS
https://github.com/shellscape/postcss-less
custom-stringifier less parse parser postcss postcss-plugin stylelint syntax
Last synced: 7 days ago
JSON representation
PostCSS Syntax for parsing LESS
- Host: GitHub
- URL: https://github.com/shellscape/postcss-less
- Owner: shellscape
- License: mit
- Created: 2016-01-26T09:59:51.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-23T15:03:42.000Z (over 1 year ago)
- Last Synced: 2025-01-18T20:49:42.583Z (14 days ago)
- Topics: custom-stringifier, less, parse, parser, postcss, postcss-plugin, stylelint, syntax
- Language: JavaScript
- Homepage:
- Size: 1.14 MB
- Stars: 124
- Watchers: 8
- Forks: 39
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/funding.yml
- License: LICENSE
Awesome Lists containing this project
README
[tests]: https://img.shields.io/circleci/project/github/shellscape/postcss-less.svg
[tests-url]: https://circleci.com/gh/shellscape/postcss-less
[cover]: https://codecov.io/gh/shellscape/postcss-less/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/shellscape/postcss-less
[size]: https://packagephobia.now.sh/badge?p=postcss-less
[size-url]: https://packagephobia.now.sh/result?p=postcss-less
[PostCSS]: https://github.com/postcss/postcss
[PostCSS-SCSS]: https://github.com/postcss/postcss-scss
[LESS]: https://lesscss.org/
[Autoprefixer]: https://github.com/postcss/autoprefixer
[Stylelint]: http://stylelint.io/
# postcss-less
[![tests][tests]][tests-url]
[![cover][cover]][cover-url]
[![size][size]][size-url]
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._
## Install
Using npm:
```console
npm install postcss-less --save-dev
```
Please consider [becoming a patron](https://www.patreon.com/shellscape) if you find this module useful.
## Usage
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.
```js
const syntax = require('postcss-less');
postcss(plugins)
.process(lessText, { syntax: syntax })
.then(function (result) {
result.content // LESS with transformations
});
```
## LESS Specific Parsing
### `@import`
Parsing of LESS-specific `@import` statements and options are supported.
```less
@import (option) 'file.less';
```
The AST will contain an `AtRule` node with:
- an `import: true` property
- a `filename: ` property containing the imported filename
- an `options: ` property containing any [import options](http://lesscss.org/features/#import-atrules-feature-import-options) specified
### Inline Comments
Parsing of single-line comments in CSS is supported.
```less
:root {
// Main theme color
--color: red;
}
```
The AST will contain a `Comment` node with an `inline: true` property.
### Mixins
Parsing of LESS mixins is supported.
```less
.my-mixin {
color: black;
}
```
The AST will contain an `AtRule` node with a `mixin: true` property.
#### `!important`
Mixins that declare `!important` will contain an `important: true` property on their respective node.
### Variables
Parsing of LESS variables is supported.
```less
@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._
## Stringifying
To process LESS code without PostCSS transformations, custom stringifier
should be provided.
```js
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;
```
## Use Cases
- Lint LESS code with 3rd-party plugins.
- Apply PostCSS transformations (such as [Autoprefixer](https://github.com/postcss/autoprefixer)) directly to the LESS source code
## Meta
[CONTRIBUTING](./.github/CONTRIBUTING)
[LICENSE (MIT)](./LICENSE)