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>
tailwindlabs · Apr 27, 2024 · 1bdc906 · 1bdc906
1 parent 07d977e
commit 1bdc906
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -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 ')