fix(postcss-merge-rules): add some missing known pseudo classes. (#1099)

* Bring back merging of :visited rules https://caniuse.com/css-sel2
* add form validation pseudo-classes https://caniuse.com/form-validation
* add :any link pseudo-class https://caniuse.com/css-any-link
* add :is pseudo-class https://caniuse.com/css-matches-pseudo

packages/postcss-merge-rules/src/__tests__/index.js

@@ -807,3 +807,11 @@ test(
     'a{color : green;} a:focus-visible{ color : green;} a:focus-visible{ background : red}'
   )
 );
+
+test(
+  'should merge :visited and :link pseudo-classes',
+  processCSS(
+    'a,a:link{color:#555}a:visited{color:#555}',
+    'a,a:link,a:visited{color:#555}'
+  )
+);

packages/postcss-merge-rules/src/lib/ensureCompatibility.js

@@ -10,6 +10,7 @@ const cssGencontent = 'css-gencontent';
 const cssFirstLetter = 'css-first-letter';
 const cssFirstLine = 'css-first-line';
 const cssInOutOfRange = 'css-in-out-of-range';
+const formValidation = 'form-validation';
 
 /** @type {string[]} */
 const prefixes = vendors.map((v) => `-${v}-`);
@@ -47,6 +48,7 @@ export function noVendor(selector) {
 export const pseudoElements = {
   ':active': cssSel2,
   ':after': cssGencontent,
+  ':any-link': 'css-any-link',
   ':before': cssGencontent,
   ':checked': cssSel3,
   ':default': 'css-default-pseudo',
@@ -65,9 +67,12 @@ export const pseudoElements = {
   ':hover': cssSel2,
   ':in-range': cssInOutOfRange,
   ':indeterminate': 'css-indeterminate-pseudo',
+  ':invalid': formValidation,
+  ':is': 'css-matches-pseudo',
   ':lang': cssSel2,
   ':last-child': cssSel3,
   ':last-of-type': cssSel3,
+  ':link': cssSel2,
   ':matches': 'css-matches-pseudo',
   ':not': cssSel3,
   ':nth-child': cssSel3,
@@ -79,6 +84,7 @@ export const pseudoElements = {
   ':optional': 'css-optional-pseudo',
   ':out-of-range': cssInOutOfRange,
   ':placeholder-shown': 'css-placeholder-shown',
+  ':required': formValidation,
   ':root': cssSel3,
   ':target': cssSel3,
   '::after': cssGencontent,
@@ -89,6 +95,8 @@ export const pseudoElements = {
   '::marker': 'css-marker-pseudo',
   '::placeholder': 'css-placeholder',
   '::selection': 'css-selection',
+  ':valid': formValidation,
+  ':visited': cssSel2,
 };
 
 function isCssMixin(selector) {