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',
  outputCssDarkScopeTag: ':root.dark',                          // [Optional] 
  outputCssDarkVarSuffix: '--dark',                             // [Optional]
  //
  outputLessPath: `${CUR_DIR}/_output--js/style--less-1.less`,  // [Optional]
  outputLessHeaderImport: `@import './variables.less';`,        // [Optional]
  outputLessIgnoreCssDarkVar: false,                            // [Optional]
  
  //
  outputTypePath: `${CUR_DIR}/_output--js/style--type-1.ts`,    // [Optional]
  outputTypeName: 'ITheme1',                                    // [Optional]
  outputTypeIgnoreCssDarkVar: false,                            // [Optional]
});

for Node CLI

TODO

Result

Input

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

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;
  --text-color: #c70000;
}

:root.dark {
  --text-color: #ffa4a4;
}

less

@import './variables.less';

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

type

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

Built-in Utils

import {
  _getCssVar,
  _setCssVar,
  _getCssPxToNumber,
  IGetCssVarOpts,
  IgetCssPxToNumberOpts,
} from 'js-var-to-css-var/lib/utils';

Real World

sample

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

type IAllCssVars = IGlobalCssVars | IOverwriteAntdVars | string;

export const _getCssVar = (cssVar: IAllCssVars): 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