1.6.0 • Published 2 years ago
less-var-to-css-var v1.6.0
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
1.6.0
2 years ago
1.5.0
2 years ago
1.4.4
2 years ago
1.3.4
2 years ago
1.4.2
2 years ago
1.3.3
2 years ago
1.4.1
2 years ago
1.3.2
2 years ago
1.4.0
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.0
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.0.2
2 years ago