From 1bdc9069760ee16ba0fd3b6216193d7412a01914 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Sat, 27 Apr 2024 09:28:59 -0700
Subject: [PATCH] Allow hyphen character in regex pattern to use support
 queries as is (#13596)

* Allow hyphen character in regex pattern to use support queries as is

* Update variants.test.ts

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
---
 packages/tailwindcss/src/variants.test.ts | 34 ++++++++++++++++++++++-
 packages/tailwindcss/src/variants.ts      |  2 +-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index de16fa4cae32..92f45c14b6a7 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -1288,7 +1288,15 @@ 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-[(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 +1314,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 ')