Improve(CSS): Make CSS variable syntax support color tokens, resolved #…

…276
master-co · Sep 20, 2023 · 5fa9fa5 · 5fa9fa5
1 parent 2e97d64
commit 5fa9fa5
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 84 deletions.
diff --git a/packages/css/src/config/functions.ts b/packages/css/src/config/functions.ts
@@ -61,7 +61,7 @@ const functions: Functions = {
                                     + (functionConfig.name ?? newFunctionName)
                                     + '('
                                     // @ts-ignore
-                                    + (functionConfig.transform?.(functionValue) ?? functionValue)
+                                    + (functionConfig.transform?.call(instance, functionValue) ?? functionValue)
                                     + ')'
                             }
                         }

diff --git a/packages/css/src/config/rules.ts b/packages/css/src/config/rules.ts
@@ -1,6 +1,7 @@
 import cssEscape from 'shared/utils/css-escape'
 import { START_SYMBOLS } from '../constants/start-symbol'
 import { Declarations, Rule, RuleConfig } from '../rule'
+import { transformColorWithOpacity } from '../functions/transform-color-with-opacity'
 
 const defaultRules = {
     group: {
@@ -145,6 +146,20 @@ const defaultRules = {
     } as RuleConfig,
     variable: {
         match: '^\\$[^ (){}A-Z]+:[^ ]', // don't use 'rem' as default, because css variable is common API
+        transform(value) {
+            const regexp = new RegExp(`^((?:${this.css.colorNames.join('|')})(?:-(?:[0-9A-Za-z-]+))?)(?:\\/(\\.?[0-9]+%?))?(?:@(.*?))?$`, 'm')
+            const result = regexp.exec(value)
+            if (result) {
+                const [, colorName, opacityStr, themeName] = result
+                const color = this.css.colorThemesMap[colorName]?.[themeName || '']
+                if (color)
+                    return (opacityStr
+                        ? transformColorWithOpacity(color, opacityStr)
+                        : color)
+            }
+
+            return value
+        },
         declare(value) {
             return {
                 ['--' + this.prefix.slice(1, -1)]: value

diff --git a/packages/css/src/functions/transform-color-with-opacity.ts b/packages/css/src/functions/transform-color-with-opacity.ts
@@ -0,0 +1,11 @@
+export function transformColorWithOpacity(color: string, opacityStr: string) {
+    let opacity = opacityStr.endsWith('%')
+        ? parseFloat(opacityStr) / 100.0
+        : +opacityStr
+
+    opacity = isNaN(opacity)
+        ? 1
+        : Math.min(Math.max(opacity, 0), 1)
+
+    return color + Math.round(opacity * 255).toString(16).toUpperCase().padStart(2, '0')
+}
diff --git a/packages/css/src/rule.ts b/packages/css/src/rule.ts
@@ -3,6 +3,7 @@ import type { MasterCSS } from './core'
 import { START_SYMBOLS } from './constants/start-symbol'
 import cssEscape from 'shared/utils/css-escape'
 import { extend } from '@techor/extend'
+import { transformColorWithOpacity } from './functions/transform-color-with-opacity'
 
 const defaultConfig: RuleConfig = {
     unit: '',
@@ -620,20 +621,9 @@ export class Rule {
                                                 anyColorMatched = anyMatched
                                             }
 
-                                            let newValue = color
-                                            if (opacityStr) {
-                                                let opacity = opacityStr.endsWith('%')
-                                                    ? parseFloat(opacityStr) / 100.0
-                                                    : +opacityStr
-
-                                                opacity = isNaN(opacity)
-                                                    ? 1
-                                                    : Math.min(Math.max(opacity, 0), 1)
-
-                                                newValue += Math.round(opacity * 255).toString(16).toUpperCase().padStart(2, '0')
-                                            }
-
-                                            return prefix + newValue
+                                            return prefix + (opacityStr
+                                                ? transformColorWithOpacity(color, opacityStr)
+                                                : color)
                                         } else {
                                             anyColorMismatched = true
                                         }

diff --git a/packages/css/src/utils/parse-rule-value.ts b/packages/css/src/utils/parse-rule-value.ts
diff --git a/packages/css/tests/functions.test.ts b/packages/css/tests/functions.test.ts
@@ -20,4 +20,9 @@ test('functions', () => {
     testCSS('mt:calc($(g-y)*(-.1))', '.mt\\:calc\\(\\$\\(g-y\\)\\*\\(-\\.1\\)\\){margin-top:calc(var(--g-y) * (-0.00625rem))}')
     testCSS('mt:calc($(g-y)--.1)', '.mt\\:calc\\(\\$\\(g-y\\)--\\.1\\){margin-top:calc(var(--g-y) - -0.00625rem)}')
     testCSS('mr:calc($(g-x)/(-2px))', '.mr\\:calc\\(\\$\\(g-x\\)\\/\\(-2px\\)\\){margin-right:calc(var(--g-x) / (-2px))}')
+
+    testCSS('$primary:red', '.\\$primary\\:red{--primary:#d11a1e}')
+    testCSS('$primary:red-80', '.\\$primary\\:red-80{--primary:#fdcfcf}')
+    testCSS('$primary:red/.5', '.\\$primary\\:red\\/\\.5{--primary:#d11a1e80}')
+    testCSS('$primary:red-80/.5', '.\\$primary\\:red-80\\/\\.5{--primary:#fdcfcf80}')
 })