feat: Improve error message for pseudo elements followed by selectors

selectors/parser.rs

@@ -206,6 +206,7 @@ pub enum SelectorParseErrorKind<'i> {
   InvalidQualNameInAttr(Token<'i>),
   ExplicitNamespaceUnexpectedToken(Token<'i>),
   ClassNeedsIdent(Token<'i>),
+  UnexpectedSelectorAfterPseudoElement(Token<'i>),
 }
 
 macro_rules! with_all_bounds {
@@ -2141,6 +2142,14 @@ where
     }
 
     if state.intersects(SelectorParsingState::AFTER_PSEUDO) {
+      // Input should be exhausted here.
+      let source_location = input.current_source_location();
+      if let Ok(next) = input.next() {
+        let next = next.clone();
+        return Err(
+          source_location.new_custom_error(SelectorParseErrorKind::UnexpectedSelectorAfterPseudoElement(next)),
+        );
+      }
       break;
     }
 
@@ -2956,6 +2965,7 @@ where
   Impl: SelectorImpl<'i>,
 {
   let start = input.state();
+  let token_location = input.current_source_location();
   let token = match input.next_including_whitespace().map(|t| t.clone()) {
     Ok(t) => t,
     Err(..) => {
@@ -2967,14 +2977,18 @@ where
   Ok(Some(match token {
     Token::IDHash(id) => {
       if state.intersects(SelectorParsingState::AFTER_PSEUDO) {
-        return Err(input.new_custom_error(SelectorParseErrorKind::InvalidState));
+        return Err(token_location.new_custom_error(
+          SelectorParseErrorKind::UnexpectedSelectorAfterPseudoElement(Token::IDHash(id)),
+        ));
       }
       let id = Component::ID(id.into());
       SimpleSelectorParseResult::SimpleSelector(id)
     }
     Token::Delim('.') => {
       if state.intersects(SelectorParsingState::AFTER_PSEUDO) {
-        return Err(input.new_custom_error(SelectorParseErrorKind::InvalidState));
+        return Err(token_location.new_custom_error(
+          SelectorParseErrorKind::UnexpectedSelectorAfterPseudoElement(Token::Delim('.')),
+        ));
       }
       let location = input.current_source_location();
       let class = match *input.next_including_whitespace()? {
@@ -2989,7 +3003,9 @@ where
     }
     Token::SquareBracketBlock => {
       if state.intersects(SelectorParsingState::AFTER_PSEUDO) {
-        return Err(input.new_custom_error(SelectorParseErrorKind::InvalidState));
+        return Err(token_location.new_custom_error(
+          SelectorParseErrorKind::UnexpectedSelectorAfterPseudoElement(Token::SquareBracketBlock),
+        ));
       }
       let attr = input.parse_nested_block(|input| parse_attribute_selector(parser, input))?;
       SimpleSelectorParseResult::SimpleSelector(attr)

src/error.rs

@@ -235,6 +235,11 @@ pub enum SelectorError<'i> {
 
   /// Ambiguous CSS module class.
   AmbiguousCssModuleClass(CowArcStr<'i>),
+
+  /// An unexpected token was encountered after a pseudo element.
+  UnexpectedSelectorAfterPseudoElement(
+    #[cfg_attr(any(feature = "serde", feature = "nodejs"), serde(skip))] Token<'i>,
+  ),
 }
 
 impl<'i> fmt::Display for SelectorError<'i> {
@@ -261,6 +266,12 @@ impl<'i> fmt::Display for SelectorError<'i> {
       UnexpectedTokenInAttributeSelector(token) => write!(f, "Unexpected token in attribute selector: {:?}", token),
       UnsupportedPseudoClassOrElement(name) => write!(f, "Unsupported pseudo class or element: {}", name),
       AmbiguousCssModuleClass(_) => write!(f, "Ambiguous CSS module class not supported"),
+      UnexpectedSelectorAfterPseudoElement(token) => {
+        write!(
+          f,
+          "Pseudo-elements like '::before' or '::after' can't be followed by selectors like '{token:?}'"
+        )
+      },
     }
   }
 }
@@ -302,6 +313,9 @@ impl<'i> From<SelectorParseErrorKind<'i>> for SelectorError<'i> {
       }
       SelectorParseErrorKind::ClassNeedsIdent(t) => SelectorError::ClassNeedsIdent(t.into()),
       SelectorParseErrorKind::AmbiguousCssModuleClass(name) => SelectorError::AmbiguousCssModuleClass(name.into()),
+      SelectorParseErrorKind::UnexpectedSelectorAfterPseudoElement(t) => {
+        SelectorError::UnexpectedSelectorAfterPseudoElement(t.into())
+      }
     }
   }
 }

src/lib.rs

@@ -6900,6 +6900,45 @@ mod tests {
       ".foo /deep/ .bar{width:20px}",
       deep_options.clone(),
     );
+
+    error_test(
+      "input.defaultCheckbox::before h1 {width: 20px}",
+      ParserError::SelectorError(SelectorError::UnexpectedSelectorAfterPseudoElement(Token::Ident(
+        "h1".into(),
+      ))),
+    );
+    error_test(
+      "input.defaultCheckbox::before .my-class {width: 20px}",
+      ParserError::SelectorError(SelectorError::UnexpectedSelectorAfterPseudoElement(Token::Delim('.'))),
+    );
+    error_test(
+      "input.defaultCheckbox::before.my-class {width: 20px}",
+      ParserError::SelectorError(SelectorError::UnexpectedSelectorAfterPseudoElement(Token::Delim('.'))),
+    );
+    error_test(
+      "input.defaultCheckbox::before #id {width: 20px}",
+      ParserError::SelectorError(SelectorError::UnexpectedSelectorAfterPseudoElement(Token::IDHash(
+        "id".into(),
+      ))),
+    );
+    error_test(
+      "input.defaultCheckbox::before#id {width: 20px}",
+      ParserError::SelectorError(SelectorError::UnexpectedSelectorAfterPseudoElement(Token::IDHash(
+        "id".into(),
+      ))),
+    );
+    error_test(
+      "input.defaultCheckbox::before [attr] {width: 20px}",
+      ParserError::SelectorError(SelectorError::UnexpectedSelectorAfterPseudoElement(
+        Token::SquareBracketBlock,
+      )),
+    );
+    error_test(
+      "input.defaultCheckbox::before[attr] {width: 20px}",
+      ParserError::SelectorError(SelectorError::UnexpectedSelectorAfterPseudoElement(
+        Token::SquareBracketBlock,
+      )),
+    );
   }
 
   #[test]