Introduce :user-valid & :user-invalid variants

See https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid and https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid

Author: MartijnCuppens

src/corePlugins.js

@@ -118,6 +118,8 @@ export let variantPlugins = {
       'required',
       'valid',
       'invalid',
+      'user-valid',
+      'user-invalid',
       'in-range',
       'out-of-range',
       'read-only',

tests/variants.test.css

@@ -206,6 +206,8 @@
 .required\:flex:required,
 .valid\:flex:valid,
 .invalid\:flex:invalid,
+.user-valid\:flex:user-valid,
+.user-invalid\:flex:user-invalid,
 .in-range\:flex:in-range,
 .out-of-range\:flex:out-of-range,
 .read-only\:flex:read-only,
@@ -258,6 +260,8 @@
 .group:required .group-required\:flex,
 .group:valid .group-valid\:flex,
 .group:invalid .group-invalid\:flex,
+.group:user-valid .group-user-valid\:flex,
+.group:user-invalid .group-user-invalid\:flex,
 .group:in-range .group-in-range\:flex,
 .group:out-of-range .group-out-of-range\:flex,
 .group:read-only .group-read-only\:flex,
@@ -305,6 +309,8 @@
 .peer:required ~ .peer-required\:flex,
 .peer:valid ~ .peer-valid\:flex,
 .peer:invalid ~ .peer-invalid\:flex,
+.peer:user-valid ~ .peer-user-valid\:flex,
+.peer:user-invalid ~ .peer-user-invalid\:flex,
 .peer:in-range ~ .peer-in-range\:flex,
 .peer:out-of-range ~ .peer-out-of-range\:flex,
 .peer:read-only ~ .peer-read-only\:flex,

tests/variants.test.html

@@ -26,6 +26,8 @@
 <div class="required:flex"></div>
 <div class="valid:flex"></div>
 <div class="invalid:flex"></div>
+<div class="user-valid:flex"></div>
+<div class="user-invalid:flex"></div>
 <div class="in-range:flex"></div>
 <div class="out-of-range:flex"></div>
 <div class="read-only:flex"></div>
@@ -72,6 +74,8 @@
 <div class="group-required:flex"></div>
 <div class="group-valid:flex"></div>
 <div class="group-invalid:flex"></div>
+<div class="group-user-valid:flex"></div>
+<div class="group-user-invalid:flex"></div>
 <div class="group-in-range:flex"></div>
 <div class="group-out-of-range:flex"></div>
 <div class="group-read-only:flex"></div>
@@ -105,6 +109,8 @@
 <div class="peer-required:flex"></div>
 <div class="peer-valid:flex"></div>
 <div class="peer-invalid:flex"></div>
+<div class="peer-user-valid:flex"></div>
+<div class="peer-user-invalid:flex"></div>
 <div class="peer-in-range:flex"></div>
 <div class="peer-out-of-range:flex"></div>
 <div class="peer-read-only:flex"></div>