Support pseudo classes on ::-webkit-scrollbar pseudo elements

Fixes parcel-bundler#122

Author: devongovett

selectors/parser.rs

@@ -36,6 +36,10 @@ pub trait PseudoElement<'i>: Sized + ToCss {
     fn valid_after_slotted(&self) -> bool {
         false
     }
+
+    fn is_webkit_scrollbar(&self) -> bool {
+        false
+    }
 }
 
 /// A trait that represents a pseudo-class.
@@ -51,6 +55,10 @@ pub trait NonTSPseudoClass<'i>: Sized + ToCss {
     /// https://drafts.csswg.org/selectors-4/#useraction-pseudos
     fn is_user_action_state(&self) -> bool;
 
+    fn is_webkit_scrollbar_state(&self) -> bool {
+        false
+    }
+
     fn visit<V>(&self, _visitor: &mut V) -> bool
     where
         V: SelectorVisitor<'i, Impl = Self::Impl>,
@@ -73,7 +81,7 @@ fn to_ascii_lowercase<'i>(s: CowRcStr<'i>) -> CowRcStr<'i> {
 
 bitflags! {
     /// Flags that indicate at which point of parsing a selector are we.
-    struct SelectorParsingState: u8 {
+    struct SelectorParsingState: u16 {
         /// Whether we should avoid adding default namespaces to selectors that
         /// aren't type or universal selectors.
         const SKIP_DEFAULT_NAMESPACE = 1 << 0;
@@ -112,6 +120,8 @@ bitflags! {
 
         /// Whether we have seen a nesting selector.
         const AFTER_NESTING = 1 << 7;
+
+        const AFTER_WEBKIT_SCROLLBAR = 1 << 8;
     }
 }
 
@@ -168,6 +178,9 @@ pub enum SelectorParseErrorKind<'i> {
     NonPseudoElementAfterSlotted,
     InvalidPseudoElementAfterSlotted,
     InvalidPseudoElementInsideWhere,
+    InvalidPseudoClassBeforeWebKitScrollbar,
+    InvalidPseudoClassAfterWebKitScrollbar,
+    InvalidPseudoClassAfterPseudoElement,
     InvalidState,
     MissingNestingSelector,
     MissingNestingPrefix,
@@ -2354,6 +2367,9 @@ where
                 if !p.accepts_state_pseudo_classes() {
                     state.insert(SelectorParsingState::AFTER_NON_STATEFUL_PSEUDO_ELEMENT);
                 }
+                if p.is_webkit_scrollbar() {
+                    state.insert(SelectorParsingState::AFTER_WEBKIT_SCROLLBAR);
+                }
                 builder.push_combinator(Combinator::PseudoElement);
                 builder.push_simple_selector(Component::PseudoElement(p));
             },
@@ -2651,10 +2667,16 @@ where
     }
 
     let pseudo_class = P::parse_non_ts_pseudo_class(parser, location, name)?;
-    if state.intersects(SelectorParsingState::AFTER_PSEUDO_ELEMENT) &&
-        !pseudo_class.is_user_action_state()
-    {
-        return Err(location.new_custom_error(SelectorParseErrorKind::InvalidState));
+    if state.intersects(SelectorParsingState::AFTER_WEBKIT_SCROLLBAR) {
+        if !pseudo_class.is_webkit_scrollbar_state() {
+            return Err(location.new_custom_error(SelectorParseErrorKind::InvalidPseudoClassAfterWebKitScrollbar));
+        }
+    } else if state.intersects(SelectorParsingState::AFTER_PSEUDO_ELEMENT) {
+        if !pseudo_class.is_user_action_state() {
+            return Err(location.new_custom_error(SelectorParseErrorKind::InvalidPseudoClassAfterPseudoElement));
+        }
+    } else if pseudo_class.is_webkit_scrollbar_state() {
+        return Err(location.new_custom_error(SelectorParseErrorKind::InvalidPseudoClassBeforeWebKitScrollbar));
     }
     Ok(Component::NonTSPseudoClass(pseudo_class))
 }

src/error.rs

@@ -114,6 +114,9 @@ pub enum SelectorError<'i> {
   NonPseudoElementAfterSlotted,
   InvalidPseudoElementAfterSlotted,
   InvalidPseudoElementInsideWhere,
+  InvalidPseudoClassBeforeWebKitScrollbar,
+  InvalidPseudoClassAfterWebKitScrollbar,
+  InvalidPseudoClassAfterPseudoElement,
   InvalidState,
   MissingNestingSelector,
   MissingNestingPrefix,
@@ -141,6 +144,9 @@ impl<'i> From<SelectorParseErrorKind<'i>> for SelectorError<'i> {
       SelectorParseErrorKind::NonPseudoElementAfterSlotted => SelectorError::NonPseudoElementAfterSlotted,
       SelectorParseErrorKind::InvalidPseudoElementAfterSlotted => SelectorError::InvalidPseudoElementAfterSlotted,
       SelectorParseErrorKind::InvalidPseudoElementInsideWhere => SelectorError::InvalidPseudoElementInsideWhere,
+      SelectorParseErrorKind::InvalidPseudoClassBeforeWebKitScrollbar => SelectorError::InvalidPseudoClassBeforeWebKitScrollbar,
+      SelectorParseErrorKind::InvalidPseudoClassAfterWebKitScrollbar => SelectorError::InvalidPseudoClassAfterWebKitScrollbar,
+      SelectorParseErrorKind::InvalidPseudoClassAfterPseudoElement => SelectorError::InvalidPseudoClassAfterPseudoElement,  
       SelectorParseErrorKind::InvalidState => SelectorError::InvalidState,
       SelectorParseErrorKind::MissingNestingSelector => SelectorError::MissingNestingSelector,
       SelectorParseErrorKind::MissingNestingPrefix => SelectorError::MissingNestingPrefix,
@@ -179,6 +185,9 @@ impl<'i> SelectorError<'i> {
       InvalidQualNameInAttr(token) => format!("Invalid qualified name in attribute selector: {:?}", token),
       ExplicitNamespaceUnexpectedToken(token) => format!("Unexpected token in namespace selector: {:?}", token),
       ClassNeedsIdent(token) => format!("Expected identifier in class selector, got {:?}", token),
+      InvalidPseudoClassBeforeWebKitScrollbar => "Pseudo class must be prefixed by a ::-webkit-scrollbar pseudo element".into(),
+      InvalidPseudoClassAfterWebKitScrollbar => "Invalid pseudo class after ::-webkit-scrollbar pseudo element".into(),
+      InvalidPseudoClassAfterPseudoElement => "Invalid pseudo class after pseudo element. Only user action pseudo classes (e.g. :hover, :active) are allowed.".into(),
       err => format!("Error parsing selector: {:?}", err)
     }
   }

src/lib.rs

@@ -23,7 +23,7 @@ mod context;
 #[cfg(test)]
 mod tests {
   use crate::dependencies::Dependency;
-  use crate::error::{Error, MinifyErrorKind, ErrorLocation, ParserError, PrinterErrorKind};
+  use crate::error::{Error, MinifyErrorKind, ErrorLocation, ParserError, PrinterErrorKind, SelectorError};
   use crate::properties::custom::Token;
   use crate::rules::CssRule;
   use crate::stylesheet::*;
@@ -3683,6 +3683,20 @@ mod tests {
     minify_test(".x:has(.bar, #foo) {}", ".x:has(.bar,#foo){}");
     minify_test(".x:has(span + span) {}", ".x:has(span+span){}");
     minify_test("a:has(:visited) {}", "a:has(:visited){}");
+    for element in ["-webkit-scrollbar", "-webkit-scrollbar-button", "-webkit-scrollbar-track", "-webkit-scrollbar-track-piece", "-webkit-scrollbar-thumb", "-webkit-scrollbar-corner", "-webkit-resizer"] {
+      for class in ["horizontal", "vertical", "decrement", "increment", "start", "end", "double-button", "single-button", "no-button", "corner-present", "window-inactive"] {
+        minify_test(&format!("::{}:{} {{}}", element, class), &format!("::{}:{}{{}}", element, class));
+      }
+    }
+    for class in ["horizontal", "vertical", "decrement", "increment", "start", "end", "double-button", "single-button", "no-button", "corner-present", "window-inactive"] {
+      error_test(&format!(":{} {{}}", class), ParserError::SelectorError(SelectorError::InvalidPseudoClassBeforeWebKitScrollbar));
+    }
+    for element in ["-webkit-scrollbar", "-webkit-scrollbar-button", "-webkit-scrollbar-track", "-webkit-scrollbar-track-piece", "-webkit-scrollbar-thumb", "-webkit-scrollbar-corner", "-webkit-resizer"] {
+      error_test(&format!("::{}:hover {{}}", element), ParserError::SelectorError(SelectorError::InvalidPseudoClassAfterWebKitScrollbar));
+    }
+
+    error_test("a::first-letter:last-child {}", ParserError::SelectorError(SelectorError::InvalidPseudoClassAfterPseudoElement));
+    minify_test("a:last-child::first-letter {}", "a:last-child:first-letter{}");
 
     prefix_test(
       ".test:not(.foo, .bar) {}",

src/selector.rs

@@ -159,6 +159,19 @@ impl<'a, 'i> parcel_selectors::parser::Parser<'i> for SelectorParser<'a, 'i> {
         "-webkit-autofill" => Autofill(VendorPrefix::WebKit),
         "-o-autofill" => Autofill(VendorPrefix::O),
 
+        // https://webkit.org/blog/363/styling-scrollbars/
+        "horizontal" => WebKitScrollbar(WebKitScrollbarPseudoClass::Horizontal),
+        "vertical" => WebKitScrollbar(WebKitScrollbarPseudoClass::Vertical),
+        "decrement" => WebKitScrollbar(WebKitScrollbarPseudoClass::Decrement),
+        "increment" => WebKitScrollbar(WebKitScrollbarPseudoClass::Increment),
+        "start" => WebKitScrollbar(WebKitScrollbarPseudoClass::Start),
+        "end" => WebKitScrollbar(WebKitScrollbarPseudoClass::End),
+        "double-button" => WebKitScrollbar(WebKitScrollbarPseudoClass::DoubleButton),
+        "single-button" => WebKitScrollbar(WebKitScrollbarPseudoClass::SingleButton),
+        "no-button" => WebKitScrollbar(WebKitScrollbarPseudoClass::NoButton),
+        "corner-present" => WebKitScrollbar(WebKitScrollbarPseudoClass::CornerPresent),
+        "window-inactive" => WebKitScrollbar(WebKitScrollbarPseudoClass::WindowInactive),
+
         _ => Custom(name.into())
       };
 
@@ -205,6 +218,15 @@ impl<'a, 'i> parcel_selectors::parser::Parser<'i> for SelectorParser<'a, 'i> {
       "file-selector-button" => FileSelectorButton(VendorPrefix::None),
       "-webkit-file-upload-button" => FileSelectorButton(VendorPrefix::WebKit),
       "-ms-browse" => FileSelectorButton(VendorPrefix::Ms),
+
+      "-webkit-scrollbar" => WebKitScrollbar(WebKitScrollbarPseudoElement::Scrollbar),
+      "-webkit-scrollbar-button" => WebKitScrollbar(WebKitScrollbarPseudoElement::Button),
+      "-webkit-scrollbar-track" => WebKitScrollbar(WebKitScrollbarPseudoElement::Track),
+      "-webkit-scrollbar-track-piece" => WebKitScrollbar(WebKitScrollbarPseudoElement::TrackPiece),
+      "-webkit-scrollbar-thumb" => WebKitScrollbar(WebKitScrollbarPseudoElement::Thumb),
+      "-webkit-scrollbar-corner" => WebKitScrollbar(WebKitScrollbarPseudoElement::Corner),
+      "-webkit-resizer" => WebKitScrollbar(WebKitScrollbarPseudoElement::Resizer),
+
       _ => Custom(name.into())
     };
 
@@ -313,18 +335,41 @@ pub enum PseudoClass<'i> {
   Local(Box<parcel_selectors::parser::Selector<'i, Selectors>>),
   Global(Box<parcel_selectors::parser::Selector<'i, Selectors>>),
 
+  // https://webkit.org/blog/363/styling-scrollbars/
+  WebKitScrollbar(WebKitScrollbarPseudoClass),
+
   Custom(CowArcStr<'i>)
 }
 
+/// https://webkit.org/blog/363/styling-scrollbars/
+#[derive(Clone, Eq, PartialEq)]
+pub enum WebKitScrollbarPseudoClass {
+  Horizontal,
+  Vertical,
+  Decrement,
+  Increment,
+  Start,
+  End,
+  DoubleButton,
+  SingleButton,
+  NoButton,
+  CornerPresent,
+  WindowInactive
+}
+
 impl<'i> parcel_selectors::parser::NonTSPseudoClass<'i> for PseudoClass<'i> {
   type Impl = Selectors;
 
   fn is_active_or_hover(&self) -> bool {
-      matches!(*self, PseudoClass::Active | PseudoClass::Hover)
+    matches!(*self, PseudoClass::Active | PseudoClass::Hover)
   }
 
   fn is_user_action_state(&self) -> bool {
-      matches!(*self, PseudoClass::Active | PseudoClass::Hover | PseudoClass::Focus)
+    matches!(*self, PseudoClass::Active | PseudoClass::Hover | PseudoClass::Focus)
+  }
+
+  fn is_webkit_scrollbar_state(&self) -> bool {
+    matches!(*self, PseudoClass::WebKitScrollbar(..))
   }
 }
 
@@ -461,6 +506,24 @@ impl<'a, 'i> ToCssWithContext<'a, 'i> for PseudoClass<'i> {
           Ok(())
         },
 
+        // https://webkit.org/blog/363/styling-scrollbars/
+        WebKitScrollbar(s) => {
+          use WebKitScrollbarPseudoClass::*;
+          dest.write_str(match s {
+            Horizontal => ":horizontal",
+            Vertical => ":vertical",
+            Decrement => ":decrement",
+            Increment => ":increment",
+            Start => ":start",
+            End => ":end",
+            DoubleButton => ":double-button",
+            SingleButton => ":single-button",
+            NoButton => ":no-button",
+            CornerPresent => ":corner-present",
+            WindowInactive => ":window-inactive"
+          })
+        },
+
         Lang(_) | Dir(_) => unreachable!(),
         Custom(val) => {
           dest.write_char(':')?;
@@ -526,9 +589,28 @@ pub enum PseudoElement<'i> {
   Marker,
   Backdrop(VendorPrefix),
   FileSelectorButton(VendorPrefix),
+  WebKitScrollbar(WebKitScrollbarPseudoElement),
   Custom(CowArcStr<'i>)
 }
 
+#[derive(PartialEq, Eq, Clone, Debug, Hash)]
+pub enum WebKitScrollbarPseudoElement {
+  /// ::-webkit-scrollbar
+  Scrollbar,
+  /// ::-webkit-scrollbar-button
+  Button,
+  /// ::-webkit-scrollbar-track
+  Track,
+  /// ::-webkit-scrollbar-track-piece
+  TrackPiece,
+  /// ::-webkit-scrollbar-thumb
+  Thumb,
+  /// ::-webkit-scrollbar-corner
+  Corner,
+  /// ::-webkit-resizer
+  Resizer
+}
+
 impl<'i> cssparser::ToCss for PseudoElement<'i> {
   fn to_css<W>(&self, _: &mut W)-> std::fmt::Result where W: fmt::Write {
     unreachable!();
@@ -589,6 +671,18 @@ impl<'i> ToCss for PseudoElement<'i> {
           dest.write_str("file-selector-button")
         }
       }
+      WebKitScrollbar(s) => {
+        use WebKitScrollbarPseudoElement::*;
+        dest.write_str(match s {
+          Scrollbar => "::-webkit-scrollbar",
+          Button => "::-webkit-scrollbar-button",
+          Track => "::-webkit-scrollbar-track",
+          TrackPiece => "::-webkit-scrollbar-track-piece",
+          Thumb => "::-webkit-scrollbar-thumb",
+          Corner => "::-webkit-scrollbar-corner",
+          Resizer => "::-webkit-resizer"
+        })
+      }
       Custom(val) => {
         dest.write_str("::")?;
         return dest.write_str(val)
@@ -618,6 +712,10 @@ impl<'i> parcel_selectors::parser::PseudoElement<'i> for PseudoElement<'i> {
       PseudoElement::FileSelectorButton(_)
     )
   }
+
+  fn is_webkit_scrollbar(&self) -> bool {
+    matches!(*self, PseudoElement::WebKitScrollbar(..))
+  }
 }
 
 impl<'i> PseudoElement<'i> {