A PostCSS plugin that transforms `css var` to `less var`.

Overview

PostCSS CSS var to Less var PostCSS Logo

NPM Version BGitter Chat

A PostCSS plugin to convert CSS variables to Less variables

Installation

npm install postcss-transform-css-var

Examples

/* input css/less */
:root { --color: black; }
@prefix: ~'flyfly';
.@prefix {
  &-foo {
    --color: red;
    // --c: 10px;
    &-bar {
      background: var(--color, blue);
    }
  }
}
/* output less */
@color: black;
@prefix: ~'flyfly';
.@prefix {
  &-foo {
    @color: red;
    // --c: 10px;
    &-bar {
      background: @color;
    }
  }
}

Usage

Postcss JS API

postcss([require('postcss-transform-css-var')]).process(yourCSS);

Gulp

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const syntax = require('postcss-less');
const varConvert = require('postcss-transform-css-var');
const through = require("through2");

const convertPipe = () =>
  through.obj(async(file, enc, cb) => {
    let result = await postcss([varConvert()]).process(file.contents, {
      from: undefined,
      syntax: syntax
    });
    file.contents = Buffer.from(result.css, enc);
    cb(null, file);
  })

gulp.src('src/**/*.less', { basePath: './' })
  .pipe(convertPipe())
  .pipe(gulp.dest('./', { overwrite: true }))

Tests

npm test

TODO

  • support option type: scss

Special thanks

This package is a fork of postcss-css-var-to-less-var. Thanks a lot lauthieb for this great work!

Star History

Star History Chart

License

This project is licensed under the MIT License.

You might also like...

A small library that helps you to use await, less.

Await Less A library to help you use await, less. In a world full of prefix awaits (ever heard of postfix await?), constantly having to wrap your expr

Jun 27, 2022

"Rectilearn" a tool to make studying less ordinary

This is the repo for the TWT codejam 2022 https://rectilearn.vercel.app/ by Team Rectifiers Our Goal To create a website which helps people to study b

Jun 28, 2022

PDF.js compiled for node-less, serverless enviroments.

Pdf.mjs PDF.js custom-compiled for nodeless, serverless enviroments, like Deno Deploy and Cloudflare Workers. Rocking in under 700kb uncompressed. Usa

Apr 16, 2022

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

Jan 3, 2023

EggyJS is a Javascript micro Library for simple, lightweight toast popups focused on being dependency-less, lightweight, quick and efficient.

EggyJS EggyJS is a Javascript micro Library for simple, lightweight toast popups. The goal of this library was to create something that meets the foll

Jan 8, 2023

Less clicking, more creating. Navigate to your favorite actions on the websites you love with just one click.

Less clicking, more creating. Navigate to your favorite actions on the websites you love with just one click.

Navigate to your favorite actions on the websites you love with just one click Web https://irtaza9.github.io/awesome-shortcuts/ Available Shortcuts Go

Aug 25, 2022

Show More Less - jQuery - Very useful tiny tool

myOwnLineShowMoreLess Show More Less - jQuery - Very useful tiny tool. Demo Getting Started This is simple plugin developed using jQuery. Prerequisite

Dec 29, 2020

All in one is a CLI to make your journey in web development less painful (it makes your life way easier).

All In One CLI (Aio) The Ultimate CLI for all your needs in web development. Description This is a CLI that has all the commands you need to do anythi

Sep 25, 2022
Owner
cherry-man
cherry-man
A utility that mutates and transforms a style-dictionary object into something Figma Tokens plugin understands

Brought to you by Style Dictionary To Figma A utility that transforms a style-dictionary object into something Figma Tokens plugin understands. Used b

‹div›RIOTS 74 Jan 4, 2023
Get the last logs of your /var/log folder

var-log-crawler Get the last logs of your /var/log folder Requirements: Node installed. Hot to use: Rename .env.sample to .env and fill with your valu

David William Rigamonte 2 Jan 5, 2022
A starter to show you how to use PostCSS with Remix.

remix-postcss This project demonstrates how to use PostCSS (TailwindCSS) in a Remix project, you can find a tutorial video on Youtube. This project is

EGOIST 6 Mar 18, 2022
VanillaSelectBox - A dropdown menu with lots of features that takes a select tag and transforms it into a single or multi-select menu with 1 or 2 levels

vanillaSelectBox v1.0.0 vanillaSelectBox : v1.00 : Adding a package.json file New : Possibility to change the dropdown tree and change the remote sear

philippe MEYER 103 Dec 16, 2022
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro

Vic Shóstak 35 Aug 24, 2022
A less plugin that removes ant-design global styles

less-plugin-remove-antd-global-styles This is a less plugin that removes ant-design global styles. It works well with vite, webpack, rollup and babel-

null 9 Nov 22, 2022
The AKE-less General Purpose Build System with JavaScript DSL for Node.js platform.

The AKE-less General Purpose Build System with JavaScript DSL for Node.js platform. Inspired by NUKE. This project is reaching a mature stage, althoug

Aleksej Komarov 33 Oct 16, 2022
2x times faster than chalk and use 5x less space in node_modules

Nano Colors A tiny and fast Node.js library for formatting terminal text with ANSI colors. It is 2 times faster than chalk. Both loading and calls. No

Andrey Sitnik 886 Dec 30, 2022
Simple NextJS Project Template to write less boilerplate code when starting a new Next JS Project

Simple NextJS Project Template to write less boilerplate code when starting a new Next JS Project

Juan David Ramirez Mendoza 1 Feb 12, 2022
WebVM is a server-less virtual Linux environment running fully client-side in HTML5/WebAssembly.

WebVM This repository hosts the source code of the https://webvm.io live demo page. WebVM is a server-less virtual Linux environment running fully cli

Leaning Technologies Ltd 1.7k Jan 8, 2023