6.0.0 • Published 2 years ago

postcss-less v6.0.0

Weekly downloads
2,335,828
License
MIT
Repository
github
Last release
2 years ago

postcss-less

tests cover size

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:

npm install postcss-less --save-dev

Please consider becoming a patron 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.

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.

@import (option) 'file.less';

The AST will contain an AtRule node with:

  • an import: true property
  • a filename: <String> property containing the imported filename
  • an options: <String> property containing any import options specified

Inline Comments

Parsing 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.

Mixins

Parsing of LESS mixins is supported.

.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.

@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.

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) directly to the LESS source code

Meta

CONTRIBUTING

LICENSE (MIT)

@plone/volto@violetx/stylelint-config@hovey/stylelint-config-basic@xverse/matrix-code-generatorreact-scripts-jackpoodle-xiaokyorkfe-lint@astel/test@avid-ui/test@dite/bundler-webpack@infinitebrahmanuniverse/nolb-postcss-l@everything-registry/sub-chunk-2460@rife/lint@sacc/stylelint-config@tttiga/stylelint-config@ad2302/antd-theme-webpack-plugin@argo-design/argo-lint@arietta-studio/lint@astel/ui@astql/css.postcss@akijoey/stylelint-config@alsc-sfe/builder-saas-spa@1stg/stylelint-config@a1yyss/y-comps@avsb/utils@aurorafe/stylelint-config-base@alicloud/console-toolkit-plugin-react@alicloud/console-toolkit-plugin-webpack5-react@azabraao/prettier-plugin-css-order@azabraao/prettier-plugin-style-order@ayahub/lint@carryall/stylelint-config@constlab/stylelint-config-constlab@ctsx/webpack@beilo/modern@cssc-ment/configs@dangojs/stylelint-config-digitforce@darcytech/stylelint-config-darcytech@cyzeal/lint-config-lib@datawrapper/chart-core@demian96/tpl-build@decisions/react-scripts@denaro-config/stylelint-less@bixi-design/lint@bixi-design/builder@bfehub/stylelint-config-basic@bhargav018/electrode-archetype-react-app-dev@bud-fe/cli-xima@bud-fe/f2elint@breezr/plugin-react@bowencool/stylelint-config-less@browser-scan/scanner@bn-digital/postcss-config@bn-digital/webpack@baic/stylelint-config-yolk@baic/yolk-cli@bushuai/stylelint-config@cardstack/prettier@cbnb/front-standard@globalreach/stylelint-configcommon_webpackfengwuxp_common_webpackreact-server-render-apprct-treesample-react-scriptsrestack-mobile-clirestackjs-clisd-release-plussentimental-react-scriptsu-webant-merge-lessumi-theme-generatorumi-plugin-css-modulesumi-plugin-better-themevscode-lintvite-plugin-stylename-auto-classnamevite-plugin-css-auto-importvue-less-formatvue-merge-lessvue-standardtouchui-packtouchui-pc-packtopology-byfetestaaaaunplugin-vue-css-checkerunused-files-foundvue-css-formatvtheme-loadertyped-less-modules-tsvuepackwbp-dev-umdx-mpaas-to-uniappyeelight-fabricygd-pro-merge-lesswebpack-cli-reactwd-fe-stylelint-configytian-uiyjnb-uiyuf-core-pluginsvue-webpack-cliv3-resource-deps-analyzer
6.0.0

2 years ago

5.0.0

3 years ago

4.0.1

3 years ago

4.0.0

3 years ago

3.1.4

5 years ago

3.1.3

5 years ago

3.1.2

5 years ago

3.1.1

5 years ago

3.1.0

5 years ago

3.0.2

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.0.0

6 years ago

1.1.5

6 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.16.1

7 years ago

0.16.0

7 years ago

0.15.0

8 years ago

0.14.0

8 years ago

0.13.0

8 years ago

0.12.0

8 years ago

0.11.1

8 years ago

0.11.0

8 years ago

0.10.0

8 years ago

0.9.0

8 years ago

0.8.0

8 years ago

0.7.0

8 years ago

0.6.0

8 years ago

0.5.0

8 years ago

0.4.0

8 years ago

0.3.0

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.5

8 years ago

0.1.4

8 years ago

0.1.3

8 years ago

0.1.2

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago