Add user-valid and user-invalid variants

Co-authored-by: Robin Malfait <[email protected]>
tailwindlabs · Sep 24, 2024 · 7bd0851 · 7bd0851
1 parent c094fad
commit 7bd0851
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git 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
@@ -490,6 +490,41 @@ 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
@@ -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'])