add user-valid and user-invalid variants

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
tailwindlabs · Apr 17, 2024 · 9784aaa · 9784aaa
1 parent cc8c069
commit 9784aaa
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -1867,6 +1867,8 @@ exports[`getVariants 1`] = `
       "required",
       "valid",
       "invalid",
+      "user-valid",
+      "user-invalid",
       "in-range",
       "out-of-range",
       "read-only",
@@ -1914,6 +1916,8 @@ exports[`getVariants 1`] = `
       "required",
       "valid",
       "invalid",
+      "user-valid",
+      "user-invalid",
       "in-range",
       "out-of-range",
       "read-only",
@@ -2135,6 +2139,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,
@@ -2241,6 +2259,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
@@ -418,6 +418,42 @@ test('valid', () => {
   `)
 })
 
+test('user-valid', () => {
+  expect(
+    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;
+    }"
+  `)
+})
+
+test('user-invalid', () => {
+  expect(
+    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;
+    }"
+  `)
+})
+
 test('invalid', () => {
   expect(run(['invalid:flex', 'group-invalid:flex', 'peer-invalid:flex'])).toMatchInlineSnapshot(`
     ".group-invalid\\:flex:is(:where(.group):invalid *) {

diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
@@ -304,6 +304,8 @@ export function createVariants(theme: Theme): Variants {
     ['required', '&:required'],
     ['valid', '&:valid'],
     ['invalid', '&:invalid'],
+    ['user-valid', '&:user-valid'],
+    ['user-invalid', '&:user-invalid'],
     ['in-range', '&:in-range'],
     ['out-of-range', '&:out-of-range'],
     ['read-only', '&:read-only'],