feat(transformer-directives): support default value for theme function (#4787)

lyonbot · web-flow · commit 4e7e7fd34e4b · 2025-07-01T05:35:47.000Z
diff --git a/packages-presets/transformer-directives/src/functions.ts b/packages-presets/transformer-directives/src/functions.ts
@@ -8,14 +8,25 @@ export async function handleFunction({ code, uno, options }: TransformerDirectiv
 
   switch (node.name) {
     case 'theme': {
-      if (node.children.size !== 1)
+      if (!node.children.size)
         throw new Error('theme() expect exact one argument')
 
       if (node.children.first!.type !== 'String')
         throw new Error('theme() expect a string argument')
 
+      let defaultValueLoc: [number, number] | undefined
+      if (node.children.size > 1) {
+        const remains = node.children.toArray().slice(1)
+        if (!(remains[0].type === 'Operator' && remains[0].value === ','))
+          throw new Error('theme() expect a comma between expression string and default value')
+        if (remains.length > 1)
+          defaultValueLoc = [remains[1].loc!.start.offset, node.children.last!.loc!.end.offset]
+      }
+
       const themeStr = node.children.first.value
-      const value = transformThemeString(themeStr, uno.config.theme, throwOnMissing)
+      let value = transformThemeString(themeStr, uno.config.theme, !defaultValueLoc && throwOnMissing)
+      if (!value && defaultValueLoc)
+        value = code.slice(defaultValueLoc[0], defaultValueLoc[1])
       if (value)
         code.overwrite(node.loc!.start.offset, node.loc!.end.offset, value)
 
diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts
@@ -1508,6 +1508,28 @@ describe('wind4', () => {
         `)
     })
 
+    it('theme() with defaults', async () => {
+      const result = await transform(
+        `.btn {
+          color: theme('not.exists.color', #fff);
+          font-family: theme('not.exists.font', 'ui-sans-serif', 'system-ui');
+        }`,
+      )
+
+      await expect(result)
+        .toMatchInlineSnapshot(`
+          ".btn {
+            color: #fff;
+            font-family: "ui-sans-serif", "system-ui";
+          }
+          "
+        `)
+
+      await expect(transform(`.foo { color: theme('not.exists' ) }`)).rejects.toThrow()
+      await expect(transform(`.foo { color: theme('not.exists', ) }`)).rejects.toThrow()
+      await expect(transform(`.foo { color: theme('not.exists' #fff) }`)).rejects.toThrow('comma')
+    })
+
     it('border opacity', async () => {
       const result = await transform(
         `.btn {
