{"library":"postcss-less","title":"PostCSS LESS Parser","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install postcss-less"],"cli":null},"imports":["import syntax from 'postcss-less';\n// or\nconst syntax = require('postcss-less');","import postcss from 'postcss';\n// or\nconst postcss = require('postcss');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import postcss from 'postcss';\nimport lessSyntax from 'postcss-less';\n\n// Example PostCSS plugin (e.g., Autoprefixer)\nconst myPostcssPlugin = {\n  postcssPlugin: 'MyPlugin',\n  Root (root) {\n    // console.log('Processing Less root:', root.toString());\n    root.append('// Added by MyPlugin\\n.generated-class { color: green; }');\n  }\n};\n\nconst lessText = `\n@link-color: #428bca;\n// inline comment\n\n.container {\n    .mixin-1();\n    .mixin-2;\n    .mixin-3 (@width: 100px) {\n        width: @width;\n    }\n    a {\n        color: @link-color;\n    }\n}\n\n.rotation(@deg:5deg){\n  transform: rotate(@deg);\n}\n`;\n\nasync function processLess() {\n  try {\n    const result = await postcss([myPostcssPlugin]).process(lessText, { syntax: lessSyntax, from: undefined });\n    console.log('Processed LESS:\\n', result.css);\n    // Output: LESS with transformations from myPostcssPlugin\n  } catch (error) {\n    console.error('Error processing LESS:', error);\n  }\n}\n\nprocessLess();","lang":"javascript","description":"Demonstrates how to use `postcss-less` with a PostCSS plugin to process LESS source code, showing a basic transformation and output.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}