From 746d2abbaaf072d3fac29cc2d2c0f61fa28d58e8 Mon Sep 17 00:00:00 2001
From: Christian Kaisermann <christian@kaisermann.me>
Date: Tue, 3 Sep 2019 16:41:18 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20"markupTagName"=20?=
 =?UTF-8?q?option?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Allow to customize the <tag> that is used to look for markup content
---
 README.md                       |  8 ++++++++
 src/autoProcess.js              | 17 ++++++++++++-----
 test/autoProcess/markup.test.js | 11 +++++++++++
 test/processors.test.js         | 13 +++++++++++++
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 36decdb7..b498bf65 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,8 @@ _Note: If you want to load your `postcss` configuration from a external file, ma
 
 ### Template tag support
 
+Add _vue-like_ support for defining your markup between a `<template>` tag. The tagname can be customized to something like `markup` for example. See [#options](#options).
+
 _Note: only for auto preprocessing_
 
 ```html
@@ -317,6 +319,12 @@ svelte.preprocess(input, [
 const svelte = require('svelte')
 const sveltePreprocess = require('svelte-preprocess')
 const options = {
+  /**
+   * Define which tag should `svelte-preprocess` look for markup content.
+   * This is only used if you desire to define your markup between this tag
+   * or to import it from a external file.
+   **/
+  markupTagName: 'template',
   /**
    * Extend the default language alias dictionary.
    * Each entry must follow: ['alias', 'languageName']
diff --git a/src/autoProcess.js b/src/autoProcess.js
index 818e2175..4e52e626 100644
--- a/src/autoProcess.js
+++ b/src/autoProcess.js
@@ -17,13 +17,20 @@ const ALIAS_OPTION_OVERRIDES = {
   },
 }
 
-const TEMPLATE_PATTERN = new RegExp(
-  `<template([\\s\\S]*?)>([\\s\\S]*?)<\\/template>`,
-)
+module.exports = ({
+  onBefore,
+  aliases,
+  markupTagName = 'template',
+  preserve = [],
+  ...rest
+} = {}) => {
+  markupTagName = markupTagName.toLocaleLowerCase()
 
-module.exports = ({ onBefore, aliases, preserve = [], ...rest } = {}) => {
   const optionsCache = {}
   const transformers = rest.transformers || rest
+  const markupPattern = new RegExp(
+    `<${markupTagName}([\\s\\S]*?)>([\\s\\S]*)<\\/${markupTagName}>`,
+  )
 
   const getTransformerOptions = (lang, alias) => {
     if (isFn(transformers[alias])) return transformers[alias]
@@ -97,7 +104,7 @@ module.exports = ({ onBefore, aliases, preserve = [], ...rest } = {}) => {
         content = await onBefore({ content, filename })
       }
 
-      const templateMatch = content.match(TEMPLATE_PATTERN)
+      const templateMatch = content.match(markupPattern)
 
       /** If no <template> was found, just return the original markup */
       if (!templateMatch) {
diff --git a/test/autoProcess/markup.test.js b/test/autoProcess/markup.test.js
index 297c3cc8..eda7e456 100644
--- a/test/autoProcess/markup.test.js
+++ b/test/autoProcess/markup.test.js
@@ -16,6 +16,17 @@ it('should transform HTML between <template></template>', async () => {
   )
 })
 
+it('should transform HTML between custom tag <markup></markup>', async () => {
+  const input = `<script></script><markup><div>Hey</div></markup><style></style>`
+  const preprocessed = await preprocess(
+    input,
+    getAutoPreprocess({ markupTagName: 'markup' }),
+  )
+  expect(preprocessed.toString()).toBe(
+    `<script></script>${EXPECTED_MARKUP}<style></style>`,
+  )
+})
+
 it('should transform a custom language between <template lang="..."></template>', async () => {
   const input = `<script></script><template lang="test"><div>Hey</div></template><style></style>`
   const preprocessed = await preprocess(
diff --git a/test/processors.test.js b/test/processors.test.js
index 34517eb0..a37e8d33 100644
--- a/test/processors.test.js
+++ b/test/processors.test.js
@@ -6,6 +6,7 @@ const {
   postcss,
   coffeescript,
   typescript,
+  pug,
 } = require('../src')
 const { CSS_PATTERN, getFixtureContent, preprocess } = require('./utils.js')
 
@@ -22,6 +23,7 @@ const SCRIPT_LANGS = [
   ['coffeescript', 'coffee', coffeescript],
   ['typescript', 'ts', typescript, { compilerOptions: { module: 'es2015' } }],
 ]
+const MARKUP_LANGS = [['pug', 'pug', pug]]
 
 STYLE_LANGS.forEach(([lang, ext, processor, options]) => {
   describe(`processor - ${lang}`, () => {
@@ -42,3 +44,14 @@ SCRIPT_LANGS.forEach(([lang, ext, processor, options]) => {
     })
   })
 })
+
+MARKUP_LANGS.forEach(([lang, ext, processor, options]) => {
+  const EXPECTED_TEMPLATE = getFixtureContent('template.html')
+  describe(`processor - ${lang}`, () => {
+    it('should preprocess the whole file', async () => {
+      const template = getFixtureContent('template.pug')
+      const preprocessed = await preprocess(template, [processor(options)])
+      expect(preprocessed.toString()).toContain(EXPECTED_TEMPLATE)
+    })
+  })
+})