Supports :target-before/after/current pseudo-class

c/lightningcss.h

@@ -23,6 +23,7 @@ typedef struct ParseOptions {
   const char *filename;
   bool nesting;
   bool custom_media;
+  bool scroll_navigation_controls;
   bool css_modules;
   const char *css_modules_pattern;
   bool css_modules_dashed_idents;

c/src/lib.rs

@@ -77,6 +77,7 @@ pub struct ParseOptions {
   filename: *const c_char,
   nesting: bool,
   custom_media: bool,
+  scroll_navigation_controls: bool,
   css_modules: bool,
   css_modules_pattern: *const c_char,
   css_modules_dashed_idents: bool,
@@ -259,6 +260,10 @@ pub extern "C" fn lightningcss_stylesheet_parse(
   let warnings = Arc::new(RwLock::new(Vec::new()));
   let mut flags = ParserFlags::empty();
   flags.set(ParserFlags::CUSTOM_MEDIA, options.custom_media);
+  flags.set(
+    ParserFlags::SCROLL_NAVIGATION_CONTROLS,
+    options.scroll_navigation_controls,
+  );
   let opts = ParserOptions {
     filename: if options.filename.is_null() {
       String::new()

napi/src/lib.rs

@@ -667,6 +667,8 @@ impl<'a> Into<PseudoClasses<'a>> for &'a OwnedPseudoClasses {
 struct Drafts {
   #[serde(default)]
   custom_media: bool,
+  #[serde(default)]
+  scroll_navigation_controls: bool,
 }
 
 #[derive(Serialize, Debug, Deserialize, Default)]
@@ -699,6 +701,10 @@ fn compile<'i>(
   let res = {
     let mut flags = ParserFlags::empty();
     flags.set(ParserFlags::CUSTOM_MEDIA, matches!(drafts, Some(d) if d.custom_media));
+    flags.set(
+      ParserFlags::SCROLL_NAVIGATION_CONTROLS,
+      matches!(drafts, Some(d) if d.scroll_navigation_controls),
+    );
     flags.set(
       ParserFlags::DEEP_SELECTOR_COMBINATOR,
       matches!(non_standard, Some(v) if v.deep_selector_combinator),
@@ -834,6 +840,10 @@ fn compile_bundle<
     let non_standard = config.non_standard.as_ref();
     let mut flags = ParserFlags::empty();
     flags.set(ParserFlags::CUSTOM_MEDIA, matches!(drafts, Some(d) if d.custom_media));
+    flags.set(
+      ParserFlags::SCROLL_NAVIGATION_CONTROLS,
+      matches!(drafts, Some(d) if d.scroll_navigation_controls),
+    );
     flags.set(
       ParserFlags::DEEP_SELECTOR_COMBINATOR,
       matches!(non_standard, Some(v) if v.deep_selector_combinator),

node/ast.d.ts

@@ -6727,6 +6727,15 @@ export type PseudoClass =
   | {
       kind: "target";
     }
+  | {
+      kind: "target-current";
+    }
+  | {
+      kind: "target-before";
+    }
+  | {
+      kind: "target-after";
+    }
   | {
       kind: "target-within";
     }

node/index.d.ts

@@ -270,6 +270,11 @@ export interface Resolver {
 export interface Drafts {
   /** Whether to enable @custom-media rules. */
   customMedia?: boolean
+  /** 
+   * Whether to enable the scroll navigation controls.
+   * https://drafts.csswg.org/css-overflow-5/#scroll-navigation
+   */
+  scrollNavigationControls?: boolean
 }
 
 export interface NonStandard {

node/test/transform.test.mjs

@@ -29,6 +29,20 @@ test('can enable non-standard syntax', () => {
   assert.equal(res.code.toString(), '.foo>>>.bar{color:red}');
 });
 
+test('can enable scroll navigation controls draft syntax', () => {
+  let res = transform({
+    filename: 'test.css',
+    code: Buffer.from('a:target-current { color: red }'),
+    drafts: {
+      scrollNavigationControls: true
+    },
+    minify: true
+  });
+
+  assert.equal(res.code.toString(), 'a:target-current{color:red}');
+  assert.equal(res.warnings, []);
+});
+
 test('can enable features without targets', () => {
   let res = transform({
     filename: 'test.css',

scripts/build-prefixes.js

@@ -464,6 +464,18 @@ addValue(compat, {
   ios_saf: parseVersion('10.3')
 }, 'LangSelectorList');
 
+addValue(compat, {
+  chrome: parseVersion('135'),
+  edge: parseVersion('135'),
+  android: parseVersion('135')
+}, 'TargetCurrent');
+
+addValue(compat, {
+  chrome: parseVersion('142'),
+  edge: parseVersion('142'),
+  android: parseVersion('142')
+}, 'TargetBeforeAfter');
+
 let prefixMapping = {
   webkit: 'WebKit',
   moz: 'Moz',

src/compat.rs

@@ -197,6 +197,8 @@ pub enum Feature {
   StringListStyleType,
   SymbolsListStyleType,
   TamilListStyleType,
+  TargetBeforeAfter,
+  TargetCurrent,
   TargetText,
   TeluguListStyleType,
   TextDecorationThicknessPercent,
@@ -3631,6 +3633,58 @@ impl Feature {
           return false;
         }
       }
+      Feature::TargetCurrent => {
+        if let Some(version) = browsers.chrome {
+          if version < 8847360 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version < 8847360 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version < 8847360 {
+            return false;
+          }
+        }
+        if browsers.firefox.is_some()
+          || browsers.ie.is_some()
+          || browsers.ios_saf.is_some()
+          || browsers.opera.is_some()
+          || browsers.safari.is_some()
+          || browsers.samsung.is_some()
+        {
+          return false;
+        }
+      }
+      Feature::TargetBeforeAfter => {
+        if let Some(version) = browsers.chrome {
+          if version < 9306112 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version < 9306112 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version < 9306112 {
+            return false;
+          }
+        }
+        if browsers.firefox.is_some()
+          || browsers.ie.is_some()
+          || browsers.ios_saf.is_some()
+          || browsers.opera.is_some()
+          || browsers.safari.is_some()
+          || browsers.samsung.is_some()
+        {
+          return false;
+        }
+      }
       Feature::TargetText => {
         if let Some(version) = browsers.chrome {
           if version < 5832704 {