From 6a1fb55c5b3695ca8a5d463ad79d5eef72099375 Mon Sep 17 00:00:00 2001
From: Lei Chen <chenleicoder@foxmail.com>
Date: Thu, 26 May 2022 19:54:14 +0800
Subject: [PATCH] feat: support full css4 logical combination (#2684)

---
 lib/parser.js                    |  5 ++++-
 test/cases/selectors.pseudo.css  | 29 +++++++++++++++++++++++++++++
 test/cases/selectors.pseudo.styl | 20 ++++++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/lib/parser.js b/lib/parser.js
index 7ba67a6be..89e3b2654 100644
--- a/lib/parser.js
+++ b/lib/parser.js
@@ -66,8 +66,11 @@ var selectorTokens = [
  */
 
 var pseudoSelectors = [
+  // https://www.w3.org/TR/selectors-4/#logical-combination
   // Logical Combinations
-    'matches'
+    'is'
+  , 'has'
+  , 'where'
   , 'not'
 
   // Linguistic Pseudo-classes
diff --git a/test/cases/selectors.pseudo.css b/test/cases/selectors.pseudo.css
index 66188e825..387e67088 100644
--- a/test/cases/selectors.pseudo.css
+++ b/test/cases/selectors.pseudo.css
@@ -94,3 +94,32 @@ label input:blank,
 label span {
   color: #014;
 }
+:is(header,
+main,
+footer) p:hover {
+  color: #f00;
+  cursor: pointer;
+}
+:where(header,
+main,
+footer) p:hover {
+  color: #f00;
+  cursor: pointer;
+}
+a:where(:not(:hover)) {
+  text-decoration: none;
+}
+a:has(> img) {
+  color: #f00;
+}
+input {
+  color: #a7a7a7;
+}
+input:not(:last-child) {
+  color: #000;
+}
+@media (min-width: 0px) {
+  div :not(.icon) {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/test/cases/selectors.pseudo.styl b/test/cases/selectors.pseudo.styl
index 0a655fe3c..0b49b8c51 100644
--- a/test/cases/selectors.pseudo.styl
+++ b/test/cases/selectors.pseudo.styl
@@ -83,3 +83,23 @@ label
   input:blank
   span
     color #014
+
+:is(header, main, footer) p:hover
+  color: red;
+  cursor: pointer;
+:where(header, main, footer) p:hover
+  color: red
+  cursor: pointer
+a:where(:not(:hover))
+  text-decoration: none
+a:has(> img)
+  color: red
+
+input
+  color #a7a7a7
+  &:not(:last-child)
+    color #000
+
+@media (min-width: 0px)
+  div :not(.icon)
+    display: none