add keyframeSelectorNotation option

g-plane · May 17, 2024 · f9aaa41 · f9aaa41
1 parent 1df1f38
commit f9aaa41
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 3 deletions.
diff --git a/docs/config.md b/docs/config.md
@@ -570,3 +570,51 @@ a { width: 0; }
 
 a { width: 0; height: 0; }
 ```
+
+## `keyframeSelectorNotation`
+
+Control whether to use percentage or keyword (`from` and `to`) notation as keyframe selectors.
+
+Possible options:
+
+- `null`: Keyframe selector notation will be kept as-is.
+- `"keyword"`: Use keyword notation. This only affects `0%` and `100%`. For other percentage values, they will be kept as-is.
+- `"percentage"`: Use percentage notation.
+
+Default option is `null`.
+
+### Example for `null`
+
+[Playground](https://malva-play.vercel.app/?code=H4sIAAAAAAAAA3PITq1MK0rMTS1WSMvPV6jmUlBIK8rPVaiuBbJMDVQhDEMDCKsWABlFCDAvAAAA&config=H4sIAAAAAAAAA6uuBQBDv6ajAgAAAA%3D%3D&syntax=css)
+
+```css
+@keyframes foo {
+  from {}
+  50% {}
+  100% {}
+}
+```
+
+### Example for `"keyword"`
+
+[Playground](https://malva-play.vercel.app/?code=H4sIAAAAAAAAA3PITq1MK0rMTS1WSMvPV6jmUlBIK8rPVaiuBbJMDVQhDEMDCKsWABlFCDAvAAAA&config=H4sIAAAAAAAAA6vmUlBQyk6tTCtKzE0NTs1JTS7JL%2FLLL0ksyczPU7ICy5XnF6UocdUCACuoVucrAAAA&syntax=css)
+
+```css
+@keyframes foo {
+  from {}
+  50% {}
+  to {}
+}
+```
+
+### Example for `"percentage"`
+
+[Playground](https://malva-play.vercel.app/?code=H4sIAAAAAAAAA3PITq1MK0rMTS1WSMvPV6jmUlBIK8rPVaiuBbJMDVQhDEMDCKsWABlFCDAvAAAA&config=H4sIAAAAAAAAA6vmUlBQyk6tTCtKzE0NTs1JTS7JL%2FLLL0ksyczPU7JSUCpILUpOzStJTE9V4qoFAIT8kDouAAAA&syntax=css)
+
+```css
+@keyframes foo {
+  0% {}
+  50% {}
+  100% {}
+}
+```
diff --git a/dprint_plugin/deployment/schema.json b/dprint_plugin/deployment/schema.json
@@ -74,6 +74,11 @@
       "type": ["integer", "null"],
       "default": null,
       "minimum": 0
+    },
+    "keyframeSelectorNotation": {
+      "type": ["string", "null"],
+      "enum": ["keyword", "percentage"],
+      "default": null
     }
   }
 }
diff --git a/dprint_plugin/src/config.rs b/dprint_plugin/src/config.rs
@@ -174,6 +174,23 @@ pub(crate) fn resolve_config(
                 "singleLineBlockThreshold",
                 &mut diagnostics,
             ),
+            keyframe_selector_notation: get_nullable_value::<String>(
+                &mut config,
+                "keyframeSelectorNotation",
+                &mut diagnostics,
+            )
+            .as_deref()
+            .and_then(|value| match value {
+                "keyword" => Some(KeyframeSelectorNotation::Keyword),
+                "percentage" => Some(KeyframeSelectorNotation::Percentage),
+                _ => {
+                    diagnostics.push(ConfigurationDiagnostic {
+                        property_name: "keyframeSelectorNotation".into(),
+                        message: "invalid value for config `keyframeSelectorNotation`".into(),
+                    });
+                    None
+                }
+            }),
         },
     };
 

diff --git a/malva/src/config.rs b/malva/src/config.rs
@@ -126,6 +126,10 @@ pub struct LanguageOptions {
     #[cfg_attr(feature = "config_serde", serde(alias = "singleLineBlockThreshold"))]
     /// See [`singleLineBlockThreshold`](https://github.com/g-plane/malva/blob/main/docs/config.md#singlelineblockthreshold) on GitHub
     pub single_line_block_threshold: Option<usize>,
+
+    #[cfg_attr(feature = "config_serde", serde(alias = "keyframeSelectorNotation"))]
+    /// See [`keyframeSelectorNotation`](https://github.com/g-plane/malva/blob/main/docs/config.md#keyframeselectornotation) on GitHub
+    pub keyframe_selector_notation: Option<KeyframeSelectorNotation>,
 }
 
 #[derive(Clone, Debug, Default)]
@@ -205,3 +209,11 @@ pub enum DeclarationOrder {
     /// Order properties applying outside the box model, moving inward to intrinsic changes.
     Concentric,
 }
+
+#[derive(Clone, Debug)]
+#[cfg_attr(feature = "config_serde", derive(Serialize, Deserialize))]
+#[cfg_attr(feature = "config_serde", serde(rename_all = "kebab-case"))]
+pub enum KeyframeSelectorNotation {
+    Keyword,
+    Percentage,
+}
diff --git a/malva/src/doc_gen/at_rule/keyframes.rs b/malva/src/doc_gen/at_rule/keyframes.rs
@@ -36,17 +36,40 @@ impl<'s> DocGen<'s> for KeyframesName<'s> {
 
 impl<'s> DocGen<'s> for KeyframeSelector<'s> {
     fn doc(&self, ctx: &Ctx<'_, 's>) -> Doc<'s> {
+        use crate::config::KeyframeSelectorNotation;
+
         match self {
-            KeyframeSelector::Percentage(percentage) => percentage.doc(ctx),
+            KeyframeSelector::Percentage(percentage) => {
+                match (
+                    percentage.value.value,
+                    &ctx.options.keyframe_selector_notation,
+                ) {
+                    (0.0, Some(KeyframeSelectorNotation::Keyword)) => Doc::text("from"),
+                    (100.0, Some(KeyframeSelectorNotation::Keyword)) => Doc::text("to"),
+                    _ => percentage.doc(ctx),
+                }
+            }
             KeyframeSelector::Ident(InterpolableIdent::Literal(Ident { name, .. }))
                 if name.eq_ignore_ascii_case("from") =>
             {
-                Doc::text("from")
+                if let Some(KeyframeSelectorNotation::Percentage) =
+                    ctx.options.keyframe_selector_notation
+                {
+                    Doc::text("0%")
+                } else {
+                    Doc::text("from")
+                }
             }
             KeyframeSelector::Ident(InterpolableIdent::Literal(Ident { name, .. }))
                 if name.eq_ignore_ascii_case("to") =>
             {
-                Doc::text("to")
+                if let Some(KeyframeSelectorNotation::Percentage) =
+                    ctx.options.keyframe_selector_notation
+                {
+                    Doc::text("100%")
+                } else {
+                    Doc::text("to")
+                }
             }
             KeyframeSelector::Ident(ident) => ident.doc(ctx),
         }

diff --git a/malva/tests/fmt/css/at-rule/keyframes-keyword.css b/malva/tests/fmt/css/at-rule/keyframes-keyword.css
@@ -0,0 +1,15 @@
+/*cfg keyframeSelectorNotation = "keyword" */
+
+@keyframes foo { from {} }
+@keyframes foo { to {} }
+@keyframes foo { from {} to {} }
+@keyframes foo { from {} from {} to {} }
+@keyframes foo { from {} 50% {} to {} }
+@keyframes foo { from, to {} }
+
+@keyframes foo { 0% {} }
+@keyframes foo { 100% {} }
+@keyframes foo { 0% {} 100% {} }
+@keyframes foo { 0% {} 0% {} 100% {} }
+@keyframes foo { 0% {} 50% {} 100% {} }
+@keyframes foo { 0%, 100% {} }
diff --git a/malva/tests/fmt/css/at-rule/keyframes-keyword.snap b/malva/tests/fmt/css/at-rule/keyframes-keyword.snap
@@ -0,0 +1,52 @@
+---
+source: malva/tests/fmt.rs
+---
+/*cfg keyframeSelectorNotation = "keyword" */
+
+@keyframes foo {
+  from {}
+}
+@keyframes foo {
+  to {}
+}
+@keyframes foo {
+  from {}
+  to {}
+}
+@keyframes foo {
+  from {}
+  from {}
+  to {}
+}
+@keyframes foo {
+  from {}
+  50% {}
+  to {}
+}
+@keyframes foo {
+  from, to {}
+}
+
+@keyframes foo {
+  from {}
+}
+@keyframes foo {
+  to {}
+}
+@keyframes foo {
+  from {}
+  to {}
+}
+@keyframes foo {
+  from {}
+  from {}
+  to {}
+}
+@keyframes foo {
+  from {}
+  50% {}
+  to {}
+}
+@keyframes foo {
+  from, to {}
+}
diff --git a/malva/tests/fmt/css/at-rule/keyframes-percentage.css b/malva/tests/fmt/css/at-rule/keyframes-percentage.css
@@ -0,0 +1,14 @@
+/*cfg keyframeSelectorNotation = "percentage" */
+
+@keyframes foo { 0% {} }
+@keyframes foo { 100% {} }
+@keyframes foo { 0% {} 100% {} }
+@keyframes foo { 0% {} 0% {} 100% {} }
+@keyframes foo { 0%, 100% {} }
+
+@keyframes foo { from {} }
+@keyframes foo { to {} }
+@keyframes foo { from {} to {} }
+@keyframes foo { from {} from {} to {} }
+@keyframes foo { from {} 50% {} to {} }
+@keyframes foo { from, to {} }
diff --git a/malva/tests/fmt/css/at-rule/keyframes-percentage.snap b/malva/tests/fmt/css/at-rule/keyframes-percentage.snap
@@ -0,0 +1,47 @@
+---
+source: malva/tests/fmt.rs
+---
+/*cfg keyframeSelectorNotation = "percentage" */
+
+@keyframes foo {
+  0% {}
+}
+@keyframes foo {
+  100% {}
+}
+@keyframes foo {
+  0% {}
+  100% {}
+}
+@keyframes foo {
+  0% {}
+  0% {}
+  100% {}
+}
+@keyframes foo {
+  0%, 100% {}
+}
+
+@keyframes foo {
+  0% {}
+}
+@keyframes foo {
+  100% {}
+}
+@keyframes foo {
+  0% {}
+  100% {}
+}
+@keyframes foo {
+  0% {}
+  0% {}
+  100% {}
+}
+@keyframes foo {
+  0% {}
+  50% {}
+  100% {}
+}
+@keyframes foo {
+  0%, 100% {}
+}