feat: support full css4 logical combination (#2684)

stylus · May 26, 2022 · 6a1fb55 · 6a1fb55
1 parent 2bf86ff
commit 6a1fb55
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git 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
@@ -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;
+  }
+}
diff --git 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