From 2b4a9f9f6c5e5c412de81c6e29d984bede40e83d Mon Sep 17 00:00:00 2001
From: Siddhant Kameswar <115331356+grimsteel@users.noreply.github.com>
Date: Thu, 1 Aug 2024 20:01:47 -0500
Subject: [PATCH 1/3] add keyframes named timeline range selector

---
 src/rules/keyframes.rs | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/rules/keyframes.rs b/src/rules/keyframes.rs
index adf2fb5b..f9f54b4e 100644
--- a/src/rules/keyframes.rs
+++ b/src/rules/keyframes.rs
@@ -8,6 +8,7 @@ use crate::declaration::DeclarationBlock;
 use crate::error::{ParserError, PrinterError};
 use crate::parser::ParserOptions;
 use crate::printer::Printer;
+use crate::properties::animation::TimelineRangeName;
 use crate::properties::custom::{CustomProperty, UnparsedProperty};
 use crate::properties::Property;
 use crate::targets::Targets;
@@ -265,6 +266,34 @@ impl<'i> ToCss for KeyframesRule<'i> {
   }
 }
 
+/// A percentage of a given timeline range
+#[derive(Debug, PartialEq, Clone)]
+#[cfg_attr(feature = "visitor", derive(Visit))]
+#[cfg_attr(
+  feature = "serde",
+  derive(serde::Serialize, serde::Deserialize),
+  serde(tag = "type", rename_all = "camelCase")
+)]
+#[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
+#[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
+pub struct TimelineRangePercentage {
+  /// A named timeline range
+  timeline_range_name: TimelineRangeName,
+  /// The percentage progress between the start and end of the rage
+  percentage: Percentage
+}
+
+impl<'i> Parse<'i> for TimelineRangePercentage {
+  fn parse<'t>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ParserError<'i>>> {
+    let timeline_range_name = input.try_parse(TimelineRangeName::parse)?;
+    let percentage = input.try_parse(Percentage::parse)?;
+    Ok(TimelineRangePercentage {
+      timeline_range_name,
+      percentage
+    })
+  }
+}
+
 /// A [keyframe selector](https://drafts.csswg.org/css-animations/#typedef-keyframe-selector)
 /// within an `@keyframes` rule.
 #[derive(Debug, PartialEq, Clone, Parse)]
@@ -283,6 +312,8 @@ pub enum KeyframeSelector {
   From,
   /// The `to` keyword. Equivalent to 100%.
   To,
+  /// A [named timeline range selector](https://drafts.csswg.org/scroll-animations-1/#named-range-keyframes)
+  TimelineRangePercentage(TimelineRangePercentage)
 }
 
 impl ToCss for KeyframeSelector {
@@ -306,6 +337,13 @@ impl ToCss for KeyframeSelector {
         }
       }
       KeyframeSelector::To => dest.write_str("to"),
+      KeyframeSelector::TimelineRangePercentage(TimelineRangePercentage {
+        timeline_range_name,
+        percentage
+      }) => {
+        timeline_range_name.to_css(dest)?;
+        percentage.to_css(dest)
+      }
     }
   }
 }

From 192547d0c996c86e333321f935df323bceee319c Mon Sep 17 00:00:00 2001
From: Siddhant Kameswar <115331356+grimsteel@users.noreply.github.com>
Date: Thu, 1 Aug 2024 20:20:19 -0500
Subject: [PATCH 2/3] add tests

---
 src/lib.rs             | 27 +++++++++++++++++++++++++++
 src/rules/keyframes.rs |  1 +
 2 files changed, 28 insertions(+)

diff --git a/src/lib.rs b/src/lib.rs
index 8b9535f0..02bf9fcf 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -6925,6 +6925,21 @@ mod tests {
       "@keyframes test{to{background:#00f}}",
     );
 
+    // named animation range percentages
+    minify_test(
+      r#"
+      @keyframes test {
+        entry 0% {
+          background: blue
+        }
+        exit 100% {
+          background: green
+        }
+      }
+    "#,
+      "@keyframes test{entry 0%{background:#00f}exit 100%{background:green}}",
+    );
+
     // CSS-wide keywords and `none` cannot remove quotes.
     minify_test(
       r#"
@@ -6948,6 +6963,18 @@ mod tests {
       "@keyframes \"none\"{0%{background:green}}",
     );
 
+    // named animation ranges cannot be used with to or from
+    minify_test(
+      r#"
+      @keyframes test {
+        entry to {
+          background: blue
+        }
+      }
+    "#,
+      "@keyframes test{}",
+    );
+
     // CSS-wide keywords without quotes throws an error.
     error_test(
       r#"
diff --git a/src/rules/keyframes.rs b/src/rules/keyframes.rs
index f9f54b4e..c4dacdc1 100644
--- a/src/rules/keyframes.rs
+++ b/src/rules/keyframes.rs
@@ -342,6 +342,7 @@ impl ToCss for KeyframeSelector {
         percentage
       }) => {
         timeline_range_name.to_css(dest)?;
+        dest.write_char(' ')?;
         percentage.to_css(dest)
       }
     }

From cf365028f20403d77c39b75f10437d1bb90ff1ca Mon Sep 17 00:00:00 2001
From: Siddhant Kameswar <115331356+grimsteel@users.noreply.github.com>
Date: Thu, 1 Aug 2024 23:06:32 -0500
Subject: [PATCH 3/3] Update src/rules/keyframes.rs

Co-authored-by: Devon Govett <devongovett@gmail.com>
---
 src/rules/keyframes.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/rules/keyframes.rs b/src/rules/keyframes.rs
index c4dacdc1..9d1e758d 100644
--- a/src/rules/keyframes.rs
+++ b/src/rules/keyframes.rs
@@ -285,8 +285,8 @@ pub struct TimelineRangePercentage {
 
 impl<'i> Parse<'i> for TimelineRangePercentage {
   fn parse<'t>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ParserError<'i>>> {
-    let timeline_range_name = input.try_parse(TimelineRangeName::parse)?;
-    let percentage = input.try_parse(Percentage::parse)?;
+    let timeline_range_name = TimelineRangeName::parse(input)?;
+    let percentage = Percentage::parse(input)?;
     Ok(TimelineRangePercentage {
       timeline_range_name,
       percentage