PostCSS CSS var to Less var

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

License

This project is licensed under the MIT License.