fix: better pug error message (#448)

Closes #447
Also add note about a pug limitation using template literals

Author: dummdidumm

docs/preprocessing.md

@@ -316,6 +316,8 @@ This is also necessary to pass callbacks:
 button(on:click!="{(e) => doTheThing(e)}")
 ```
 
+It is not possible to use template literals for attribute values. You can't write `` attr=`Hello ${value ? 'Foo' : 'Bar'}` ``, instead write `attr="Hello {value ? 'Foo' : 'Bar'}"`.
+
 **Spreading props:**
 
 To spread props into a pug element, wrap the `{...object}` expression with quotes `"`.

src/transformers/pug.ts

@@ -65,15 +65,28 @@ const transformer: Transformer<Options.Pug> = async ({
   };
 
   const { type: identationType } = detectIndent(content);
-  const code = `${GET_MIXINS(identationType ?? 'space')}\n${content}`;
+  const input = `${GET_MIXINS(identationType ?? 'space')}\n${content}`;
   const compiled = pug.compile(
-    code,
+    input,
     pugOptions,
     // @types/pug compile() returned value doesn't have `dependencies` prop
   ) as pug.compileTemplate & { dependencies?: string[] };
 
+  let code: string;
+
+  try {
+    code = compiled();
+  } catch (e) {
+    // The error message does not have much context, add more of it
+    if (e instanceof Error) {
+      e.message = `[svelte-preprocess] Pug error while preprocessing ${filename}\n\n${e.message}`;
+    }
+
+    throw e;
+  }
+
   return {
-    code: compiled(),
+    code,
     dependencies: compiled.dependencies ?? [],
   };
 };