PostCSS CSS var to Less var

A PostCSS plugin to convert CSS variables to Less variables

Installation

npm install postcss-css-var-to-less-var

Examples

/* input */
:root {
  --color: black;
  --size: 15px;
}
div {
  --size: 20px;
  background: var(--color);
  font-size: var(--size);
}
p {
  font-size: var(--size);
}

/* output */
@color: black;
@size: 15px;
div {
  @size: 20px;
  background: @color;
  font-size: @size; // 20px
}
p {
  font-size: @size; // 15px
}

Usage

Postcss JS API

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

Gulp

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const varConvert = require('postcss-css-var-to-less-var');
gulp.task('css', () => {
    gulp.src('path/to/dev/css')
        .pipe(postcss([
            varConvert()
        ]))
        .pipe(gulp.dest('path/to/build/css'));
});

Tests

npm test

Special thanks

This package is a fork of postcss-css-var-to-sass-var. Thanks a lot Arpad Hegedus for this great work!

License

This project is licensed under the MIT License.