handle theme(colors.red/var(--opacity))

This means that we have to handle 2 cases:
1. Handle the `/` as a separator
2. Stringify the AST node, instead of using the value, because the
   `var(--opacity)` part is a (nested) AST node.

packages/tailwindcss/src/css-functions.test.ts

@@ -136,6 +136,27 @@ describe('theme function', () => {
         `)
       })
 
+      test('theme(colors.red.500/75%)', async () => {
+        expect(
+          await compileCss(css`
+            @theme {
+              --color-red-500: #f00;
+            }
+            .red {
+              color: theme(colors.red.500/75%);
+            }
+          `),
+        ).toMatchInlineSnapshot(`
+          ":root {
+            --color-red-500: red;
+          }
+
+          .red {
+            color: #ff0000bf;
+          }"
+        `)
+      })
+
       test('theme(colors.red.500 / 75%)', async () => {
         expect(
           await compileCss(css`
@@ -178,6 +199,27 @@ describe('theme function', () => {
         `)
       })
 
+      test('theme(colors.red.500/var(--opacity))', async () => {
+        expect(
+          await compileCss(css`
+            @theme {
+              --color-red-500: #f00;
+            }
+            .red {
+              color: theme(colors.red.500/var(--opacity));
+            }
+          `),
+        ).toMatchInlineSnapshot(`
+          ":root {
+            --color-red-500: red;
+          }
+
+          .red {
+            color: color-mix(in srgb, red calc(var(--opacity) * 100%), transparent);
+          }"
+        `)
+      })
+
       test('theme(spacing.12)', async () => {
         expect(
           await compileCss(css`

packages/tailwindcss/src/css-functions.ts

@@ -68,7 +68,7 @@ export function substituteFunctionsInValue(
         if (node.nodes[i].value.includes(',')) {
           break
         }
-        path += node.nodes[i].value
+        path += ValueParser.toCss([node.nodes[i]])
         skipUntilIndex = i + 1
       }
 

packages/tailwindcss/src/value-parser.test.ts

@@ -66,6 +66,20 @@ describe('parse', () => {
     ])
   })
 
+  it('should parse a function with nested arguments separated by `/`', () => {
+    expect(parse('theme(colors.red.500/var(--opacity))')).toEqual([
+      {
+        kind: 'function',
+        value: 'theme',
+        nodes: [
+          { kind: 'word', value: 'colors.red.500' },
+          { kind: 'separator', value: '/' },
+          { kind: 'function', value: 'var', nodes: [{ kind: 'word', value: '--opacity' }] },
+        ],
+      },
+    ])
+  })
+
   it('should handle calculations', () => {
     expect(parse('calc((1 + 2) * 3)')).toEqual([
       {

packages/tailwindcss/src/value-parser.ts

@@ -114,6 +114,7 @@ const SPACE = 0x20
 const LESS_THAN = 0x3c
 const GREATER_THAN = 0x3e
 const EQUALS = 0x3d
+const SLASH = 0x2f
 
 export function parse(input: string) {
   input = input.replaceAll('\r\n', '\n')
@@ -143,6 +144,7 @@ export function parse(input: string) {
       case COLON:
       case COMMA:
       case SPACE:
+      case SLASH:
       case LESS_THAN:
       case GREATER_THAN:
       case EQUALS: {