From 41b96f68d7272c4cadceab84ccb57f7e7684578c Mon Sep 17 00:00:00 2001
From: 1aron <i@aron.tw>
Date: Mon, 6 Nov 2023 17:09:04 +0800
Subject: [PATCH] Update tests

---
 packages/css/src/config/functions.ts          |  3 +-
 .../css/tests/config/variables/color.test.ts  |  7 ++
 .../css/tests/config/variables/number.test.ts | 22 ++++++
 packages/css/tests/config/variables/test.ts   | 78 +++++++------------
 packages/css/tests/variables.test.ts          |  1 -
 5 files changed, 58 insertions(+), 53 deletions(-)
 create mode 100644 packages/css/tests/config/variables/color.test.ts

diff --git a/packages/css/src/config/functions.ts b/packages/css/src/config/functions.ts
index db3d6467c..c63861262 100644
--- a/packages/css/src/config/functions.ts
+++ b/packages/css/src/config/functions.ts
@@ -3,9 +3,10 @@ import type { Rule } from '../rule'
 
 const functions = {
     $: {
+        colored: true,
         transform(value) {
             return [{ type: 'variable', name: value }]
-        }
+        },
     },
     calc: {
         transform(value, bypassVariableNames) {
diff --git a/packages/css/tests/config/variables/color.test.ts b/packages/css/tests/config/variables/color.test.ts
new file mode 100644
index 000000000..d26c6bcbd
--- /dev/null
+++ b/packages/css/tests/config/variables/color.test.ts
@@ -0,0 +1,7 @@
+import { testProp } from '../../css'
+
+test('with fallback color', () => {
+    testProp('background-color:$(primary,white/.1)', 'background:var(rgb(0 0 0),rgb(255 255 255/.1))', {
+        variables: { primary: '#000000' }
+    })
+})
\ No newline at end of file
diff --git a/packages/css/tests/config/variables/number.test.ts b/packages/css/tests/config/variables/number.test.ts
index 9e92736d3..a8db2bba8 100644
--- a/packages/css/tests/config/variables/number.test.ts
+++ b/packages/css/tests/config/variables/number.test.ts
@@ -89,3 +89,25 @@ test('number with themes using variable function', () => {
         }
     })
 })
+
+test('variables', () => {
+    testCSS('m:$(spacing-x1)', '.m\\:\\$\\(spacing-x1\\){margin:1rem}', {
+        variables: {
+            spacing: { x1: 16, x2: 32 },
+        }
+    })
+})
+
+test('negative variables', () => {
+    testCSS('m:$(-spacing-x1)', '.m\\:\\$\\(-spacing-x1\\){margin:-1rem}', {
+        variables: {
+            spacing: { x1: 16, x2: 32 }
+        }
+    })
+
+    testCSS('w:-11x', '.w\\:-11x{width:-3.75rem}', {
+        variables: {
+            width: { '11x': 60 }
+        }
+    })
+})
\ No newline at end of file
diff --git a/packages/css/tests/config/variables/test.ts b/packages/css/tests/config/variables/test.ts
index 1111601f7..466fc6e5a 100644
--- a/packages/css/tests/config/variables/test.ts
+++ b/packages/css/tests/config/variables/test.ts
@@ -1,58 +1,34 @@
 import { testCSS } from '../../css'
 import config from '../../config'
 
-// it('uses with $ function', () => {
-//     testCSS('font-weight:$(fontWeight-thin)', '.font-weight\\:\\$\\(fontWeight-thin\\){font-weight:100}')
-// })
-
-// test('variables', () => {
-//     testCSS('m:$(spacing-x1)', '.m\\:\\$\\(spacing-x1\\){margin:1rem}', {
-//         variables: {
-//             spacing: { x1: 16, x2: 32 },
-//         }
-//     })
-// })
+it('uses with $ function', () => {
+    testCSS('font-weight:$(fontWeight-thin)', '.font-weight\\:\\$\\(fontWeight-thin\\){font-weight:100}')
+})
 
-test('negative variables', () => {
-    testCSS('m:$(-spacing-x1)', '.m\\:\\$\\(-spacing-x1\\){margin:-1rem}', {
+test('rule variables', () => {
+    testCSS('font:sm', '.font\\:sm{font-size:1rem}', config)
+    testCSS('font-size:sm', '.font-size\\:sm{font-size:1rem}', config)
+    testCSS('ls:wide', '.ls\\:wide{letter-spacing:0.025em}', config)
+    testCSS('letter-spacing:wide', '.letter-spacing\\:wide{letter-spacing:0.025em}', config)
+    testCSS('shadow:x2', '.shadow\\:x2{box-shadow:0rem 25px 50px -12px rgb(0 0 0 / 25%)}', config)
+    testCSS('inset:sm|md|md|sm', '.inset\\:sm\\|md\\|md\\|sm{inset:0.625rem 1.25rem 1.25rem 0.625rem}', config)
+    testCSS('b:inputborder', '.b\\:inputborder{border:0.125rem solid rgb(209 26 30)}', config)
+    testCSS('content:delimiter', '.content\\:delimiter{content:"123"}', {
         variables: {
-            spacing: { x1: 16, x2: 32 }
+            content: { delimiter: '"123"' }
         }
     })
-})
-
-// test('rule variables', () => {
-//     testCSS('font:sm', '.font\\:sm{font-size:1rem}', config)
-//     testCSS('font-size:sm', '.font-size\\:sm{font-size:1rem}', config)
-//     testCSS('ls:wide', '.ls\\:wide{letter-spacing:0.025em}', config)
-//     testCSS('letter-spacing:wide', '.letter-spacing\\:wide{letter-spacing:0.025em}', config)
-//     testCSS('shadow:x2', '.shadow\\:x2{box-shadow:0rem 25px 50px -12px rgb(0 0 0 / 25%)}', config)
-//     testCSS('inset:sm|md|md|sm', '.inset\\:sm\\|md\\|md\\|sm{inset:0.625rem 1.25rem 1.25rem 0.625rem}', config)
-//     testCSS('b:inputborder', '.b\\:inputborder{border:0.125rem solid rgb(209 26 30)}', config)
-//     testCSS('content:delimiter', '.content\\:delimiter{content:"123"}', {
-//         variables: {
-//             content: { delimiter: '"123"' }
-//         }
-//     })
-//     testCSS('content:delimiter', '.content\\:delimiter{content:"|"}', {
-//         variables: {
-//             content: { delimiter: '"|"' }
-//         }
-//     })
-//     testCSS('b:input', '.b\\:input{border:0.0625rem solid rgb(0 0 0)}', {
-//         variables: {
-//             border: {
-//                 input: '1|solid|test-70'
-//             },
-//             test: { 70: '#000' }
-//         }
-//     })
-// })
-
-// it('negative variables', () => {
-//     testCSS('w:-11x', '.w\\:-11x{width:-3.75rem}', {
-//         variables: {
-//             width: { '11x': 60 }
-//         }
-//     })
-// })
\ No newline at end of file
+    testCSS('content:delimiter', '.content\\:delimiter{content:"|"}', {
+        variables: {
+            content: { delimiter: '"|"' }
+        }
+    })
+    testCSS('b:input', '.b\\:input{border:0.0625rem solid rgb(0 0 0)}', {
+        variables: {
+            border: {
+                input: '1|solid|test-70'
+            },
+            test: { 70: '#000' }
+        }
+    })
+})
\ No newline at end of file
diff --git a/packages/css/tests/variables.test.ts b/packages/css/tests/variables.test.ts
index d539cae47..5cd77a530 100644
--- a/packages/css/tests/variables.test.ts
+++ b/packages/css/tests/variables.test.ts
@@ -4,7 +4,6 @@
 
 import puppeteer, { Browser, ElementHandle, Page } from 'puppeteer-core'
 import path from 'path'
-import type { MasterCSS } from '../src'
 
 const variables = {
     first: {