fix: allow pug template inheritance

src/transformers/pug.ts

@@ -67,8 +67,21 @@ const transformer: Transformer<Options.Pug> = async ({
     ...options,
   };
 
+  // separate content that needs to come before the svelte mixins
+  let preContent = '';
+
+  if (content.startsWith('extends')) {
+    const split = content.indexOf('\n') + 1;
+
+    preContent = content.substring(0, split);
+    content = content.substring(split);
+  }
+
   const { type: identationType } = detectIndent(content);
-  const input = `${GET_MIXINS(identationType ?? 'space')}\n${content}`;
+  const input = `${preContent}${GET_MIXINS(
+    identationType ?? 'space',
+  )}\n${content}`;
+
   const compiled = pug.compile(
     input,
     pugOptions,

test/fixtures/pug/basic.html

@@ -0,0 +1 @@
+<div>hey</div>

test/fixtures/pug/basic.pug

@@ -0,0 +1 @@
+div hey

test/fixtures/pug/lib/mixin.pug

@@ -0,0 +1,3 @@
+mixin green
+  span(style='color: green')
+    block

test/fixtures/pug/lib/template.pug

@@ -0,0 +1,4 @@
+span(style='color: orange')
+  block orange
+span(style='color: blue')
+  block blue

test/fixtures/pug/mixin.html

@@ -0,0 +1 @@
+<span style="color: green"><p>hello mixin</p></span>

test/fixtures/pug/mixin.pug

@@ -0,0 +1,3 @@
+include /pug/lib/mixin.pug
++green
+  p hello mixin

test/fixtures/pug/template.html

@@ -0,0 +1 @@
+<span style="color: orange"><p>hello template</p></span><span style="color: blue"><p>hello template</p></span>

test/fixtures/pug/template.pug

@@ -0,0 +1,5 @@
+extends /pug/lib/template.pug
+block orange
+  p hello template
+block blue
+  p hello template

test/processors/pug.test.ts

@@ -1,14 +1,18 @@
 import { pug } from '../../src';
-import { getFixtureContent, preprocess } from '../utils';
+import { getFixtureContent, getFixturePath, preprocess } from '../utils';
 
-const EXPECTED_TEMPLATE = getFixtureContent('template.html');
+const EXPECTED = {
+  BASIC: getFixtureContent('pug/basic.html'),
+  MIXIN: getFixtureContent('pug/mixin.html'),
+  TEMPLATE: getFixtureContent('pug/template.html'),
+};
 
 describe(`processor - pug`, () => {
   it('should preprocess the whole file', async () => {
-    const template = getFixtureContent('template.pug');
+    const template = getFixtureContent('pug/basic.pug');
     const preprocessed = await preprocess(template, [pug()]);
 
-    expect(preprocessed.toString?.()).toContain(EXPECTED_TEMPLATE);
+    expect(preprocessed.toString?.()).toContain(EXPECTED.BASIC);
   });
 
   it('should support prepended data', async () => {
@@ -29,4 +33,20 @@ h1 HEY
 
     expect(preprocessed.toString?.()).toContain(`<h1>HEY</h1>`);
   });
+
+  it('should support mixins', async () => {
+    const template = getFixtureContent('pug/mixin.pug');
+    const options = { basedir: getFixturePath('.') };
+    const preprocessed = await preprocess(template, [pug(options)]);
+
+    expect(preprocessed.toString?.()).toContain(EXPECTED.MIXIN);
+  });
+
+  it('should support template inheritance', async () => {
+    const template = getFixtureContent('pug/template.pug');
+    const options = { basedir: getFixturePath('.') };
+    const preprocessed = await preprocess(template, [pug(options)]);
+
+    expect(preprocessed.toString?.()).toContain(EXPECTED.TEMPLATE);
+  });
 });