Improve: Make $(variable) have a fallback mechanism

master-co · Nov 7, 2023 · 9da7d35 · 9da7d35
1 parent 2bb34d9
commit 9da7d35
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/packages/css/src/config/functions.ts b/packages/css/src/config/functions.ts
@@ -1,12 +1,21 @@
-import type { Config, ConfigFunction } from './'
+import type { ConfigFunction } from './'
 import type { Rule } from '../rule'
 
 const functions = {
     $: {
         colored: true,
         transform(value) {
-            return [{ type: 'variable', name: value }]
-        },
+            let name: string
+            let fallback: string
+            const firstCommaIndex = value.indexOf(',')
+            if (firstCommaIndex !== -1) {
+                name = value.slice(0, firstCommaIndex)
+                fallback = value.slice(firstCommaIndex + 1)
+            } else {
+                name = value
+            }
+            return [{ type: 'variable', name, fallback }]
+        }
     },
     calc: {
         transform(value, bypassVariableNames) {

diff --git a/packages/css/src/rule.ts b/packages/css/src/rule.ts
@@ -576,7 +576,7 @@ export class Rule {
                                 break
                         }
                     } else {
-                        currentValue += 'var(--' + eachValueComponent.name + ')'
+                        currentValue += `var(--${eachValueComponent.name}${(eachValueComponent.fallback ? ',' + eachValueComponent.fallback : '')})`
                     }
                     break
                 case 'separator':
@@ -623,7 +623,7 @@ export class Rule {
         const parse = () => {
             if (currentValue) {
                 let handled = false
-                if (!isVarFunction) {
+                if (!isVarFunction || currentValueComponents.length) {
                     const handleVariable = (variableName: string, alpha?: string) => {
                         const variable = Object.prototype.hasOwnProperty.call(this.options.resolvedVariables, variableName)
                             ? this.options.resolvedVariables[variableName]
@@ -800,7 +800,7 @@ export type ValueComponent =
 export interface StringValueComponent { token?: string, type: 'string', value: string }
 export interface NumericValueComponent { token?: string, type: 'number', value: number, unit?: string }
 export interface FunctionValueComponent { token?: string, type: 'function', name: string, symbol: string, childrens: ValueComponent[] }
-export interface VariableValueComponent { token?: string, type: 'variable', name: string, alpha?: string }
+export interface VariableValueComponent { token?: string, type: 'variable', name: string, alpha?: string, fallback?: string }
 export interface SeparatorValueComponent { type: 'separator', value: string, prefix?: string, suffix?: string }
 
 export interface Rule {

diff --git a/packages/css/tests/config/variables/test.ts b/packages/css/tests/config/variables/test.ts
@@ -1,8 +1,24 @@
-import { testCSS } from '../../css'
+import { testCSS, testProp } from '../../css'
 import config from '../../config'
 
 it('uses with $ function', () => {
-    testCSS('font-weight:$(fontWeight-thin)', '.font-weight\\:\\$\\(fontWeight-thin\\){font-weight:100}')
+    testProp('font-weight:$(fontWeight-thin)', 'font-weight:100')
+    testProp('font-weight:$(fontWeight-thin,123)', 'font-weight:100')
+    testProp('font-weight:$(fontWeight,fontWeight-thin)', 'font-weight:var(--fontWeight,100)')
+    testProp('background-color:$(gray)', 'background-color:rgb(107 106 109)')
+    testProp('background-color:$(my-gray,$(gray))', 'background-color:var(--my-gray,rgb(107 106 109))')
+    testProp('background-color:$(my-gray,gray)', 'background-color:var(--my-gray,rgb(107 106 109))')
+    testProp('background-color:$(my-gray,$(my-gray-2,gray))', 'background-color:var(--my-gray,var(--my-gray-2,rgb(107 106 109)))')
+})
+
+it('uses with var function', () => {
+    testProp('font-weight:var(--fontWeight-thin)', 'font-weight:var(--fontWeight-thin)')
+    testProp('font-weight:var(--fontWeight-thin,123)', 'font-weight:var(--fontWeight-thin,123)')
+    testProp('font-weight:var(--fontWeight,fontWeight-thin)', 'font-weight:var(--fontWeight,100)')
+    testProp('background-color:var(--gray)', 'background-color:var(--gray)')
+    testProp('background-color:var(--my-gray,$(gray))', 'background-color:var(--my-gray,rgb(107 106 109))')
+    testProp('background-color:var(--my-gray,gray)', 'background-color:var(--my-gray,rgb(107 106 109))')
+    testProp('background-color:var(--my-gray,$(my-gray-2,gray))', 'background-color:var(--my-gray,var(--my-gray-2,rgb(107 106 109)))')
 })
 
 test('rule variables', () => {