From c75499748cf16f480109820786f36d46ffb23b53 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Sat, 27 Apr 2024 02:46:55 -0700
Subject: [PATCH 1/2] Allow hyphen character in regex pattern to use support
 queries as is

---
 packages/tailwindcss/src/variants.test.ts | 35 ++++++++++++++++++++++-
 packages/tailwindcss/src/variants.ts      |  2 +-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index de16fa4cae32..46aef9e70292 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -1288,7 +1288,16 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti
 
 test('supports', () => {
   expect(
-    run(['supports-gap:grid', 'supports-[display:grid]:flex', 'supports-[selector(A_>_B)]:flex']),
+    run([
+      'supports-gap:grid',
+      'supports-[display:grid]:flex',
+      'supports-[selector(A_>_B)]:flex',
+      'supports-[font-format(opentype)]:grid',
+      'supports-[content:"("]:grid',
+      'supports-[(display:grid)_and_font-format(opentype)]:grid',
+      'supports-[font-tech(color-COLRv1)]:flex',
+      'supports-[--test]:flex',
+    ]),
   ).toMatchInlineSnapshot(`
     "@supports (gap: var(--tw)) {
       .supports-gap\\:grid {
@@ -1306,6 +1315,30 @@ test('supports', () => {
       .supports-\\[selector\\(A_\\>_B\\)\\]\\:flex {
         display: flex;
       }
+    }
+
+    @supports font-format(opentype) {
+      .supports-\\[font-format\\(opentype\\)\\]\\:grid {
+        display: grid;
+      }
+    }
+
+    @supports (display: grid) and font-format(opentype) {
+      .supports-\\[\\(display\\:grid\\)_and_font-format\\(opentype\\)\\]\\:grid {
+        display: grid;
+      }
+    }
+
+    @supports font-tech(color-COLRv1) {
+      .supports-\\[font-tech\\(color-COLRv1\\)\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @supports (--test: var(--tw)) {
+      .supports-\\[--test\\]\\:flex {
+        display: flex;
+      }
     }"
   `)
 })
diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
index 25a37c9489af..cac92a2cdb9e 100644
--- a/packages/tailwindcss/src/variants.ts
+++ b/packages/tailwindcss/src/variants.ts
@@ -384,7 +384,7 @@ export function createVariants(theme: Theme): Variants {
       // When `supports-[...]:flex` is used, with `not()`, `and()` or
       // `selector()`, then we know that want to use this directly as the
       // supports condition as-is.
-      if (/^\w*\s*\(/.test(value)) {
+      if (/^[\w-]*\s*\(/.test(value)) {
         // Chrome has a bug where `(condition1)or(condition2)` is not valid, but
         // `(condition1) or (condition2)` is supported.
         let query = value.replace(/\b(and|or|not)\b/g, ' $1 ')

From 17e5428e0a89d76eb9c0c8899cb8a891fb80e74e Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sat, 27 Apr 2024 12:25:04 -0400
Subject: [PATCH 2/2] Update variants.test.ts

---
 packages/tailwindcss/src/variants.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index 46aef9e70292..92f45c14b6a7 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -1293,7 +1293,6 @@ test('supports', () => {
       'supports-[display:grid]:flex',
       'supports-[selector(A_>_B)]:flex',
       'supports-[font-format(opentype)]:grid',
-      'supports-[content:"("]:grid',
       'supports-[(display:grid)_and_font-format(opentype)]:grid',
       'supports-[font-tech(color-COLRv1)]:flex',
       'supports-[--test]:flex',