fix(css): Add support for formatting LESS style blocks (#319)

* fix(css): Add support for formatting LESS style blocks

* refactor(embed): Handle style tags with unknown langs in embed instead

* chore: changeset

* fix(embed): Add missing return

.changeset/clever-planes-try.md

@@ -0,0 +1,5 @@
+---
+'prettier-plugin-astro': minor
+---
+
+Add support for LESS style tags, fixed crash on style tags with unknown languages

src/printer/embed.ts

@@ -21,7 +21,8 @@ const {
 	utils: { stripTrailingHardline, mapDoc },
 } = _doc;
 
-type supportedStyleLang = 'css' | 'scss' | 'sass';
+const supportedStyleLangValues = ['css', 'scss', 'sass', 'less'] as const;
+type supportedStyleLang = (typeof supportedStyleLangValues)[number];
 
 // https://prettier.io/docs/en/plugins.html#optional-embed
 export function embed(
@@ -127,15 +128,13 @@ export function embed(
 	// Style tags
 	if (node.type === 'element' && node.name === 'style') {
 		const content = printRaw(node);
-		const supportedStyleLangValues = ['css', 'scss', 'sass'];
-		let parserLang: supportedStyleLang = 'css';
+		let parserLang: supportedStyleLang | undefined = 'css';
 
 		if (node.attributes) {
 			const langAttribute = node.attributes.filter((x) => x.name === 'lang');
 			if (langAttribute.length) {
-				const styleLang = langAttribute[0].value.toLowerCase();
-				if (supportedStyleLangValues.includes(styleLang))
-					parserLang = styleLang as supportedStyleLang;
+				const styleLang = langAttribute[0].value.toLowerCase() as supportedStyleLang;
+				parserLang = supportedStyleLangValues.includes(styleLang) ? styleLang : undefined;
 			}
 		}
 
@@ -270,16 +269,17 @@ function makeNodeJSXCompatible<T>(node: any): T {
  * Format the content of a style tag and print the entire element
  */
 function embedStyle(
-	lang: supportedStyleLang,
+	lang: supportedStyleLang | undefined,
 	content: string,
 	path: AstPath,
 	print: printFn,
 	textToDoc: (text: string, options: object) => Doc,
 	options: ParserOptions
-) {
+): Doc | null {
 	const isEmpty = /^\s*$/.test(content);
 
 	switch (lang) {
+		case 'less':
 		case 'css':
 		case 'scss': {
 			let formattedStyles = wrapParserTryCatch(textToDoc, content, { ...options, parser: lang });
@@ -323,5 +323,14 @@ function embedStyle(
 				'</style>',
 			];
 		}
+		case undefined: {
+			const node = path.getNode();
+
+			if (node) {
+				return options.originalText.slice(options.locStart(node), options.locEnd(node));
+			}
+
+			return null;
+		}
 	}
 }

test/fixtures/styles/with-less/input.astro

@@ -0,0 +1,9 @@
+<style lang="less">
+	@width: 10px;
+@height: @width + 10px;
+
+#header {
+  width: @width;
+  height: @height;
+}
+</style>

test/fixtures/styles/with-less/output.astro

@@ -0,0 +1,9 @@
+<style lang="less">
+  @width: 10px;
+  @height: @width + 10px;
+
+  #header {
+    width: @width;
+    height: @height;
+  }
+</style>

test/fixtures/styles/with-styles-and-body-tag/output.astro

@@ -7,7 +7,6 @@
     <h1>This is a heading</h1>
     <p>This is a paragraph.</p>
   </body>
-
 </html>
 
 <style>

test/fixtures/styles/with-unknown/input.astro

@@ -0,0 +1,9 @@
+<style lang="wacky-new-css">
+		%var: width: 10px;
+		%var: height: @width + 10px;
+
+#header {
+  width: @width;
+  			height: @height;
+}
+</style>

test/fixtures/styles/with-unknown/output.astro

@@ -0,0 +1,9 @@
+<style lang="wacky-new-css">
+		%var: width: 10px;
+		%var: height: @width + 10px;
+
+#header {
+  width: @width;
+  			height: @height;
+}
+</style>

test/tests/styles.test.ts

@@ -31,9 +31,12 @@ test(
 	'styles/format-nested-sass-style-tag-content'
 );
 
-// TODO: needs to fix in the compiler
-// test(
-//   'Can format a basic Astro file with styles and a body tag',
-//   files,
-//   'styles/with-styles-and-body-tag'
-// );
+test(
+	'Can format a basic Astro file with styles and a body tag',
+	files,
+	'styles/with-styles-and-body-tag'
+);
+
+test('Can format .less styles', files, 'styles/with-less');
+
+test('does not format unknown CSS languages', files, 'styles/with-unknown');