less-var-to-css-var

Convert Less Var To CSS Var

Installation

yarn add less-var-to-css-var

Usage

for Node Cil

less-var-to-css-var -i '~/styles/variables.less' -o '~/styles/variables-css2.less' -t ':root' -h "@import '/src/styles/variables.less';"

for Js

const lessVarToCssVar = require('less-var-to-css-var');

lessVarToCssVar({
  inputPath: '~/styles/variables.less',
  outputPath: '~/styles/variables-css.less',
  scopeTag: ':root',
  header: "@import '/src/styles/variables.less';",
  //
  // Dark Mode
  // supported since v1.5.0
  // css var MUST include `--dark` like
  // `@color-gray-7:`        // normal
  // `@color-gray-7--dark:`  // dark
  scopeTagDark: '.comp-wrapper--alwaysDarkMode,\n' +
    ':global(.@{THEME--DARK}) .comp-wrapper',
  removeAllRootDarkVars: true,
  removeAllDarkDarkSuffix: true,
  //
  // supported since v1.3.0
  jsOutputPath: `${CUR_DIR}/variables.js`,
  jsVar: 'PAGE_COLOR',
  jsheader: "import React, { useEffect } from 'react';",
  jsValueObjectKv: true,
  //
  // supported since v1.3.0
  useRealValue: true, // Use real CSS values instead of the --a: @a; mapping
  useRealValueFilterLessVar: '____IS_A_LESS_VAR____', // Replace the string of the less variable
});

Result

Input

// variables.less (input)
@import '~antd/lib/style/themes/default.less';

@THEME--DARK: ~'theme-dark';
@font-size-base: 14px;

Output

// variables-css.less (output)
@import '/src/styles/variables.less';

:root {
  --THEME--DARK: @THEME--DARK;
  --font-size-base: @font-size-base;
}

// BTW: more details can be found in the `/__test__` folder.

License

MIT © Jason Feng