Respect style tag type attribute when formatting

src/printer.ts

@@ -97,6 +97,7 @@ import {
   unwrapLineFeeds,
 } from './utils/common';
 import { getScriptParserName } from './utils/script-mime-types';
+import { getStyleParserName } from './utils/style-mime-types';
 import { isSvelteInterpolation } from './utils/svelte';
 import {
   isVueEventBinding,
@@ -1983,7 +1984,9 @@ export class PugPrinter {
         }
 
         case 'style': {
-          parser = 'css';
+          parser = getStyleParserName(
+            previousTypeAttributeToken(this.tokens, this.currentIndex),
+          );
           break;
         }
 

src/utils/style-mime-types.ts

@@ -0,0 +1,46 @@
+import type { BuiltInParserName } from 'prettier';
+import type { AttributeToken } from 'pug-lexer';
+
+const wrappingQuotesRe: RegExp = /(^(["'`]))|((["'`])$)/g;
+
+// Matches style types to the required parser for them
+// Note: Types not listed here (e.g. `sass` or `stylus`) are left unformatted,
+//       because there is no builtin prettier parser for them
+const styleTypeToParserMap: Map<string, BuiltInParserName> = new Map([
+  ['css', 'css'],
+  ['text/css', 'css'],
+  ['less', 'less'],
+  ['text/less', 'less'],
+  ['scss', 'scss'],
+  ['text/scss', 'scss'],
+]);
+
+/**
+ * Decides which parser to format style contents with.
+ *
+ * @param typeAttrToken Type token of the style tag.
+ * @returns Parser name to parse contents with.
+ */
+export function getStyleParserName(
+  typeAttrToken?: AttributeToken,
+): BuiltInParserName | undefined {
+  // Omission means CSS
+  if (!typeAttrToken) {
+    return 'css';
+  }
+
+  const typeRaw: string | boolean = typeAttrToken.val;
+  // If it's not a string, best not do anything
+  if (typeof typeRaw !== 'string') {
+    return;
+  }
+
+  const type: string = typeRaw.replaceAll(wrappingQuotesRe, '').toLowerCase();
+
+  // Empty type is equivalent to omission
+  if (!type) {
+    return 'css';
+  }
+
+  return styleTypeToParserMap.get(type);
+}

tests/issues/issue-532/formatted.pug

@@ -0,0 +1,41 @@
+//- Stays unchanged, because no loaded plugin provides a parser for sass
+style(type="sass").
+  :host
+    display: inline
+
+//- Formatted with the builtin scss parser
+style(type="text/scss").
+  :host {
+    .a {
+      display: inline;
+    }
+  }
+
+//- Formatted with the builtin less parser
+style(type="less").
+  @color: red;
+  .a {
+    color: @color;
+  }
+
+//- Formatted with the builtin css parser
+style(type="text/css").
+  :host {
+    display: inline;
+  }
+
+//- Without a type, formatted with the builtin css parser
+style.
+  :host {
+    display: inline;
+  }
+
+//- An empty type is formatted with the builtin css parser
+style(type="").
+  :host {
+    display: inline;
+  }
+
+//- Stays unchanged, because a type without a value is not a string
+style(type).
+  :host {  display:inline }

tests/issues/issue-532/issue-532.test.ts

@@ -0,0 +1,11 @@
+import { compareFiles } from 'tests/common';
+import { describe, expect, it } from 'vitest';
+
+describe('Issues', () => {
+  describe('issue #532', () => {
+    it('should format style tags based on their type attribute', async () => {
+      const { actual, expected } = await compareFiles(import.meta.url);
+      expect(actual).toBe(expected);
+    });
+  });
+});

tests/issues/issue-532/unformatted.pug

@@ -0,0 +1,31 @@
+//- Stays unchanged, because no loaded plugin provides a parser for sass
+style(type="sass").
+  :host
+    display: inline
+
+//- Formatted with the builtin scss parser
+style(type='text/scss').
+  :host  {
+    .a { display:inline }
+  }
+
+//- Formatted with the builtin less parser
+style(type="less").
+  @color:  red;
+  .a { color:@color }
+
+//- Formatted with the builtin css parser
+style(type="text/css").
+  :host {  display:inline }
+
+//- Without a type, formatted with the builtin css parser
+style.
+  :host {  display:inline }
+
+//- An empty type is formatted with the builtin css parser
+style(type="").
+  :host {  display:inline }
+
+//- Stays unchanged, because a type without a value is not a string
+style(type).
+  :host {  display:inline }