From 191c544c67a885458916cf522bf45eaddb8dc3db Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Tue, 3 Sep 2024 18:01:04 +0200
Subject: [PATCH] CSS `theme()`: Add unit test that combines CSS variable
 syntax with opacity modifier (#14323)

This PR adds a new test case to the branches that test the CSS `theme()`
function with the CSS variable syntax. The new case includes an opacity
modifier and ensures that the opacity is properly added.
---
 packages/tailwindcss/src/functions.test.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/tailwindcss/src/functions.test.ts b/packages/tailwindcss/src/functions.test.ts
index e39978152..69cbcec42 100644
--- a/packages/tailwindcss/src/functions.test.ts
+++ b/packages/tailwindcss/src/functions.test.ts
@@ -433,6 +433,28 @@ describe('theme function', () => {
           }"
         `)
       })
+
+      test('theme(--color-red-500 / 50%)', async () => {
+        expect(
+          await compileCss(css`
+            @theme {
+              --color-red-500: #f00;
+            }
+            .red {
+              color: theme(--color-red-500 / 50%);
+            }
+          `),
+        ).toMatchInlineSnapshot(`
+          ":root {
+            --color-red-500: red;
+          }
+
+          .red {
+            color: #ff000080;
+          }"
+        `)
+      })
+
       test('theme("--color-red-500")', async () => {
         expect(
           await compileCss(css`