1596944197/js-var-to-css-var

Generate CSS/LESS variables and TS Types from JS/TS

js-var-to-css-var

Generate CSS/LESS variables and TS Types from JS/TS.

Installation

yarn add js-var-to-css-var

Usage

for Js

const jsVarToCssVar = require('js-var-to-css-var');

jsVarToCssVar({
  inputPath: `${CUR_DIR}/styles/style--js-1.js`,
  //
  outputCssPath: `${CUR_DIR}/_output--js/style--css-1.css`,
  outputCssScopeTag: ':root',
  //
  outputLessPath: `${CUR_DIR}/_output--js/style--less-1.less`,  // [Optional]
  outputLessHeaderImport: `@import './variables.less';`, // [Optional]
  //
  outputTypePath: `${CUR_DIR}/_output--js/style--type-1.ts`,  // [Optional]
  outputTypeName: 'ITheme1',  // [Optional]
});

for Node Cil

TODO

Result

Input

export const THEME_JS_COLOR = {
  '--color-red': '#f99',
  '--color-blue': '#1f9cff',
};

export const THEME_JS_FONT = {
  '--font-size-xs': '12px',
  '--font-size-md': '18px',
  '--font-size-lg': '24px',
};

Output

css

:root {
  --color-red: #f99;
  --color-blue: #1f9cff;
  --font-size-xs: 12px;
  --font-size-md: 18px;
  --font-size-lg: 24px;
}

less

@import './variables.less';

@color-red: #f99;
@color-blue: #1f9cff;
@font-size-xs: 12px;
@font-size-md: 18px;
@font-size-lg: 24px;

type

export type ITheme1 =
  | '--color-red'
  | '--color-blue'
  | '--theme-light'
  | '--theme-dark'
  | '--font-size-xs'
  | '--font-size-md'
  | '--font-size-lg'

Real World

sample

import { IGlobalCssVars } from '@/styles/vars/global-css-vars--type';
import { IOverwriteAntdVars } from '@/styles/vars/overwrite-antd-vars--type';

type ICssVars = IGlobalCssVars | IOverwriteAntdVars | string;

export const getCssVar = (cssVar: ICssVars): string => {
  return getComputedStyle(document.documentElement).getPropertyValue(cssVar);
};

// use getCssVar Fn
// getCssVar('--font    <-- here have IDE hint all css vars

watch style.ts file cahnge (use webpack plugin)

const WatchFileAndRunCallbackWebpackPlugin = require('watch-file-change-and-run-callback-webpack-plugin');

webpackConfig.plugins.push(
  new WatchFileAndRunCallbackWebpackPlugin({
    matchs: [
      {
        filePath: `${SRC_DIR}/styles/vars/global-css-vars.ts`,
        callback: () => {
          syncStyleCssVar(SRC_DIR);
        },
      },
    ],
  }),
);

License

MIT © Jason Feng