From 27aa8d6a0f9eb3981d8921c2b1ab10bc89852e9e Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Tue, 24 Sep 2024 20:37:02 +0200
Subject: [PATCH] Add `user-valid` and `user-invalid` variants

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
---
 .../__snapshots__/intellisense.test.ts.snap   | 20 +++++++++++
 packages/tailwindcss/src/variants.test.ts     | 36 +++++++++++++++++++
 packages/tailwindcss/src/variants.ts          |  2 ++
 3 files changed, 58 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 28b443d2491a..89b8ffbf56c5 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -3884,6 +3884,8 @@ exports[`getVariants 1`] = `
       "required",
       "valid",
       "invalid",
+      "user-valid",
+      "user-invalid",
       "in-range",
       "out-of-range",
       "read-only",
@@ -3936,6 +3938,8 @@ exports[`getVariants 1`] = `
       "required",
       "valid",
       "invalid",
+      "user-valid",
+      "user-invalid",
       "in-range",
       "out-of-range",
       "read-only",
@@ -4162,6 +4166,20 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
+  {
+    "hasDash": true,
+    "isArbitrary": false,
+    "name": "user-valid",
+    "selectors": [Function],
+    "values": [],
+  },
+  {
+    "hasDash": true,
+    "isArbitrary": false,
+    "name": "user-invalid",
+    "selectors": [Function],
+    "values": [],
+  },
   {
     "hasDash": true,
     "isArbitrary": false,
@@ -4275,6 +4293,8 @@ exports[`getVariants 1`] = `
       "required",
       "valid",
       "invalid",
+      "user-valid",
+      "user-invalid",
       "in-range",
       "out-of-range",
       "read-only",
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index f43945f890fd..14669230dac2 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -490,6 +490,42 @@ test('invalid', async () => {
   expect(await run(['invalid/foo:flex'])).toEqual('')
 })
 
+test('user-valid', async () => {
+  expect(await run(['user-valid:flex', 'group-user-valid:flex', 'peer-user-valid:flex']))
+    .toMatchInlineSnapshot(`
+    ".group-user-valid\\:flex:is(:where(.group):user-valid *) {
+      display: flex;
+    }
+
+    .peer-user-valid\\:flex:is(:where(.peer):user-valid ~ *) {
+      display: flex;
+    }
+
+    .user-valid\\:flex:user-valid {
+      display: flex;
+    }"
+  `)
+  expect(await run(['user-valid/foo:flex'])).toEqual('')
+})
+
+test('user-invalid', async () => {
+  expect(await run(['user-invalid:flex', 'group-user-invalid:flex', 'peer-user-invalid:flex']))
+    .toMatchInlineSnapshot(`
+    ".group-user-invalid\\:flex:is(:where(.group):user-invalid *) {
+      display: flex;
+    }
+
+    .peer-user-invalid\\:flex:is(:where(.peer):user-invalid ~ *) {
+      display: flex;
+    }
+
+    .user-invalid\\:flex:user-invalid {
+      display: flex;
+    }"
+  `)
+  expect(await run(['invalid/foo:flex'])).toEqual('')
+})
+
 test('in-range', async () => {
   expect(await run(['in-range:flex', 'group-in-range:flex', 'peer-in-range:flex']))
     .toMatchInlineSnapshot(`
diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
index 968f8d7a16d5..018edc9ac1f0 100644
--- a/packages/tailwindcss/src/variants.ts
+++ b/packages/tailwindcss/src/variants.ts
@@ -438,6 +438,8 @@ export function createVariants(theme: Theme): Variants {
   staticVariant('required', ['&:required'])
   staticVariant('valid', ['&:valid'])
   staticVariant('invalid', ['&:invalid'])
+  staticVariant('user-valid', ['&:user-valid'])
+  staticVariant('user-invalid', ['&:user-invalid'])
   staticVariant('in-range', ['&:in-range'])
   staticVariant('out-of-range', ['&:out-of-range'])
   staticVariant('read-only', ['&:read-only'])