rollup-plugin-less-vars-to-css-vars

Less-to-CSS Variable Aggregator is an intelligent plugin designed to automate the process of converting variables from Less to CSS. It scans your project for all declared variables in Less files and transforms them into readable CSS variables. This plugin not only simplifies style management but also ensures more efficient use of variables, reducing development time and improving overall code structure.

Requirements

This plugin requires an LTS Node version (v14.0.0+) and Rollup v1.20.0+.

Install

npm install rollup-plugin-less-vars-to-css-vars --save-dev

Usage

Create a rollup.config.js configuration file and import the plugin:

import { exportLessVars } from "rollup-plugin-less-vars-to-css-vars";
const config = {
  input: "src/index.js",
  output: {
    dir: "output",
    format: "es",
  },
  plugins: [exportLessVars({ output: "theme.css" })],
};

export default config;

Then call rollup either via the CLI or the API.

Options

exclude

Type: Array[...String|RegExp]

A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore.

output

Type: String
Default: variables.css

CSS filename

Example

import { exportLessVars } from "rollup-plugin-less-vars-to-css-vars";
const config = {
  input: "src/index.js",
  output: {
    dir: "output",
    format: "es",
  },
  plugins: [exportLessVars({ output: "theme.css" })],
};

export default config;

@primary-color: #0000ff;
@text-color: #594c4a;

body {
  color: @text-color;
}

/* theme.css */
:root {
  --primary-color: #0000ff;
  --text-color: #594c4a;
}

Meta

LICENSE (MIT)