Refactor rule and core

master-co · Nov 2, 2023 · 2f89996 · 2f89996
1 parent c855971
commit 2f89996
Show file tree

Hide file tree

Showing 8 changed files with 690 additions and 689 deletions.
diff --git a/packages/css/.eslintrc.yml b/packages/css/.eslintrc.yml
@@ -1,2 +1,4 @@
 extends:
     - techor
+rules:
+    no-unsafe-declaration-merging: off
diff --git a/packages/css/src/config/functions.ts b/packages/css/src/config/functions.ts
@@ -1,8 +1,9 @@
+import type { Config, ConfigFunction } from './'
 import type { Rule } from '../rule'
 
 const functions = {
     $: {
-        transform(opening, value, closing) {
+        transform(value) {
             const variable = Object.prototype.hasOwnProperty.call(this.options.resolvedNormalVariables, value)
                 ? this.options.resolvedNormalVariables[value]
                 : (this.colored && Object.prototype.hasOwnProperty.call(this.options.resolvedColorVariables, value))
@@ -35,45 +36,35 @@ const functions = {
         }
     },
     calc: {
-        transform(opening, value, closing) {
-            const valueNodes: Rule['valueNodes'] = []
+        transform(value, bypassVariableNames) {
+            const valueComponents: Rule['valueComponents'] = []
             const functions = this.css.config.functions
-
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
-            const instance = this
-            let i = 0;
-            (function anaylze(currentValueNodes: Rule['valueNodes'], bypassHandlingSeparator: boolean, bypassHandlingUnitForcely: boolean) {
+            let i = 0
+            const anaylze = (currentValueComponents: Rule['valueComponents'], bypassHandlingSeparator: boolean, bypassHandlingUnitForcely: boolean) => {
                 let bypassHandlingUnit = false
                 let current = ''
-                const clear = (separator: string, prefixWhite = false, suffixWhite = false) => {
+                const clear = (separator: string, prefix = '', suffix = '') => {
                     if (current) {
                         if (!bypassHandlingUnit && !bypassHandlingUnitForcely) {
-                            const uv = instance.resolveUnitValue(current, functions.calc.unit)
-                            if (uv) {
-                                current = uv.value + uv.unit
-                            }
+                            currentValueComponents.push(this.parseValueComponent(current, functions.calc.unit))
+                        } else {
+                            currentValueComponents.push(this.parseValueComponent(current))
                         }
-
-                        currentValueNodes.push(current)
-
                         current = ''
                     }
-
                     if (separator) {
-                        if (prefixWhite && value[i - 1] === ' ') {
-                            prefixWhite = false
+                        if (prefix && value[i - 1] === ' ') {
+                            prefix = ''
                         }
-                        if (suffixWhite && value[i + 1] === ' ') {
-                            suffixWhite = false
+                        if (suffix && value[i + 1] === ' ') {
+                            suffix = ''
                         }
-
                         if (bypassHandlingSeparator) {
-                            currentValueNodes.push(separator)
+                            currentValueComponents.push({ type: 'separator', value: separator })
                         } else {
-                            currentValueNodes.push({ type: 'separator', value: separator, prefixWhite, suffixWhite })
+                            currentValueComponents.push({ type: 'separator', value: separator, prefix, suffix })
                         }
                     }
-
                     bypassHandlingUnit = false
                 }
 
@@ -82,31 +73,29 @@ const functions = {
                     if (char === '(') {
                         const symbolResult = /^([+-])/.exec(current)
                         if (symbolResult) {
-                            currentValueNodes.push(symbolResult[1])
+                            currentValueComponents.push({ type: 'string', value: symbolResult[1] })
                         }
-
                         const functionName = symbolResult ? current.slice(1) : current
-                        const newValueNode: Rule['valueNodes'][0] = { type: 'function', name: functionName, symbol: char, childrens: [] }
-                        currentValueNodes.push(newValueNode)
+                        const newValueComponent: Rule['valueComponents'][0] = { type: 'function', name: functionName, symbol: char, childrens: [] }
+                        currentValueComponents.push(newValueComponent)
                         current = ''
-
                         i++
-                        const isVarFunction = newValueNode.name === '$' || newValueNode.name === 'var'
+                        const isVarFunction = newValueComponent.name === '$' || newValueComponent.name === 'var'
                         anaylze(
-                            newValueNode.childrens,
+                            newValueComponent.childrens,
                             functionName !== ''
-                                && functionName !== 'calc'
-                                && (
-                                    isVarFunction
-                                    || Object.prototype.hasOwnProperty.call(functions, functionName)
-                                ),
+                            && functionName !== 'calc'
+                            && (
+                                isVarFunction
+                                || Object.prototype.hasOwnProperty.call(functions, functionName)
+                            ),
                             bypassHandlingUnit || isVarFunction
                         )
                     } else if (char === ')') {
                         clear('')
                         break
                     } else if (char === ',') {
-                        clear(char, false, true)
+                        clear(char, '', ' ')
                     } else if (char === ' ') {
                         clear(char)
                     } else {
@@ -116,21 +105,21 @@ const functions = {
                                 if (!current && previousChar !== ')') {
                                     current += char
                                 } else {
-                                    clear(char, true, true)
+                                    clear(char, ' ', ' ')
                                 }
                                 break
                             case '-':
                                 if (!current && previousChar !== ')') {
                                     current += char
                                 } else {
-                                    clear(char, true, true)
+                                    clear(char, ' ', ' ')
                                 }
                                 break
                             case '*':
-                                clear(char, true, true)
+                                clear(char, ' ', ' ')
                                 break
                             case '/':
-                                clear(char, true, true)
+                                clear(char, ' ', ' ')
                                 bypassHandlingUnit = true
                                 break
                             default:
@@ -139,13 +128,12 @@ const functions = {
                         }
                     }
                 }
-
                 clear('')
-            })(valueNodes, false, false)
-
-            return ['calc(', ...valueNodes, ')']
+            }
+            anaylze(valueComponents, false, false)
+            return 'calc(' + this.transformValueComponents(valueComponents, functions.calc.unit ?? this.options.unit, bypassVariableNames) + ')'
         }
-    },
+    } as ConfigFunction,
     translate: { unit: 'rem' },
     translateX: { unit: 'rem' },
     translateY: { unit: 'rem' },

diff --git a/packages/css/src/config/index.ts b/packages/css/src/config/index.ts
@@ -37,6 +37,11 @@ export {
 
 export type ConfigVariable = number | string | Array<number | string>
 export type ConfigVariableGroup = { [key in '' | `@${string}`]?: ConfigVariable } & { [key: string]: ConfigVariable | ConfigVariableGroup }
+export type ConfigFunction = {
+    unit?: string
+    colored?: boolean
+    transform?(this: Rule, value: string): string
+}
 
 export interface Config {
     extends?: (Config | { config: Config })[]
@@ -51,11 +56,7 @@ export interface Config {
     scope?: string
     important?: boolean
     override?: boolean
-    functions?: Record<string, {
-        unit?: string
-        colored?: boolean
-        transform?(this: Rule, opening: string, value: string, closing: string): string | Rule['valueNodes']
-    }>,
+    functions?: Record<string, ConfigFunction>,
     animations?: Record<string, { [key in 'from' | 'to']?: CSSDeclarations } & { [key: string]: CSSDeclarations }>
     themeDriver?: 'class' | 'media' | 'host'
 }