Add support for ::details-content and ::target-text (#930)

Author: philipp-spiess

scripts/build-prefixes.js

@@ -332,6 +332,8 @@ let mdnFeatures = {
   accentSystemColor: mdn.css.types.color['system-color'].accentcolor_accentcolortext.__compat.support,
   animationTimelineShorthand: mdn.css.properties.animation['animation-timeline_included'].__compat.support,
   viewTransition: mdn.css.selectors['view-transition'].__compat.support,
+  detailsContent: mdn.css.selectors['details-content'].__compat.support,
+  targetText: mdn.css.selectors['target-text'].__compat.support,
 };
 
 for (let key in mdn.css.types.length) {

selectors/parser.rs

@@ -3929,6 +3929,9 @@ pub mod tests {
     assert!(parse("foo:where()").is_err());
     assert!(parse("foo:where(div, foo, .bar baz)").is_ok());
     assert!(parse("foo:where(::before)").is_err());
+
+    assert!(parse("foo::details-content").is_ok());
+    assert!(parse("foo::target-text").is_ok());
   }
 
   #[test]

src/compat.rs

@@ -42,6 +42,7 @@ pub enum Feature {
   DecimalLeadingZeroListStyleType,
   DecimalListStyleType,
   DefaultPseudo,
+  DetailsContent,
   DevanagariListStyleType,
   Dialog,
   DirSelector,
@@ -191,6 +192,7 @@ pub enum Feature {
   StringListStyleType,
   SymbolsListStyleType,
   TamilListStyleType,
+  TargetText,
   TeluguListStyleType,
   TextDecorationThicknessPercent,
   TextDecorationThicknessShorthand,
@@ -3505,6 +3507,86 @@ impl Feature {
           return false;
         }
       }
+      Feature::DetailsContent => {
+        if let Some(version) = browsers.chrome {
+          if version < 8585216 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version < 8585216 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.opera {
+          if version < 5701632 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.safari {
+          if version < 1180672 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.ios_saf {
+          if version < 1180672 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version < 8585216 {
+            return false;
+          }
+        }
+        if browsers.firefox.is_some() || browsers.ie.is_some() || browsers.samsung.is_some() {
+          return false;
+        }
+      }
+      Feature::TargetText => {
+        if let Some(version) = browsers.chrome {
+          if version < 5832704 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version < 5832704 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.firefox {
+          if version < 8585216 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.opera {
+          if version < 4128768 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.safari {
+          if version < 1180160 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.ios_saf {
+          if version < 1180160 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.samsung {
+          if version < 983040 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version < 5832704 {
+            return false;
+          }
+        }
+        if browsers.ie.is_some() {
+          return false;
+        }
+      }
       Feature::QUnit => {
         if let Some(version) = browsers.chrome {
           if version < 4128768 {

src/selector.rs

@@ -267,6 +267,8 @@ impl<'a, 'o, 'i> parcel_selectors::parser::Parser<'i> for SelectorParser<'a, 'o,
       "after" => After,
       "first-line" => FirstLine,
       "first-letter" => FirstLetter,
+      "details-content" => DetailsContent,
+      "target-text" => TargetText,
       "cue" => Cue,
       "cue-region" => CueRegion,
       "selection" => Selection(VendorPrefix::None),
@@ -887,6 +889,10 @@ pub enum PseudoElement<'i> {
   FirstLine,
   /// The [::first-letter](https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo) pseudo element.
   FirstLetter,
+  /// The [::details-content](https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo)
+  DetailsContent,
+  /// The [::target-text](https://drafts.csswg.org/css-pseudo-4/#selectordef-target-text)
+  TargetText,
   /// The [::selection](https://drafts.csswg.org/css-pseudo-4/#selectordef-selection) pseudo element.
   #[cfg_attr(feature = "serde", serde(with = "PrefixWrapper"))]
   Selection(VendorPrefix),
@@ -1139,6 +1145,8 @@ where
     Before => dest.write_str(":before"),
     FirstLine => dest.write_str(":first-line"),
     FirstLetter => dest.write_str(":first-letter"),
+    DetailsContent => dest.write_str("::details-content"),
+    TargetText => dest.write_str("::target-text"),
     Marker => dest.write_str("::marker"),
     Selection(prefix) => write_prefixed!(prefix, "selection"),
     Cue => dest.write_str("::cue"),
@@ -1903,6 +1911,8 @@ pub(crate) fn is_compatible(selectors: &[Selector], targets: Targets) -> bool {
           PseudoElement::After | PseudoElement::Before => Feature::Gencontent,
           PseudoElement::FirstLine => Feature::FirstLine,
           PseudoElement::FirstLetter => Feature::FirstLetter,
+          PseudoElement::DetailsContent => Feature::DetailsContent,
+          PseudoElement::TargetText => Feature::TargetText,
           PseudoElement::Selection(prefix) if *prefix == VendorPrefix::None => Feature::Selection,
           PseudoElement::Placeholder(prefix) if *prefix == VendorPrefix::None => Feature::Placeholder,
           PseudoElement::Marker => Feature::MarkerPseudo,