@maizzle/framework 4.1.2 → 4.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.1.2",
+  "version": "4.2.1",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "scripts": {
-    "test": "c8 ava -s",
+    "test": "c8 ava",
     "pretest": "xo",
     "style": "xo",
     "release": "np"

package/src/generators/output/to-disk.js

@@ -3,7 +3,6 @@ const fs = require('fs-extra')
 const glob = require('glob-promise')
 const {get, isEmpty, merge} = require('lodash')
 const {asyncForEach} = require('../../utils/helpers')
-const removePlaintextTags = require('../../transformers/plaintext')
 
 const Config = require('../config')
 const Tailwind = require('../tailwindcss')
@@ -27,9 +26,9 @@ module.exports = async (env, spinner, config) => {
   const parsed = []
   let files = []
 
-  const css = (typeof get(config, 'tailwind.compiled') === 'string')
-    ? config.tailwind.compiled
-    : await Tailwind.compile('', '', {}, config, spinner)
+  const css = (typeof get(config, 'build.tailwind.compiled') === 'string')
+    ? config.build.tailwind.compiled
+    : await Tailwind.compile('', '', {}, config)
 
   // Parse each template config object
   await asyncForEach(templatesConfig, async templateConfig => {
@@ -104,6 +103,7 @@ module.exports = async (env, spinner, config) => {
 
             try {
               const compiled = await render(html, {
+                useFileConfig: true,
                 maizzle: {
                   ...config,
                   env
@@ -123,7 +123,8 @@ module.exports = async (env, spinner, config) => {
                * tags from the markup before outputting the file.
                */
 
-              const plaintextConfig = get(templateConfig, 'plaintext')
+              // Check if plaintext: true globally, fallback to template's front matter
+              const plaintextConfig = get(templateConfig, 'plaintext', get(compiled.config, 'plaintext', false))
               const plaintextPath = get(plaintextConfig, 'destination.path', config.permalink || file)
 
               if (Boolean(plaintextConfig) || !isEmpty(plaintextConfig)) {
@@ -133,11 +134,12 @@ module.exports = async (env, spinner, config) => {
                     plaintextPath,
                     merge(plaintextConfig, {filepath: file})
                   )
-                  .then(({plaintext, destination}) => fs.outputFile(destination, plaintext))
+                  .then(async ({html, plaintext, destination}) => {
+                    compiled.html = html
+                    await fs.outputFile(destination, plaintext)
+                  })
               }
 
-              compiled.html = removePlaintextTags(compiled.html, config)
-
               /**
                * Output file
                */

package/src/generators/output/to-string.js

@@ -17,7 +17,9 @@ module.exports = async (html, options) => {
     throw new RangeError('received empty string')
   }
 
-  const fileConfig = await Config.getMerged(process.env.NODE_ENV)
+  const fileConfig = get(options, 'useFileConfig')
+    ? await Config.getMerged(process.env.NODE_ENV)
+    : {}
 
   let config = merge(fileConfig, get(options, 'maizzle', {}))
 

package/src/generators/plaintext.js

@@ -1,49 +1,84 @@
 const path = require('path')
 const {get} = require('lodash')
+const posthtml = require('posthtml')
 const {stripHtml} = require('string-strip-html')
 
-module.exports.generate = async (html, destination, config) => {
-  const configDestinationPath = get(config, 'destination.path')
-  const extension = get(config, 'destination.extension', 'txt')
+const self = {
+  handleCustomTags: (html, config = {}) => {
+    const posthtmlOptions = get(config, 'build.posthtml.options', {})
 
-  const plaintext = stripHtml(html, {
-    dumpLinkHrefsNearby: {
-      enabled: true
-    },
-    ...get(config, 'options', {})
-  }).result
+    const posthtmlPlugin = () => tree => {
+      const process = node => {
+        if (node.tag === 'plaintext') {
+          return {
+            tag: false,
+            content: ['']
+          }
+        }
 
-  // If we set plaintext.destination.path in config/fm
-  if (configDestinationPath) {
-    /**
-     * Using a file path will generate a single plaintext file,
-     * no matter how many templates there are.
-     *
-     * It will be based on the last-processed template.
-     */
-    if (path.extname(configDestinationPath)) {
-      destination = configDestinationPath
+        if (node.tag === 'not-plaintext') {
+          return {
+            tag: false,
+            content: tree.render(node.content)
+          }
+        }
+
+        return node
+      }
+
+      return tree.walk(process)
+    }
+
+    return posthtml([posthtmlPlugin()]).process(html, {...posthtmlOptions, sync: true}).html
+  },
+  generate: async (html, destination, config) => {
+    const configDestinationPath = get(config, 'destination.path')
+    const extension = get(config, 'destination.extension', 'txt')
+
+    const plaintext = stripHtml(html, {
+      dumpLinkHrefsNearby: {
+        enabled: true
+      },
+      stripTogetherWithTheirContents: ['script', 'style', 'xml', 'not-plaintext'],
+      ...get(config, 'options', {})
+    }).result
+
+    html = self.handleCustomTags(html, config)
 
-      return {plaintext, destination}
+    // If we set plaintext.destination.path in config/fm
+    if (configDestinationPath) {
+      /**
+       * Using a file path will generate a single plaintext file,
+       * no matter how many templates there are.
+       *
+       * It will be based on the last-processed template.
+       */
+      if (path.extname(configDestinationPath)) {
+        destination = configDestinationPath
+
+        return {html, plaintext, destination}
+      }
+
+      /**
+       * Using a directory-like path for plaintext.destination.path
+       */
+      destination = path.join(configDestinationPath, path.basename(config.filepath, path.extname(config.filepath)) + '.' + extension)
+
+      return {html, plaintext, destination}
     }
 
     /**
-     * Using a directory-like path for plaintext.destination.path
+     * Use template's `permalink` Front Matter key,
+     * fall back to the original `destination`.
      */
-    destination = path.join(configDestinationPath, path.basename(config.filepath, path.extname(config.filepath)) + '.' + extension)
-
-    return {plaintext, destination}
-  }
+    destination = get(config, 'permalink', destination)
 
-  /**
-   * Use template's `permalink` Front Matter key,
-   * fall back to the original `destination`.
-   */
-  destination = get(config, 'permalink', destination)
+    if (typeof destination === 'string') {
+      destination = path.join(path.dirname(destination), path.basename(destination, path.extname(destination)) + '.' + extension)
+    }
 
-  if (typeof destination === 'string') {
-    destination = path.join(path.dirname(destination), path.basename(destination, path.extname(destination)) + '.' + extension)
+    return {html, plaintext, destination}
   }
-
-  return {plaintext, destination}
 }
+
+module.exports = self

package/src/generators/postcss.js

@@ -1,4 +1,3 @@
-const path = require('path')
 const {get} = require('lodash')
 const postcss = require('postcss')
 const postcssImport = require('postcss-import')
@@ -6,11 +5,9 @@ const postcssNested = require('tailwindcss/nesting')
 const mergeLonghand = require('postcss-merge-longhand')
 
 module.exports = {
-  process: async (css = '', maizzleConfig = {}, spinner = null) => {
-    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
-
+  process: async (css = '', maizzleConfig = {}) => {
     return postcss([
-      postcssImport({path: path.dirname(userFilePath)}),
+      postcssImport(),
       postcssNested(),
       maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
       ...get(maizzleConfig, 'build.postcss.plugins', [])
@@ -18,12 +15,7 @@ module.exports = {
       .process(css, {from: undefined})
       .then(result => result.css)
       .catch(error => {
-        console.error(error)
-        if (spinner) {
-          spinner.stop()
-        }
-
-        throw new Error(`PostCSS processing failed`)
+        throw new SyntaxError(error)
       })
   }
 }

package/src/generators/posthtml.js

@@ -47,6 +47,7 @@ module.exports = async (html, config) => {
       )
     ),
     modules({
+      expressions: expressionsOptions,
       parser: posthtmlOptions,
       attributeAsLocals: true,
       from: modulesFrom,

package/src/generators/tailwindcss.js

@@ -9,7 +9,7 @@ const mergeLonghand = require('postcss-merge-longhand')
 const {get, isObject, isEmpty, merge} = require('lodash')
 
 module.exports = {
-  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}, spinner = null) => {
+  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}) => {
     tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
 
     // Compute the Tailwind config to use
@@ -89,28 +89,27 @@ module.exports = {
     const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
     const userFileExists = await fs.pathExists(userFilePath)
 
+    const toProcess = [
+      postcssNested(),
+      tailwindcss(config),
+      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
+      ...get(maizzleConfig, 'build.postcss.plugins', [])
+    ]
+
     if (userFileExists) {
       css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
+      toProcess.unshift(
+        postcssImport({path: path.dirname(userFilePath)})
+      )
     } else {
-      css = `@import "tailwindcss/components"; @import "tailwindcss/utilities"; ${css}`
+      css = `@tailwind components; @tailwind utilities; ${css}`
     }
 
-    return postcss([
-      postcssImport({path: path.dirname(userFilePath)}),
-      postcssNested(),
-      tailwindcss(config),
-      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
-      ...get(maizzleConfig, 'build.postcss.plugins', [])
-    ])
+    return postcss([...toProcess])
       .process(css, {from: undefined})
       .then(result => result.css)
       .catch(error => {
-        console.error(error)
-        if (spinner) {
-          spinner.stop()
-        }
-
-        throw new Error(`Tailwind CSS compilation failed`)
+        throw new SyntaxError(error)
       })
   }
 }

package/src/transformers/attributeToStyle.js

@@ -19,7 +19,7 @@ module.exports = async (html, config = {}, direct = false) => {
       attributesToStyle({
         attributes: Array.isArray(config) ? config : []
       })
-    ]).process(html).then(result => result.html)
+    ]).process(html, posthtmlOptions).then(result => result.html)
   }
 
   return html
@@ -32,54 +32,54 @@ const attributesToStyle = (options = {}) => tree => {
     const nodeAttributes = parseAttrs(node.attrs)
     const matches = intersection(keys(nodeAttributes), options.attributes)
     const nodeStyle = get(node.attrs, 'style')
-    const csstoInline = []
+    const cssToInline = []
 
     forEach(matches, attribute => {
       let value = get(node.attrs, attribute)
 
       switch (attribute) {
         case 'bgcolor':
-          csstoInline.push(`background-color: ${value}`)
+          cssToInline.push(`background-color: ${value}`)
           break
 
         case 'background':
-          csstoInline.push(`background-image: url('${value}')`)
+          cssToInline.push(`background-image: url('${value}')`)
           break
 
         case 'width':
           value = Number.parseInt(value, 10) + (value.match(/px|%/) || 'px')
-          csstoInline.push(`width: ${value}`)
+          cssToInline.push(`width: ${value}`)
           break
 
         case 'height':
           value = Number.parseInt(value, 10) + (value.match(/px|%/) || 'px')
-          csstoInline.push(`height: ${value}`)
+          cssToInline.push(`height: ${value}`)
           break
 
         case 'align':
           if (node.tag !== 'table') {
-            return csstoInline.push(`text-align: ${value}`)
+            return cssToInline.push(`text-align: ${value}`)
           }
 
           if (['left', 'right'].includes(value)) {
-            csstoInline.push(`float: ${value}`)
+            cssToInline.push(`float: ${value}`)
           }
 
           if (value === 'center') {
-            csstoInline.push('margin-left: auto', 'margin-right: auto')
+            cssToInline.push('margin-left: auto', 'margin-right: auto')
           }
 
           break
 
         case 'valign':
-          csstoInline.push(`vertical-align: ${value}`)
+          cssToInline.push(`vertical-align: ${value}`)
           break
 
         // No default
       }
     })
 
-    nodeAttributes.style = nodeStyle ? `${nodeStyle} ${csstoInline.join('; ')}` : `${csstoInline.join('; ')}`
+    nodeAttributes.style = nodeStyle ? `${nodeStyle} ${cssToInline.join('; ')}` : `${cssToInline.join('; ')}`
 
     node.attrs = nodeAttributes.compose()
 

package/src/transformers/posthtmlMso.js

@@ -6,5 +6,5 @@ module.exports = async (html, config) => {
   const outlookOptions = get(config, 'build.posthtml.outlook', {})
   const posthtmlOptions = get(config, 'build.posthtml.options', {})
 
-  return posthtml([outlook({...outlookOptions})]).process(html, {...posthtmlOptions}).then(result => result.html)
+  return posthtml([outlook({...outlookOptions})]).process(html, posthtmlOptions).then(result => result.html)
 }

package/src/transformers/urlParameters.js

@@ -6,11 +6,11 @@ module.exports = async (html, config = {}, direct = false) => {
   const urlParameters = direct ? config : get(config, 'urlParameters', {})
 
   if (!isEmpty(urlParameters)) {
-    const {_options, ...parameters} = urlParameters
-    const tags = _options.tags ?? ['a']
-    const strict = _options.strict ?? true
-    const qs = _options.qs ?? {encode: false}
     const posthtmlOptions = get(config, 'build.posthtml.options', {})
+    const {_options, ...parameters} = urlParameters
+    const tags = get(_options, 'tags', ['a'])
+    const strict = get(_options, 'strict', true)
+    const qs = get(_options, 'qs', {encode: false})
 
     return posthtml([urlParams({parameters, tags, qs, strict})]).process(html, posthtmlOptions).then(result => result.html)
   }

package/test/stubs/plaintext/front-matter.html

@@ -0,0 +1,9 @@
+---
+plaintext: true
+---
+
+<div>Show in HTML</div>
+<plaintext>Show in plaintext</plaintext>
+<not-plaintext>
+  <table><tr><td>Remove from plaintext</td></tr></table>
+</not-plaintext>

package/test/stubs/plaintext/plaintext.html

@@ -1,2 +1,5 @@
 <div>Show in HTML</div>
 <plaintext>Show in plaintext</plaintext>
+<not-plaintext>
+  <table><tr><td>Remove from plaintext</td></tr></table>
+</not-plaintext>

package/test/test-postcss.js

@@ -4,5 +4,5 @@ const PostCSS = require('../src/generators/postcss')
 test('throws on processing error', async t => {
   await t.throwsAsync(async () => {
     await PostCSS.process(null, {})
-  }, {instanceOf: Error, message: 'PostCSS processing failed'})
+  }, {instanceOf: SyntaxError})
 })

package/test/test-posthtml.js

@@ -14,27 +14,66 @@ const expected = file => readFile('expected', file)
 const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html)
 
 test('layouts', async t => {
-  const source = await fixture('posthtml/layout')
+  const source = `---
+greeting: Hello
+---
 
-  const html = await renderString(source, {maizzle: {env: 'maizzle-ci'}})
+<extends src="test/stubs/layouts/basic.html">
+  <block name="template">
+    Front matter variable: {{ page.greeting }}
+  </block>
+</extends>`
 
-  t.is(html.trim(), await expected('posthtml/layout'))
+  const html = await renderString(source, {
+    maizzle: {
+      greeting: 'Hello'
+    }
+  })
+
+  t.is(html.trim(), `Front matter variable: Hello`)
 })
 
 test('inheritance when extending a template', async t => {
-  const source = await fixture('posthtml/extend-template')
+  const source = `---
+template: second
+---
+
+<extends src="test/stubs/template.html">
+  <block name="button">Child in second.html</block>
+</extends>`
+
   let html = await renderString(source)
 
   html = html.replace(/[^\S\r\n]+$/gm, '').trim()
 
-  t.is(html, await expected('posthtml/extend-template'))
+  t.is(html, `Parent
+    Child in second.html`)
 })
 
 test('components', async t => {
-  const source = await fixture('posthtml/component')
+  const source = `<component
+  src="test/stubs/components/component.html"
+  text="Example"
+  locals='{
+    "foo": "bar"
+  }'
+>
+Variable from page: [[ page.env ]]
+
+  <component
+    src="test/stubs/components/component.html"
+    text="Nested component"
+    locals='{
+      "foo": "bar (nested)"
+    }'
+  >
+Variable from page (nested): [[ page.env ]]
+  </component>
+</component>`
+
   const options = {
     maizzle: {
-      env: 'maizzle-ci',
+      env: 'prod',
       build: {
         components: {
           expressions: {
@@ -47,7 +86,19 @@ test('components', async t => {
 
   const html = await renderString(source, options)
 
-  t.is(html.trim(), await expected('posthtml/component'))
+  t.is(html.trim(), `Variable from attribute: Example
+
+Variable from locals attribute: bar
+
+
+Variable from page: prod
+
+  Variable from attribute: Nested component
+
+Variable from locals attribute: bar (nested)
+
+
+Variable from page (nested): prod`)
 })
 
 test('fetch component', async t => {

package/test/test-tailwindcss.js

@@ -1,12 +1,10 @@
 const test = require('ava')
-const ora = require('ora')
 const Tailwind = require('../src/generators/tailwindcss')
 
 test('throws on compile error', async t => {
   await t.throwsAsync(async () => {
-    const spinner = ora('Compiling Tailwind CSS...').start()
-    await Tailwind.compile('.test {@apply inexistent;}', '<div class="test">Test</a>', {}, {}, spinner)
-  }, {instanceOf: Error, message: 'Tailwind CSS compilation failed'})
+    await Tailwind.compile('.test {@apply inexistent;}', '<div class="test">Test</a>', {}, {})
+  }, {instanceOf: SyntaxError})
 })
 
 test('uses defaults if no config specified', async t => {

package/test/test-todisk.js

@@ -94,7 +94,7 @@ test('outputs files at the correct location if multiple template sources are use
   })
 
   t.true(await fs.pathExists(t.context.folder))
-  t.is(files.length, 3)
+  t.is(files.length, 5)
 })
 
 test('copies all files in the `filetypes` option to destination', async t => {
@@ -154,23 +154,49 @@ test('outputs plaintext files', async t => {
           path: t.context.folder
         },
         plaintext: true
-      },
-      tailwind: {
-        config: {
-          purge: false
+      }
+    },
+    extraAttributes: false
+  })
+
+  t.true(files.includes(`${t.context.folder}/plaintext.txt`))
+
+  t.is(
+    await fs.readFile(`${t.context.folder}/plaintext.txt`, 'utf8'),
+    'Show in HTML\nShow in plaintext'
+  )
+
+  t.is(
+    await fs.readFile(`${t.context.folder}/plaintext.html`, 'utf8'),
+    '<div>Show in HTML</div>\n\n\n  <table><tr><td>Remove from plaintext</td></tr></table>\n\n'
+  )
+})
+
+test('outputs plaintext files (front matter)', async t => {
+  const {files} = await Maizzle.build('maizzle-ci', {
+    fail: 'silent',
+    build: {
+      templates: {
+        source: 'test/stubs/plaintext',
+        destination: {
+          path: t.context.folder
         }
       }
-    }
+    },
+    extraAttributes: false
   })
 
-  const plaintext = files.filter(file => file.includes('.txt'))
-  const html = files.filter(file => file.includes('.html'))
-  const plaintextContent = await fs.readFile(plaintext[0], 'utf8')
-  const htmlContent = await fs.readFile(html[0], 'utf8')
+  t.true(files.includes(`${t.context.folder}/front-matter.txt`))
+
+  t.is(
+    await fs.readFile(`${t.context.folder}/front-matter.txt`, 'utf8'),
+    'Show in HTML\nShow in plaintext'
+  )
 
-  t.is(plaintext[0], `${t.context.folder}/plaintext.txt`)
-  t.is(plaintextContent, 'Show in HTML\nShow in plaintext')
-  t.is(htmlContent, '<div>Show in HTML</div>\n\n')
+  t.is(
+    await fs.readFile(`${t.context.folder}/front-matter.html`, 'utf8'),
+    '<div>Show in HTML</div>\n\n\n  <table><tr><td>Remove from plaintext</td></tr></table>\n\n'
+  )
 })
 
 test('outputs plaintext files (custom path)', async t => {
@@ -187,18 +213,11 @@ test('outputs plaintext files (custom path)', async t => {
             path: `${t.context.folder}/nested/plain.text`
           }
         }
-      },
-      tailwind: {
-        config: {
-          purge: false
-        }
       }
     }
   })
 
-  const plaintext = files.filter(file => file.includes('.text'))
-
-  t.is(plaintext[0], `${t.context.folder}/nested/plain.text`)
+  t.true(files.includes(`${t.context.folder}/nested/plain.text`))
 })
 
 test('renders plaintext string', async t => {
@@ -382,24 +401,6 @@ test('warns if a template cannot be rendered and `fail` option is `silent`', asy
   t.false(files.includes('empty.html'))
 })
 
-test('spins up local development server', async t => {
-  await Maizzle.serve('local', {
-    build: {
-      browsersync: {
-        ui: false
-      },
-      templates: {
-        source: 'test/stubs/templates',
-        destination: {
-          path: t.context.folder
-        }
-      }
-    }
-  })
-
-  t.true(await fs.pathExists(t.context.folder))
-})
-
 test('local server does not compile unwanted file types', async t => {
   await Maizzle.serve('local', {
     build: {

package/test/test-tostring.js

@@ -1,32 +1,18 @@
 const test = require('ava')
 const Maizzle = require('../src')
 
-const path = require('path')
-const fs = require('fs')
-
-const readFile = (dir, filename) => fs.promises
-  .readFile(path.join(__dirname, dir, `${filename}.html`), 'utf8')
-  .then(html => html.trim())
-
-const fixture = file => readFile('fixtures', file)
-const expected = file => readFile('expected', file)
-
 const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html)
 
-test('compiles HTML string if no options are passed', async t => {
-  const source = await fixture('basic')
-
-  const html = await renderString(source)
-
-  t.is(html, source)
-})
-
 test('uses environment config file(s) if available', async t => {
-  const source = await fixture('useConfig')
+  const source = `<div>{{ page.mail }}</div>`
 
-  const html = await renderString(source, {maizzle: {env: 'maizzle-ci'}})
+  const html = await renderString(source, {
+    maizzle: {
+      mail: 'puzzle'
+    }
+  })
 
-  t.is(html, await expected('useConfig'))
+  t.is(html, '<div>puzzle</div>')
 })
 
 test('throws if first argument is not an HTML string', async t => {
@@ -129,7 +115,28 @@ test('prevents overwriting page object', async t => {
 })
 
 test('preserves css in marked style tags (tailwindcss)', async t => {
-  const source = await fixture('transformers/preserve-transform-css')
+  const source = `<html>
+    <head>
+      <style tailwindcss preserve>
+        div {
+          @apply uppercase;
+        }
+        [data-ogsc] .inexistent {
+          color: #ef4444;
+        }
+        div > u + .body .gmail-android-block {
+          display: block !important;
+        }
+        u + #body a {
+          color: inherit;
+        }
+      </style>
+    </head>
+    <body>
+      <div>test</div>
+    </body>
+  </html>`
+
   const html = await renderString(source, {
     // So that we don't compile twice
     tailwind: {
@@ -137,12 +144,16 @@ test('preserves css in marked style tags (tailwindcss)', async t => {
     }
   })
 
-  t.is(html, await expected('transformers/preserve-transform-css'))
+  t.true(html.includes('[data-ogsc] .inexistent'))
+  t.true(html.includes('div > u + .body .gmail-android-block'))
+  t.true(html.includes('u + #body a'))
 })
 
 test('@import css files in marked style tags', async t => {
-  const source = await fixture('transformers/atimport-in-style')
+  const source = `<style postcss>@import "test/stubs/post.css";</style>`
   const html = await renderString(source)
 
-  t.is(html, await expected('transformers/atimport-in-style'))
+  t.is(html, `<style>div {
+  margin: 1px 2px 3px 4px;
+}</style>`)
 })

package/test/test-transformers.js

@@ -1,6 +1,5 @@
 const test = require('ava')
 const Maizzle = require('../src')
-const removePlaintextTags = require('../src/transformers/plaintext')
 
 const path = require('path')
 const fs = require('fs')
@@ -232,13 +231,6 @@ test('minify (disabled)', async t => {
   t.is(html, '<div>\n\n<p>\n\ntest</p></div>')
 })
 
-test('removes plaintext tag', t => {
-  let html = removePlaintextTags('<plaintext>Removed</plaintext><div>Preserved</div>')
-  html = html.replace(/[^\S\r\n]+$/gm, '').trim()
-
-  t.is(html, '<div>Preserved</div>')
-})
-
 test('replace strings', async t => {
   const html = await Maizzle.replaceStrings('initial text', {initial: 'updated'})
 
@@ -295,48 +287,54 @@ test('filters (tailwindcss)', async t => {
     </style>`
   )
 
-  const expected = `<style>.inline { display: inline !important
-} .table { display: table !important
-} .contents { display: contents !important
-} .hidden { display: none !important
-} .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important
-} .uppercase { text-transform: uppercase !important
-} .lowercase { text-transform: lowercase !important
-} .capitalize { text-transform: capitalize !important
-} div { display: none
-}
-    </style>`
-
-  t.is(html, expected)
+  t.true(html.replace(/\s/g, '').includes(`div{display:none}`))
 })
 
 test('filters (postcss)', async t => {
   const html = await Maizzle.withFilters(
-    `<style postcss>@import 'test/stubs/post.css';</style>`
+    `<style postcss>
+      div {
+        margin-top: 1px;
+        margin-right: 2px;
+        margin-bottom: 3px;
+        margin-left: 4px;
+      }
+    </style>`
   )
 
-  const expected = `<style>div {
-  margin: 1px 2px 3px 4px;
-}</style>`
-
-  t.is(html, expected)
+  t.is(html.replace(/\n {2,}/g, ''), '<style>div {margin: 1px 2px 3px 4px;}</style>')
 })
 
 test('url parameters', async t => {
-  const html = await Maizzle.addURLParams(
+  const simple = await Maizzle.addURLParams(
+    `<a href="https://example.com">test</a>
+      <link href="https://foo.bar">`,
+    {
+      bar: 'baz',
+      qix: 'qux'
+    }
+  )
+
+  const withOptions = await Maizzle.addURLParams(
     `<a href="example.com">test</a>
       <link href="https://foo.bar">`,
     {
       _options: {
         tags: ['a[href*="example"]'],
-        strict: false
+        strict: false,
+        qs: {
+          encode: true
+        }
       },
-      bar: 'baz',
-      qix: 'qux'
+      foo: '@Bar@',
+      bar: 'baz'
     }
   )
 
-  t.is(html, `<a href="example.com?bar=baz&qix=qux">test</a>
+  t.is(simple, `<a href="https://example.com?bar=baz&qix=qux">test</a>
+      <link href="https://foo.bar">`)
+
+  t.is(withOptions, `<a href="example.com?bar=baz&foo=%40Bar%40">test</a>
       <link href="https://foo.bar">`)
 })
 

package/src/transformers/plaintext.js

@@ -1,23 +0,0 @@
-const {get} = require('lodash')
-const posthtml = require('posthtml')
-
-module.exports = (html, config = {}) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  return posthtml([plaintext()]).process(html, {...posthtmlOptions, sync: true}).html
-}
-
-const plaintext = () => tree => {
-  const process = node => {
-    if (node.tag === 'plaintext') {
-      return {
-        tag: false,
-        content: ['']
-      }
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}

package/test/expected/posthtml/extend-template.html

@@ -1,2 +0,0 @@
-Parent
-    Child in second.html

package/test/expected/posthtml/layout.html

@@ -1,3 +0,0 @@
-    Environment: maizzle-ci
-
-    Front matter variable: Hello

package/test/expected/transformers/atimport-in-style.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <style>div {
-  margin-top: 1px;
-  margin-right: 2px;
-  margin-bottom: 3px;
-  margin-left: 4px;
-}
-    </style>
-  </head>
-  <body>
-    <div>test</div>
-  </body>
-</html>

package/test/expected/transformers/preserve-transform-css.html

@@ -1,36 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <style data-embed="">.block {
-        display: block !important;
-} .inline {
-        display: inline !important;
-} .table {
-        display: table !important;
-} .contents {
-        display: contents !important;
-} .truncate {
-        overflow: hidden !important;
-        text-overflow: ellipsis !important;
-        white-space: nowrap !important;
-} .uppercase {
-        text-transform: uppercase !important;
-} .lowercase {
-        text-transform: lowercase !important;
-} .capitalize {
-        text-transform: capitalize !important;
-} div {
-        text-transform: uppercase;
-} [data-ogsc] .inexistent {
-        color: #ef4444;
-      } div > u + .body .gmail-android-block {
-        display: block !important;
-      } u + #body a {
-        color: inherit;
-      }
-    </style>
-  </head>
-  <body>
-    <div>test</div>
-  </body>
-</html>

package/test/expected/useConfig.html

@@ -1,9 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>test></title>
-  </head>
-  <body>
-    <div>build_production</div>
-  </body>
-</html>

package/test/fixtures/posthtml/extend-template.html

@@ -1,7 +0,0 @@
----
-template: second
----
-
-<extends src="test/stubs/template.html">
-  <block name="button">Child in second.html</block>
-</extends>

package/test/fixtures/posthtml/layout.html

@@ -1,11 +0,0 @@
----
-greeting: Hello
----
-
-<extends src="test/stubs/layouts/basic.html">
-  <block name="template">
-    Environment: {{ page.env }}
-
-    Front matter variable: {{ page.greeting }}
-  </block>
-</extends>

package/test/fixtures/transformers/atimport-in-style.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <style postcss>
-      @import "test/stubs/post.css";
-    </style>
-  </head>
-  <body>
-    <div>test</div>
-  </body>
-</html>

package/test/fixtures/transformers/preserve-transform-css.html

@@ -1,25 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <style tailwindcss preserve>
-      div {
-        @apply uppercase;
-      }
-
-      [data-ogsc] .inexistent {
-        color: #ef4444;
-      }
-
-      div > u + .body .gmail-android-block {
-        display: block !important;
-      }
-
-      u + #body a {
-        color: inherit;
-      }
-    </style>
-  </head>
-  <body>
-    <div>test</div>
-  </body>
-</html>

package/test/fixtures/useConfig.html

@@ -1,9 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>test></title>
-  </head>
-  <body>
-    <div>{{ page.build.templates.destination.path }}</div>
-  </body>
-</html>