feat: 🎸 add "markupTagName" option

Allow to customize the <tag> that is used to look for markup content

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']

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) {

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(

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)
+    })
+  })
+})