A PostCSS plugin to convert CSS variables to Less variables
npm install postcss-css-var-to-less-var
/* 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
}
postcss([require('postcss-css-var-to-less-var')]).process(yourCSS);
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'));
});
npm test
This package is a fork of postcss-css-var-to-sass-var. Thanks a lot Arpad Hegedus for this great work!
This project is licensed under the MIT License.