npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@leetcode/postcss-less

v0.15.1

Published

LESS parser for PostCSS

Downloads

3

Readme

PostCSS LESS Syntax

This project is not stable and is in development. If you'd like to contribute, please submit a Pull Request.

Build Status npm Downloads npm Version npm License js-strict-standard-style

A LESS parser for PostCSS.

This module does not compile LESS. It simply parses mixins and variables so that PostCSS plugins can then transform LESS source code alongside CSS.

Use Cases

  • lint your LESS code with 3rd-part plugins.
  • apply PostCSS transformations (such as Autoprefixer) directly to the LESS source code

CONTRIBUTORS WANTED!

I've started developing this module as a necessary component in Front-End community, but now, for some reasons, I don't have enought time to support it on 100% :( I very welcome the contributors that have passion to develop this module.

Usage

LESS Transformations

The main use case of this plugin is to apply PostCSS transformations directly to LESS source code. For example, if you ship a theme written in LESS and need Autoprefixer to add the appropriate vendor prefixes to it.

const syntax = require('postcss-less');
postcss(plugins).process(lessText, { syntax: syntax }).then(function (result) {
    result.content // LESS with transformations
});

Comments

Inline comments

This module also enables parsing of single-line comments in CSS source code.

:root {
    // Main theme color
    --color: red;
}

Note that you don't need a special stringifier to handle the output; the default one will automatically convert single line comments into block comments. If you need to get inline comments, use custom PostCSSLess stringifier

Rule node

PostCSS Rule Node

rule.ruleWithoutBody

It shows that Rule node has body or not.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        &:extend(.class1);
        .mixin-name(@param1, @param2);
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].ruleWithoutBody // => true for &:extend
root.first.nodes[1].ruleWithoutBody // => true for calling of mixin

rule.nodes

Array of children nodes. Note that rules without body don't have this property.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        &:extend(.class1);
        .mixin-name(@param1, @param2);
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].nodes // => undefined for &:extend
root.first.nodes[1].nodes // => undefined for mixin calling

rule.extendRule

It shows that Rule node is a nested extend rule.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        &:extend(.class1);
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].extendRule // => true

Comment Node

PostCSS Comment Node

comment.inline

It's inline comment or not.

import postCssLess from 'postcss-less';

const root = postCssLess.parse('// Hello world');

root.first.inline // => true

comment.block

It's block comment or not.

import postCssLess from 'postcss-less';

const root = postCssLess.parse('/* Hello world */');

root.first.block // => true

comment.raws.begin

Precending characters of comment node: // or /*.

comment.raws.content

Raw content of the comment.

import postCssLess from 'postcss-less';

const root = postCssLess.parse('// Hello world');

root.first.raws.content // => '// Hello world'

Stringifier

If you need to have LESS code without PostCSS transformation, you have to specify a custom stringifier:

import postcss from 'postcss';
import postcssLess from 'postcss-less';
import stringify from 'postcss-less/less-stringify';

const lessCode = `
    // Non-css comment
    
    .container {
        .mixin-1();
        .mixin-2;
        .mixin-3 (@width: 100px) {
            width: @width;
        }
    }
    
    .rotation(@deg:5deg){
      .transform(rotate(@deg));
    }
`;

postcss().process(less, {
    syntax: postcssLess,
    stringifier: stringify
}).then((result) => {
    console.log(result.content); // this will be value of `lessCode` without changing of comment nodes and mixins
});         

Contribution

Please, check our guidelines: CONTRIBUTING.md

Attribution

This module is based on the work of postcss-scss library and includes the LESS parser efforts of github:gilt/postcss-less