fix: allow expression to be used as key-value pair or block in embedded css (#712)

Author: kt3k

Cargo.toml

@@ -43,7 +43,7 @@ serde_json = { version = "1.0", optional = true }
 [dev-dependencies]
 dprint-development = "0.10.1"
 dprint-plugin-sql = "0.2.0"
-malva = "0.11.1"
+malva = "0.11.2"
 markup_fmt = "0.19.0"
 pretty_assertions = "1.3.0"
 serde_json = { version = "1.0" }

src/format_text.rs

@@ -165,6 +165,9 @@ mod test {
       }),
     });
     assert!(result.is_err());
-    assert_eq!(result.unwrap_err().to_string(), "Error formatting tagged template literal at line 0: Syntax error from external formatter");
+    assert_eq!(
+      result.unwrap_err().to_string(),
+      "Error formatting tagged template literal at line 0: Syntax error from external formatter"
+    );
   }
 }

src/generation/generate.rs

@@ -3018,8 +3018,13 @@ fn maybe_gen_tagged_tpl_with_external_formatter<'a>(node: &TaggedTpl<'a>, contex
   let external_formatter = context.external_formatter.as_ref()?;
   let media_type = detect_embedded_language_type(node)?;
 
+  let placeholder_css = "@dpr1nt_";
+  let placeholder_other = "dpr1nt_";
   // First creates text with placeholders for the expressions.
-  let placeholder_text = "dpr1nt_";
+  let placeholder_text = match media_type {
+    MediaType::Css => placeholder_css,
+    _ => placeholder_other,
+  };
   let text = capacity_builder::StringBuilder::<String>::build(|builder| {
     let expr_len = node.tpl.exprs.len();
     for (i, quasi) in node.tpl.quasis.iter().enumerate() {

tests/spec_test.rs

@@ -27,8 +27,10 @@ fn format_embedded_css(text: &str, config: &Configuration) -> Result<Option<Stri
     ..Default::default()
   };
   // Wraps the text in a css block of `a { ... }`
-  // to make it valid css (scss)
-  let text = malva::format_text(&format!("a{{\n{}\n}}", text), malva::Syntax::Scss, &options)?;
+  // to make it valid css (less)
+  // We choose LESS syntax because it allows us to use `@variable` as both value and mixin.
+  // The latter works as placeholder for key-value pair.
+  let text = malva::format_text(&format!("a{{\n{}\n;}}", text), malva::Syntax::Less, &options)?;
   let mut buf = vec![];
   for (i, l) in text.lines().enumerate() {
     // skip the first line (a {)

tests/specs/external_formatter/css.txt

@@ -122,3 +122,28 @@ styled.div`color:red;`;
 [expect]
 // dprint-ignore
 styled.div`color:red;`;
+
+== should format css when expressions appear as key-value pair, or css block ==
+css`
+div {
+    margin:   1px;
+       ${otherDivStyles};
+}
+${OTHER_STYLES};
+${ANOTHER_STYLES}`
+[expect]
+css`
+    div {
+        margin: 1px;
+        ${otherDivStyles};
+    }
+    ${OTHER_STYLES};
+    ${ANOTHER_STYLES};
+`;
+
+== should format expression only template literal ==
+css`${expr}`
+[expect]
+css`
+    ${expr};
+`;