feat: add opts outputLessIgnoreCssDarkVar, outputTypeIgnoreCssDarkVar

Author: SolidZORO

README.md

@@ -33,9 +33,12 @@ jsVarToCssVar({
   //
   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]
 });
 
 ```

__tests__/_output--ts/style--type-2.ts

@@ -9,8 +9,6 @@ export type ITheme2 =
   | '--pos-top'
   | '--theme-light'
   | '--theme-dark'
-  | '--text-color'
-  | '--bg-color'
   | '--font-size-xs'
   | '--font-size-md'
   | '--font-size-lg'

__tests__/_output--ts/theme--less-2.less

@@ -10,8 +10,6 @@ All code is automatically generated by plugin `js-var-to-css-var`.
 @pos-top: 0;
 @theme-light: ~'theme-light';
 @theme-dark: ~'theme-dark';
-@text-color: #c70000;
-@bg-color: #e0e0e0;
 @font-size-xs: 12px;
 @font-size-md: 18px;
 @font-size-lg: 24px;

__tests__/test-output--ts.ts

@@ -31,8 +31,10 @@ jsVarToCssVar([
     //
     outputLessPath: `${CUR_DIR}/_output--ts/theme--less-2.less`,
     outputLessHeaderImport: `@import './variables.less';`,
+    outputLessIgnoreCssDarkVar: true,
     //
     outputTypePath: `${CUR_DIR}/_output--ts/style--type-2.ts`,
     outputTypeName: 'ITheme2',
+    outputTypeIgnoreCssDarkVar: true,
   }
 ]);

src/genCss.ts

@@ -14,14 +14,14 @@ export const genCss = async (jsKvObj: IJsKvObj, opts?: IJsVarToCssVarOpts) => {
   let CONTENT = '';
 
   for (const k in jsKvObj?.jsKv) {
-    if (!k) return;
+    if (k) {
+      let v = jsKvObj.jsKv[k];
 
-    let v = jsKvObj.jsKv[k];
-
-    // filter less syntax
-    if (typeof v === 'string') v = v.replace('~', '');
+      // filter less syntax
+      if (typeof v === 'string') v = v.replace('~', '');
 
-    CONTENT += `  ${k}: ${v};\n`;
+      CONTENT += `  ${k}: ${v};\n`;
+    }
   }
 
   const CONTENT_CLOSE = `}\n`;
@@ -33,14 +33,14 @@ export const genCss = async (jsKvObj: IJsKvObj, opts?: IJsVarToCssVarOpts) => {
     let SCOPE_DARK = `${opts.outputCssDarkScopeTag} {\n`;
 
     for (const k in jsKvObj?.jsKvDark) {
-      if (!k) return;
+      if (k) {
+        let v = jsKvObj.jsKvDark[k];
 
-      let v = jsKvObj.jsKvDark[k];
-
-      // filter less syntax
-      if (typeof v === 'string') v = v.replace('~', '');
+        // filter less syntax
+        if (typeof v === 'string') v = v.replace('~', '');
 
-      CONTENT_DARK += `  ${k}: ${v};\n`;
+        CONTENT_DARK += `  ${k}: ${v};\n`;
+      }
     }
 
     RESULT += `\n${SCOPE_DARK}${CONTENT_DARK}${CONTENT_CLOSE}`;

src/genLess.ts

@@ -13,13 +13,25 @@ export const genLess = async (jsKvObj: IJsKvObj, opts?: IJsVarToCssVarOpts) => {
     HEADER = `${__CODE_GEN_COMMENT__}\n${opts?.outputLessHeaderImport}\n\n`;
   }
 
-  let CONTENT = '';
+  // clone kv
+  const jsKv = { ...jsKvObj.jsKv };
+
+  // ignoreCssDarkVar
+  if (opts?.outputLessIgnoreCssDarkVar) {
+    for (const k in jsKvObj.jsKvDark) {
+      if (k in jsKv) {
+        delete jsKv[k]
+      }
+    }
+  }
 
-  for (const k in jsKvObj.jsKv) {
-    if (!k) return;
+  let CONTENT = '';
 
-    const v = jsKvObj.jsKv[k];
-    CONTENT += `${k.replace('--', '@')}: ${v};\n`;
+  for (const k in jsKv) {
+    if (k) {
+      const v = jsKvObj.jsKv[k];
+      CONTENT += `${k.replace('--', '@')}: ${v};\n`;
+    }
   }
 
   const FOOTER = ``;

src/genType.ts

@@ -12,10 +12,22 @@ export const genType = async (jsKvObj: IJsKvObj, opts?: IJsVarToCssVarOpts) => {
 
   let CONTENT = `export type ${opts.outputTypeName} =\n`;
 
-  for (const k in jsKvObj.jsKv) {
-    if (!k) return;
+  // clone kv
+  const jsKv = { ...jsKvObj.jsKv };
+
+  // ignoreCssDarkVar
+  if (opts?.outputTypeIgnoreCssDarkVar) {
+    for (const k in jsKvObj.jsKvDark) {
+      if (k in jsKv) {
+        delete jsKv[k]
+      }
+    }
+  }
 
-    CONTENT += `  | '${k}'\n`;
+  for (const k in jsKv) {
+    if (k) {
+      CONTENT += `  | '${k}'\n`;
+    }
   }
 
   const FOOTER = `\n`;

src/jsVarToCssVar.ts

@@ -68,7 +68,7 @@ export function jsVarToCssVar(optsList?: IJsVarToCssVarOpts[]) {
     }
 
     if (opts?.outputCssPath) genCss({ jsKv, jsKvDark }, opts);
-    if (opts?.outputLessPath) genLess({ jsKv }, opts);
-    if (opts?.outputTypePath) genType({ jsKv }, opts);
+    if (opts?.outputLessPath) genLess({ jsKv, jsKvDark }, opts);
+    if (opts?.outputTypePath) genType({ jsKv, jsKvDark }, opts);
   })
 }

src/types.ts

@@ -15,11 +15,13 @@ export interface IJsVarToCssVarOpts {
   outputCssDarkScopeTag?: string; // ':root.dark'
   outputCssDarkVarSuffix?: string; // '--dark'
   //
-  outputLessPath?: string; // `${CUR_DIR}/_output--js/theme.less`    // [Optional]
-  outputLessHeaderImport?: string; // `@import './variables.less';`  // [Optional]
+  outputLessPath?: string; // `${CUR_DIR}/_output--js/theme.less`   // [Optional]
+  outputLessHeaderImport?: string; // `@import './variables.less';` // [Optional]
+  outputLessIgnoreCssDarkVar?: boolean;                             // [Optional]
   //
-  outputTypePath?: string; // `${CUR_DIR}/_output--js/theme.ts`      // [Optional]
-  outputTypeName?: string; // 'ITheme',                              // [Optional]
+  outputTypePath?: string; // `${CUR_DIR}/_output--js/theme.ts`     // [Optional]
+  outputTypeName?: string; // 'ITheme',                             // [Optional]
+  outputTypeIgnoreCssDarkVar?: boolean;                             // [Optional]
   //
 }