Fix: format indented sass (#173)

* Fix: format indented sass * chore: add changeset
withastro · Apr 9, 2022 · a7a6b14 · a7a6b14
1 parent c5a7a7f
commit a7a6b14
Show file tree

Hide file tree

Showing 19 changed files with 110 additions and 280 deletions.
diff --git a/.changeset/friendly-lobsters-shop.md b/.changeset/friendly-lobsters-shop.md
@@ -0,0 +1,5 @@
+---
+'prettier-plugin-astro': patch
+---
+
+Fix: format indented sass
diff --git a/src/printer.ts b/src/printer.ts
@@ -607,7 +607,7 @@ function embed(
 
   // format script element
   if (node.type === 'element' && node.name === 'script') {
-    const scriptContent = node.children[0].value;
+    const scriptContent = printRaw(node);
     let formatttedScript = textToDoc(scriptContent, {
       ...opts,
       parser: 'typescript',
@@ -640,7 +640,7 @@ function embed(
 
   // format style element
   if (node.type === 'element' && node.name === 'style') {
-    const styleTagContent = node.children[0].value.trim();
+    const styleTagContent = printRaw(node);
 
     const supportedStyleLangValues = ['css', 'scss', 'sass'];
     let parserLang = 'css';

diff --git a/src/utils.ts b/src/utils.ts
@@ -209,7 +209,7 @@ export function printRaw(
 export function isNodeWithChildren(
   node: anyNode
 ): node is anyNode & NodeWithChildren {
-  return node && Array.isArray(node.children);
+  return node && 'children' in node && Array.isArray(node.children);
 }
 
 export function isInlineElement(
@@ -638,56 +638,45 @@ export function trimTextNodeRight(node: TextNode): void {
 //   });
 // }
 
-// https://github.com/dmnd/dedent/blob/master/dist/dedent.js
-export function manualDedent(input: string) {
-  // first, perform interpolation
-  let result = '';
-  for (let i = 0; i < input.length; i++) {
-    result += input[i]
-      // join lines when there is a suppressed newline
-      .replace(/\\\n[ \t]*/g, '')
-      // handle escaped backticks
-      .replace(/\\`/g, '`');
-
-    if (i < (arguments.length <= 1 ? 0 : arguments.length - 1)) {
-      // eslint-disable-next-line prefer-rest-params
-      result += arguments.length <= i + 1 ? undefined : arguments[i + 1];
+/** dedent string & return tabSize (the last part is what we need) */
+export function manualDedent(input: string): {
+  tabSize: number;
+  char: string;
+  result: string;
+} {
+  let minTabSize = Infinity;
+  let result = input;
+  // 1. normalize
+  result = result.replace(/\r\n/g, '\n');
+
+  // 2. count tabSize
+  let char = '';
+  for (const line of result.split('\n')) {
+    if (!line) continue;
+    // if any line begins with a non-whitespace char, minTabSize is 0
+    if (line[0] && /^[^\s]/.test(line[0])) {
+      minTabSize = 0;
+      break;
+    }
+    const match = line.match(/^(\s+)\S+/); // \S ensures we don’t count lines of pure whitespace
+    if (match) {
+      if (match[1] && !char) char = match[1][0];
+      if (match[1].length < minTabSize) minTabSize = match[1].length;
     }
   }
 
-  // now strip indentation
-  const lines = result.split('\n');
-  let mindent: number | null = null;
-  lines.forEach(function (l) {
-    const m = l.match(/^(\s+)\S+/);
-    if (m) {
-      const indent = m[1].length;
-      if (!mindent) {
-        // this is the first indented line
-        mindent = indent;
-      } else {
-        mindent = Math.min(mindent, indent);
-      }
-    }
-  });
-
-  if (mindent !== null) {
-    (function () {
-      const m = mindent; // appease Flow
-      result = lines
-        .map(function (l) {
-          return l[0] === ' ' ? l.slice(m) : l;
-        })
-        .join('\n');
-    })();
+  // 3. reformat string
+  if (minTabSize > 0 && Number.isFinite(minTabSize)) {
+    result = result.replace(
+      new RegExp(`^${new Array(minTabSize + 1).join(char)}`, 'gm'),
+      ''
+    );
   }
 
   return {
-    result: result
-      // dedent eats leading and trailing whitespace too
-      .trim()
-      // handle escaped newlines at the end to ensure they don't get stripped too
-      .replace(/\\n/g, '\n'),
+    tabSize: minTabSize === Infinity ? 0 : minTabSize,
+    char,
+    result,
   };
 }
 

diff --git a/test/fixtures/styles/single-style-element-with-sass-lang/input.astro b/test/fixtures/styles/single-style-element-with-sass-lang/input.astro
diff --git a/test/fixtures/styles/single-style-element-with-sass-lang/output.astro b/test/fixtures/styles/single-style-element-with-sass-lang/output.astro
diff --git a/test/fixtures/styles/single-style-element-with-scss-lang/input.astro b/test/fixtures/styles/single-style-element-with-scss-lang/input.astro
diff --git a/test/fixtures/styles/single-style-element-with-scss-lang/output.astro b/test/fixtures/styles/single-style-element-with-scss-lang/output.astro
diff --git a/test/fixtures/styles/with-indented-sass/input.astro b/test/fixtures/styles/with-indented-sass/input.astro
@@ -1,17 +1,4 @@
-<!DOCTYPE html>
-      <html lang="en">
-<head>
-    <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-        <body>
-          <h1>
-            Hello world!</h1>
-        </body>
-</html>
-
+  <div class="hello">lorem</div>
 
 
 <style lang="sass">

diff --git a/test/fixtures/styles/with-indented-sass/output.astro b/test/fixtures/styles/with-indented-sass/output.astro
@@ -1,15 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <h1>Hello world!</h1>
-  </body>
-</html>
+<div class="hello">lorem</div>
 
 <style lang="sass">
   $bg: #1E1E1E

diff --git a/test/fixtures/styles/with-sass/input.astro b/test/fixtures/styles/with-sass/input.astro
@@ -1,18 +1,4 @@
-<!DOCTYPE html>
-      <html lang="en">
-<head>
-    <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-        <body>
-          <h1>
-            Hello world!</h1>
-        </body>
-</html>
-
-
+  <div class="hello">lorem</div>
 
 <style lang="sass">
   .hello

diff --git a/test/fixtures/styles/with-sass/output.astro b/test/fixtures/styles/with-sass/output.astro
@@ -1,15 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <h1>Hello world!</h1>
-  </body>
-</html>
+<div class="hello">lorem</div>
 
 <style lang="sass">
   .hello

diff --git a/test/fixtures/styles/with-scss/input.astro b/test/fixtures/styles/with-scss/input.astro
@@ -1,16 +1,4 @@
-<!DOCTYPE html>
-      <html lang="en">
-<head>
-    <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-        <body>
-          <h1>
-            Hello world!</h1>
-        </body>
-</html>
+  <div class="hello">lorem</div>
 
 
 

diff --git a/test/fixtures/styles/with-scss/output.astro b/test/fixtures/styles/with-scss/output.astro
@@ -1,15 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <h1>Hello world!</h1>
-  </body>
-</html>
+<div class="hello">lorem</div>
 
 <style lang="scss">
   .hello {

diff --git a/test/fixtures/styles/with-styles-and-body-tag/input.astro b/test/fixtures/styles/with-styles-and-body-tag/input.astro
@@ -0,0 +1,18 @@
+<html>
+<head>
+  <title>Title of the document</title>
+</head>
+
+<body>
+  <h1>This is a heading</h1>
+  <p>This is a paragraph.</p>
+</body>
+
+</html>
+
+
+<style>
+.hello {
+                color: red;
+}
+</style>
diff --git a/test/fixtures/styles/with-styles-and-body-tag/output.astro b/test/fixtures/styles/with-styles-and-body-tag/output.astro
@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <title>Title of the document</title>
+  </head>
+
+  <body>
+    <h1>This is a heading</h1>
+    <p>This is a paragraph.</p>
+  </body>
+
+</html>
+
+<style>
+  .hello {
+    color: red;
+  }
+</style>