fix(fmt): allow expressions used as key-value pair in css template literals (#29369)

Author: kt3k

Cargo.lock

@@ -293,7 +293,7 @@ dprint-core = "=0.67.4"
 dprint-plugin-json = "=0.20.0"
 dprint-plugin-jupyter = "=0.2.0"
 dprint-plugin-markdown = "=0.18.0"
-dprint-plugin-typescript = "=0.95.3"
+dprint-plugin-typescript = "=0.95.4"
 env_logger = "=0.11.6"
 eszip = "=0.88.0"
 fancy-regex = "=0.14.0"

Cargo.toml

@@ -619,11 +619,14 @@ fn format_embedded_css(
       ignore_file_comment_directive: "malva-ignore-file".into(),
     },
   };
-  // Wraps the text in a css block of `a { ... }`
-  // to make it valid css (scss)
+  // Wraps the text in a css block of `a { ... ;}`
+  // to make it valid css
+  // Note: We choose LESS for the syntax because it allows us to use
+  // @variable for both property values and mixins, which is convenient
+  // for handling placeholders used as both properties and mixins.
   let text = malva::format_text(
-    &format!("a{{\n{}\n}}", text),
-    malva::Syntax::Scss,
+    &format!("a{{\n{}\n;}}", text),
+    malva::Syntax::Less,
     &options,
   )?;
   let mut buf = vec![];

cli/tools/fmt.rs

@@ -8,6 +8,7 @@ margin: 0.5rem;
 
 	&:not(:first-child) {
 			${(props) => props.vertical ? "margin-top" : "margin-left"}: 1rem;
+        ${OTHER_STYLES};
 		}
 	}
 `;
@@ -16,7 +17,7 @@ cssString = css`
         border: 1px red solid;
               background-color: red;
 border-radius: 4px;
-`
+        ${OTHER_STYLES}`
 
 nestedCssString = tw`
   animate-pulse

tests/specs/fmt/external_formatter/badly_formatted.in

@@ -1,3 +1,3 @@
 Error formatting: [WILDLINE]syntax_error_in_css.js
-   Error formatting tagged template literal at line 0: syntax error at line 3, col 10: component value is expected
+   Error formatting tagged template literal at line 0: syntax error at line 1, col 1: expect token `(`, but found `{`
 error: Failed to format 1 of 1 checked file

tests/specs/fmt/external_formatter/syntax_error_in_css.out

@@ -8,6 +8,7 @@ const EqualDivider = styled.div`
 
     &:not(:first-child) {
       ${(props) => props.vertical ? "margin-top" : "margin-left"}: 1rem;
+      ${OTHER_STYLES};
     }
   }
 `;
@@ -16,6 +17,7 @@ cssString = css`
   border: 1px red solid;
   background-color: red;
   border-radius: 4px;
+  ${OTHER_STYLES};
 `;
 
 nestedCssString = tw`

tests/specs/fmt/external_formatter/well_formatted.out

@@ -8,6 +8,7 @@ const EqualDivider = styled.div`
 
     &:not(:first-child) {
       ${(props) => props.vertical ? "margin-top" : "margin-left"}: 1rem;
+      ${OTHER_STYLES};
     }
   }
 `;
@@ -16,6 +17,7 @@ cssString = css`
   border: 1px red solid;
   background-color: red;
   border-radius: 4px;
+  ${OTHER_STYLES};
 `;
 
 nestedCssString = tw`

tests/specs/fmt/external_formatter/well_formatted_unstable_sql.out

@@ -8,6 +8,7 @@ const EqualDivider = styled.div`
 
 		&:not(:first-child) {
 			${(props) => props.vertical ? "margin-top" : "margin-left"}: 1rem;
+			${OTHER_STYLES};
 		}
 	}
 `;
@@ -16,6 +17,7 @@ cssString = css`
 	border: 1px red solid;
 	background-color: red;
 	border-radius: 4px;
+	${OTHER_STYLES};
 `;
 
 nestedCssString = tw`