https://github.com/solidzoro/less-var-to-css-var
Convert Less Var To CSS Var
https://github.com/solidzoro/less-var-to-css-var
cli convert css less var vars
Last synced: 2 months ago
JSON representation
Convert Less Var To CSS Var
- Host: GitHub
- URL: https://github.com/solidzoro/less-var-to-css-var
- Owner: SolidZORO
- License: mit
- Created: 2022-01-02T08:01:23.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-03T03:53:21.000Z (almost 4 years ago)
- Last Synced: 2025-03-04T09:06:52.000Z (over 1 year ago)
- Topics: cli, convert, css, less, var, vars
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# less-var-to-css-var
Convert Less Var To CSS Var
[![version][npm-img]][npm-url]
[![license][mit-img]][mit-url]
[![size][size-img]][size-url]
[![download][download-img]][download-url]
## Installation
```sh
yarn add less-var-to-css-var
```
## Usage
### for Node Cil
```bash
less-var-to-css-var -i '~/styles/variables.less' -o '~/styles/variables-css2.less' -t ':root' -h "@import '/src/styles/variables.less';"
```
### for Js
```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
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
```less
// variables.less (input)
@import '~antd/lib/style/themes/default.less';
@THEME--DARK: ~'theme-dark';
@font-size-base: 14px;
```
Output
```less
// 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][author-url]
[author-url]: https://github.com/SolidZORO
[mit-img]: https://img.shields.io/npm/l/less-var-to-css-var.svg?style=flat&colorA=000000&colorB=000000
[mit-url]: ./LICENSE
[npm-img]: https://img.shields.io/npm/v/less-var-to-css-var?style=flat&colorA=000000&colorB=000000
[npm-url]: https://www.npmjs.com/package/less-var-to-css-var
[size-img]: https://img.shields.io/bundlephobia/minzip/less-var-to-css-var?label=bundle&style=flat&colorA=000000&colorB=000000
[size-url]: https://www.npmjs.com/package/less-var-to-css-var
[download-img]: https://img.shields.io/npm/dt/less-var-to-css-var.svg?style=flat&colorA=000000&colorB=000000
[download-url]: https://www.npmjs.com/package/less-var-to-css-var
[build-img]: https://github.com/SolidZORO/less-var-to-css-var/workflows/badge.svg
[build-url]: https://github.com/SolidZORO/less-var-to-css-var/actions