Jelajahi Sumber

chore: backup

DaiQiangReal 3 tahun lalu
induk
melakukan
182506bf8f

+ 5 - 2
packages/semi-scss-to-css-var/package.json

@@ -23,14 +23,17 @@
   "scripts": {
     "start": "ts-node ./src/bin.ts ../semi-foundation",
     "build:lib": "rimraf lib && tsc",
-    "prepublishOnly": "npm run build:lib"
+    "prepublishOnly": "npm run build:lib",
+    "compileTestScss": "ts-node ./test/runSass.ts"
   },
   "dependencies": {
     "arg": "^5.0.1",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.21",
     "postcss": "^8.4.8",
-    "postcss-scss": "^4.0.3"
+    "postcss-scss": "^4.0.3",
+    "postcss-value-parser": "^4.2.0",
+    "sass": "^1.49.9"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.176",

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

@@ -1,4 +1,21 @@
 import {AcceptedPlugin, Declaration, Postcss, Root} from "postcss";
+import fs from 'fs-extra';
+import parse from 'postcss-value-parser'
+
+
+
+
+
+const replaceWithCalc=(str:string)=>{
+
+};
+
+
+
+
+
+
+
 
 const transVarPlugin=()=>{
 
@@ -12,7 +29,12 @@ const transVarPlugin=()=>{
           //  console.log(root)
         },
         Declaration(decl:Declaration){
-            console.log(decl.variable,decl.prop,decl.value);
+            console.log(decl.value)
+            let valueRoot=parseSides(decl.value);
+            console.log(valueRoot)
+            console.log('-----')
+            // fs.writeFileSync('./test.json',JSON.stringify(valueRoot,null,'    '),{encoding:'utf-8'})
+            // console.log(parse(decl.value));
         },
     } as AcceptedPlugin
 }

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

@@ -0,0 +1,80 @@
+
+
+const valueParser = () => {
+    const mergeArrayItem = (array: string[], start: number, end: number) => {
+        let newArray = [];
+        newArray.push(...array.slice(0, start));
+        newArray.push(array.slice(start, end + 1).join(' '));
+        newArray.push(...array.slice(end + 1));
+        return newArray;
+    }
+
+    const stringReplace = (str: string, start: number, end: number, replaceStr: string) => {
+        return str.slice(0, start) + replaceStr + str.slice(end + 1);
+    }
+
+    const replaceWithCalc = (str: string): string => {
+
+        const codeGroup = []
+        const splitWithSpace = str.split(' ');
+
+        const mergeBracket = (str: string) => {
+            const stack: string[] = [];
+            for (let i = 0; i < str.length; i++) {
+                const char = str[i];
+                if (char === '(') {
+                    stack.push('(');
+                } else if (char === ')') {
+                    let tempStr='';
+                    while(true){
+                        const topChar=stack[stack.length-1];
+                        if(topChar!=='('){
+                            tempStr+=stack.pop();
+                        }else{
+                            stack.pop();
+                            stack.push(...replaceWithCalc(tempStr.split('').reverse().join('')).split(''))
+                            break;
+                        }
+                    }
+                }else{
+                    stack.push(char);
+                }
+            }
+            return `calc[${stack.join('')}]`;
+        }
+
+
+        const isStrInfluenceLeft=(str:string)=>{
+            const trimmed=str.trim();
+            return ['+','-','*','/'].includes(trimmed[0]);
+        }
+
+        const isStrInfluenceRight=(str:string)=>{
+            const trimmed=str.trim();
+            return ['+','-','*','/'].includes(trimmed[trimmed.length-1]);
+        }
+
+        let i=0;
+        while (i<splitWithSpace.length){
+            const start=splitWithSpace[i];
+            if(start.includes('$')){
+                let j=i+1;
+                while (j<splitWithSpace.length){
+                    const afterEnd=splitWithSpace[j];
+                    if(afterEnd.includes('$'))
+                    j++;
+                }
+
+            }
+        }
+
+        return mergeBracket(str)
+
+
+    };
+
+    console.log(replaceWithCalc(`xxxxx xxx $a - ($b + ($x + $y)+ $c)`))
+}
+
+valueParser()
+

+ 46 - 0
packages/semi-scss-to-css-var/test.json

@@ -0,0 +1,46 @@
+{
+    "nodes": [
+        {
+            "type": "word",
+            "sourceIndex": 0,
+            "sourceEndIndex": 3,
+            "value": "1px"
+        },
+        {
+            "type": "space",
+            "sourceIndex": 3,
+            "sourceEndIndex": 4,
+            "value": " "
+        },
+        {
+            "type": "word",
+            "sourceIndex": 4,
+            "sourceEndIndex": 7,
+            "value": "2px"
+        },
+        {
+            "type": "space",
+            "sourceIndex": 7,
+            "sourceEndIndex": 8,
+            "value": " "
+        },
+        {
+            "type": "word",
+            "sourceIndex": 8,
+            "sourceEndIndex": 11,
+            "value": "2px"
+        },
+        {
+            "type": "space",
+            "sourceIndex": 11,
+            "sourceEndIndex": 12,
+            "value": " "
+        },
+        {
+            "type": "word",
+            "sourceIndex": 12,
+            "sourceEndIndex": 15,
+            "value": "4px"
+        }
+    ]
+}

+ 6 - 0
packages/semi-scss-to-css-var/test/runSass.ts

@@ -0,0 +1,6 @@
+import sass from 'sass';
+import fs from 'fs-extra';
+// OR
+
+const result = sass.compile("./test/test.scss");
+fs.writeFileSync("./test/test.css",result.css,{encoding:'utf-8'});

+ 7 - 0
packages/semi-scss-to-css-var/test/test.css

@@ -0,0 +1,7 @@
+.test {
+  --semi-margin-primary_cssvar:5px;
+  --semi-margin-sec_cssvar:15px;
+}
+.test .sss {
+  margin-left: var(--semi-margin-primary_cssvar)var(--semi-margin-sec_cssvar);
+}

+ 27 - 3
packages/semi-scss-to-css-var/test/test.scss

@@ -1,7 +1,31 @@
-$semi-margin-primary:5px;
-$semi-margin-sec:15px;
+$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: $semi-margin-primary + $semi-margin-sec;
+    margin: 1px 2px 3px $semi-margin-primary + $semi-margin-sec;
   }
 }
+
+
+
+
+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))
+
+
+
+
+
+
+