feat: add css var define

chore:backup

chore:backup

chore:backup

packages/semi-scss-to-css-var/src/index.ts

@@ -44,31 +44,38 @@ const getAllScssFilesInPath = (filePath: string) => {
         }
     });
     return scssFilePaths;
-}
+};
 
 
-const prepareTransDir = (sourcePath: string) => {
-    const tempDirPath = path.join(os.tmpdir(), `semi_scss_to_css_vars_${Math.random().toString(36).slice(-6)}`);
-    fs.copySync(sourcePath, tempDirPath);
-    return tempDirPath;
-}
+// const prepareTransDir = (sourcePath: string) => {
+//     const tempDirPath = path.join(os.tmpdir(), `semi_scss_to_css_vars_${Math.random().toString(36).slice(-6)}`);
+//     fs.copySync(sourcePath, tempDirPath);
+//     return tempDirPath;
+// }
 
 
-const transScssToCSSVar=(scssFilePath:string)=>{
-    let test='./test/test.scss'
-    const raw=fs.readFileSync(test,{encoding:'utf-8'});
-    const result=postcss([transVarPlugin()]).process(raw, {syntax: postcssScss});
-    const aaa = result.css;
-    console.log('result ---------------------------')
-    console.log(aaa)
-}
+const transScssToCSSVar=(scssFilePathList:string[])=>{
+
+    for (const scssFilePath of scssFilePathList){
+        try {
+            const raw=fs.readFileSync(scssFilePath,{ encoding:'utf-8' });
+            const result=postcss([transVarPlugin()]).process(raw, { syntax: postcssScss });
+            fs.writeFileSync(scssFilePath,result.css,"utf8");
+        } catch (e){
+            console.error(e);
+            console.error(`Error While processing ${scssFilePath}`);
+        }
+
+    }
+
+};
 
 
-const transScssVariables2CssVariables = ({sourcePath, resultPath}: Options) => {
+const transScssVariables2CssVariables = ({ sourcePath, resultPath }: Options) => {
 
-    const transDir = prepareTransDir(sourcePath);
+    const transDir = sourcePath;
     const scssFileList = getAllScssFilesInPath(transDir);
-    transScssToCSSVar(scssFileList[0])
+    transScssToCSSVar(scssFileList);
     return scssFileList;
 };
 

packages/semi-scss-to-css-var/src/transVarPlugin/index.ts

@@ -3,18 +3,18 @@ import fs from 'fs-extra';
 import parse from 'postcss-value-parser';
 import replaceWithCalc from "../utils/replaceWithCalc";
 import replaceOther from "../utils/replaceOther";
+import { trimStart } from "lodash";
 
 
 
-
-
-
-
+//
+// let extraScss="";
 
 
 const transVarPlugin=()=>{
 
 
+
     return {
         postcssPlugin:"semi-scss-to-css-var-plugin",
         Root(root:Root,postcss:Postcss){
@@ -25,7 +25,6 @@ const transVarPlugin=()=>{
         },
         Declaration(decl:Declaration){
 
-            console.log(decl.value);
 
             //@ts-ignore
             if (!decl.isVisited){
@@ -33,16 +32,23 @@ const transVarPlugin=()=>{
                 value = replaceOther(value);
                 value = replaceWithCalc(value);
                 decl.value=value;
+
+
+                //inject css variable define
+                if (/\$[\w\d]+$/.test(decl.prop)){
+                    const scssVariable=trimStart(decl.prop,'$');
+                    const cssVariable =`--semi-css-${scssVariable}`;
+                    const cssDeclaration=new Declaration({ prop:cssVariable,value:decl.value });
+                    //@ts-ignore
+                    cssDeclaration.isVisited=true;
+                    decl.after(cssDeclaration);
+                    decl.value=`var(${cssVariable})`;
+                }
                 //@ts-ignore
                 decl.isVisited=true;
             }
 
-            // console.log(decl.value)
-            // let valueRoot=parse(decl.value);
-            // console.log(JSON.stringify(valueRoot,null,'    '))
-            // console.log('-----')
-            // fs.writeFileSync('./test.json',JSON.stringify(valueRoot,null,'    '),{encoding:'utf-8'})
-            // console.log(parse(decl.value));
+
         },
     } as AcceptedPlugin;
 };

packages/semi-scss-to-css-var/src/transVarPlugin/valueParser.ts

@@ -1,7 +0,0 @@
-import {trimEnd, trimStart} from "lodash";
-
-const valueParser = (str:string)=>{
-
-}
-
-

packages/semi-scss-to-css-var/test/test.scss

@@ -1,40 +1 @@
-//$semi-margin-primary:var(--semi-margin-primary_cssvar);
-//$semi-margin-sec:var(--semi-margin-sec_cssvar);
-//
-//.test{
-//  --semi-margin-primary_cssvar:5px;
-//  --semi-margin-sec_cssvar:15px;
-//  .sss{
-//    margin: xxxxx rgba(1,1,1,1) xxx cubic-bezier(calc($a - ( $b + ( $x + $y ) + ( $x + $y) - $c)) $z,1,calc( 1 + $z ),1);
-//  }
-//}
-
-//
-//
-//
-//xxxxx xxx $a + $b
-//
-//xxxxx xxx $a + 1 + $b
-//
-//xxxxx  xxx  $a + $b + 1 xxxxx  $c + $6
-//
-//
-//xxxxx xxx $a - ($b + ($x + $y)+ $c)
-//
-//xxxxx xxx  (1 + $a - (1 + $c))
-//
-
-
-$a:1px;
-$b:2px;
-$c:3px;
-$d:4px;
-
-.body{
-  border:  $a - (-$b + ($c + $d)+ $c); //test
-}
-
-
-
-
-
+$a  :1px;