fix: handle scss/less

Prettier doesn't handle resolving the parser as automatically anymore in v3, so we need to add more logic ourselves
fixes #390

Author: dummdidumm

CHANGELOG.md

@@ -1,6 +1,10 @@
 # prettier-plugin-svelte changelog
 
-## 3.0.0 (Unreleased)
+## 3.0.1
+
+-   (fix) support less/scss in style tags
+
+## 3.0.0
 
 -   (breaking) requires `prettier` version 3. This may require adjustments to your configuration file, see [the migration guide for more info](https://github.com/sveltejs/prettier-plugin-svelte#how-to-migrate-from-version-2-to-3)
 -   (breaking) requires node version 14 or higher

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "prettier-plugin-svelte",
-    "version": "2.10.1",
+    "version": "3.0.1",
     "description": "Svelte plugin for prettier",
     "main": "plugin.js",
     "files": [

package.json

@@ -11,8 +11,10 @@ import {
     getLeadingComment,
     isIgnoreDirective,
     isInsideQuotedAttribute,
+    isLess,
     isNodeSupportedLanguage,
     isPugTemplate,
+    isScss,
     isTypeScript,
     printRaw,
 } from './print/node-helpers';
@@ -151,7 +153,7 @@ export function embed(path: FastPath, _options: Options) {
 
     const embedType = (
         tag: 'script' | 'style' | 'template',
-        parser: 'typescript' | 'babel-ts' | 'css' | 'pug',
+        parser: 'typescript' | 'babel-ts' | 'css' | 'scss' | 'less' | 'pug',
         isTopLevel: boolean,
     ) => {
         return async (
@@ -180,7 +182,8 @@ export function embed(path: FastPath, _options: Options) {
             isTypeScript(node) ? 'typescript' : 'babel-ts',
             isTopLevel,
         );
-    const embedStyle = (isTopLevel: boolean) => embedType('style', 'css', isTopLevel);
+    const embedStyle = (isTopLevel: boolean) =>
+        embedType('style', isLess(node) ? 'less' : isScss(node) ? 'scss' : 'css', isTopLevel);
     const embedPug = () => embedType('template', 'pug', false);
 
     switch (node.type) {
@@ -233,7 +236,7 @@ function getSnippedContent(node: Node) {
 
 async function formatBodyContent(
     content: string,
-    parser: 'typescript' | 'babel-ts' | 'css' | 'pug',
+    parser: 'typescript' | 'babel-ts' | 'css' | 'scss' | 'less' | 'pug',
     textToDoc: (text: string, options: object) => Promise<Doc>,
     options: ParserOptions & { pugTabWidth?: number },
 ) {

src/embed.ts

@@ -216,9 +216,7 @@ function isTextNode(node: Node): node is TextNode {
 function getAttributeValue(attributeName: string, node: Node) {
     const attributes = ((node as ElementNode).attributes ?? []) as AttributeNode[];
 
-    const langAttribute = attributes.find(
-        (attribute) => attribute.name === attributeName,
-    );
+    const langAttribute = attributes.find((attribute) => attribute.name === attributeName);
 
     return langAttribute && langAttribute.value;
 }
@@ -269,6 +267,16 @@ export function isTypeScript(node: Node) {
     return ['typescript', 'ts'].includes(lang);
 }
 
+export function isLess(node: Node) {
+    const lang = getLangAttribute(node) || '';
+    return ['less'].includes(lang);
+}
+
+export function isScss(node: Node) {
+    const lang = getLangAttribute(node) || '';
+    return ['sass', 'scss'].includes(lang);
+}
+
 export function isPugTemplate(node: Node): boolean {
     return node.type === 'Element' && node.name === 'template' && getLangAttribute(node) === 'pug';
 }
@@ -623,4 +631,4 @@ function removeAndGetLeadingComments(ast: ASTNode, current: Node): CommentInfo[]
             emptyLineAfter: getUnencodedText(newlines[i]).split('\n').length > 2,
         }))
         .reverse();
-}
+}