Merge pull request #801 from maizzle/refactor-email-comb

src/transformers/index.js

@@ -52,7 +52,7 @@ exports.addURLParams = (html, config) => addURLParams(html, config, true)
 exports.preventWidows = (html, config) => preventWidows(html, config)
 exports.replaceStrings = (html, config) => replaceStrings(html, config, true)
 exports.safeClassNames = (html, config) => safeClassNames(html, config, true)
-exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config, true)
+exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config)
 exports.removeAttributes = (html, config) => removeAttributes(html, config, true)
 exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)
 exports.removeInlineSizes = (html, config) => removeInlineSizes(html, config, true)

src/transformers/removeUnusedCss.js

@@ -1,13 +1,11 @@
 const {comb} = require('email-comb')
-const {get, isEmpty} = require('lodash')
+const {get, merge} = require('lodash')
 
-module.exports = async (html, config = {}, direct = false) => {
+module.exports = async (html, config = {}) => {
   if (get(config, 'removeUnusedCSS') === false) {
     return html
   }
 
-  const options = direct ? config : get(config, 'removeUnusedCSS', {})
-
   const safelist = [
     '*body*', // Gmail
     '.gmail*', // Gmail
@@ -26,15 +24,17 @@ module.exports = async (html, config = {}, direct = false) => {
     '.lang*' // Fenced code blocks
   ]
 
-  if (typeof options === 'boolean' && options) {
-    return comb(html, {whitelist: safelist}).result
+  const defaultOptions = {
+    backend: [
+      {heads: '{{', tails: '}}'},
+      {heads: '{%', tails: '%}'}
+    ],
+    whitelist: [...get(config, 'whitelist', []), ...safelist]
   }
 
-  if (!isEmpty(options)) {
-    options.whitelist = [...get(options, 'whitelist', []), ...safelist]
-
-    return comb(html, options).result
-  }
+  const options = typeof config === 'boolean' && config ?
+    defaultOptions :
+    merge(defaultOptions, get(config, 'removeUnusedCSS', config))
 
-  return html
+  return comb(html, options).result
 }

test/fixtures/posthtml/component.html

@@ -5,7 +5,7 @@
     "foo": "bar"
   }'
 >
-Variable from page: [[ page.env ]]
+<p>Variable from page: [[ page.env ]]</p>
 
   <component
     src="test/stubs/components/component.html"
@@ -14,6 +14,6 @@
       "foo": "bar (nested)"
     }'
   >
-Variable from page (nested): [[ page.env ]]
+<p>Variable from page (nested): [[ page.env ]]</p>
   </component>
 </component>

test/stubs/breaking/bad.html

@@ -1,5 +1,5 @@
 ---
-title: [THIS] should break
+title: [THIS] should break the build
 ---
 
-<div>{{ page.title }}</div>
+<div class="inline">{{ page.title }}</div>

test/stubs/components/component.html

@@ -1,5 +1,5 @@
-Variable from attribute: [[ text ]]
+<p>Variable from attribute: [[ text ]]</p>
 
-Variable from locals attribute: [[ foo ]]
+<p>Variable from locals attribute: [[ foo ]]</p>
 
 <content></content>

test/stubs/events/before-create.html

@@ -1 +1 @@
-Foo is {{ page.foo }}
+<div class="inline">Foo is {{ page.foo }}</div>

test/stubs/templates/1.html

@@ -1 +1 @@
-html
+<div class="inline">html</div>

test/stubs/templates/2.html

@@ -0,0 +1 @@
+<div class="inline">html modified</div>

test/stubs/templates/2.test

@@ -1 +1 @@
-test
+test

test/test-posthtml.js

@@ -1,17 +1,7 @@
 const test = require('ava')
-const Maizzle = require('../src')
+const {render} = 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)
+const renderString = (string, options = {}) => render(string, options).then(({html}) => html)
 
 test('layouts', async t => {
   const source = `---
@@ -58,7 +48,7 @@ test('components', async t => {
     "foo": "bar"
   }'
 >
-Variable from page: [[ page.env ]]
+<p class="hidden">Variable from page: [[ page.env ]]</p>
 
   <component
     src="test/stubs/components/component.html"
@@ -67,7 +57,7 @@ Variable from page: [[ page.env ]]
       "foo": "bar (nested)"
     }'
   >
-Variable from page (nested): [[ page.env ]]
+<p>Variable from page (nested): [[ page.env ]]</p>
   </component>
 </component>`
 
@@ -86,23 +76,23 @@ Variable from page (nested): [[ page.env ]]
 
   const html = await renderString(source, options)
 
-  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`)
+  t.is(html.trim(), `<p>Variable from attribute: Example</p>
+<p>Variable from locals attribute: bar</p><p class="hidden">Variable from page: prod</p>
+  <p>Variable from attribute: Nested component</p>
+<p>Variable from locals attribute: bar (nested)</p><p>Variable from page (nested): prod</p>`)
 })
 
 test('fetch component', async t => {
-  const source = await fixture('posthtml/fetch')
+  const source = `<extends src="test/stubs/layouts/basic.html">
+  <block name="template">
+    <fetch url="test/stubs/data.json">
+      <each loop="user in response">
+[[ user.name + (loop.last ? '' : ', ') ]]
+      </each>
+    </fetch>
+  </block>
+</extends>`
+
   const options = {
     maizzle: {
       env: 'maizzle-ci',
@@ -116,8 +106,7 @@ test('fetch component', async t => {
     }
   }
 
-  let html = await renderString(source, options)
-  html = html.replace(/[^\S\r\n]+$/gm, '')
+  const html = await renderString(source, options)
 
-  t.is(html.trim(), await expected('posthtml/fetch'))
+  t.is(html.trim(), 'Leanne Graham, Ervin Howell, Clementine Bauch')
 })

test/test-tailwindcss.js

@@ -3,7 +3,7 @@ const Tailwind = require('../src/generators/tailwindcss')
 
 test('throws on compile error', async t => {
   await t.throwsAsync(async () => {
-    await Tailwind.compile('.test {@apply inexistent;}', '<div class="test">Test</a>', {}, {})
+    await Tailwind.compile('div {@apply inexistent;}', '<div class="inline">Test</a>', {}, {})
   }, {instanceOf: SyntaxError})
 })
 
@@ -51,7 +51,7 @@ test('works with custom `content` sources', async t => {
 test('works with custom `files` sources', async t => {
   const css = await Tailwind.compile(
     '@tailwind utilities;',
-    '<div></div>',
+    '<div class="inline"></div>',
     {
       content: {
         files: ['./test/stubs/tailwind/*.*']
@@ -65,7 +65,7 @@ test('works with custom `files` sources', async t => {
 test('uses maizzle template path as content source', async t => {
   const css = await Tailwind.compile(
     '@tailwind utilities;',
-    '<div></div>',
+    '<div class="inline"></div>',
     {},
     {
       build: {
@@ -82,7 +82,7 @@ test('uses maizzle template path as content source', async t => {
 test('uses maizzle template path as content source (single file)', async t => {
   const css = await Tailwind.compile(
     '@tailwind utilities;',
-    '<div></div>',
+    '<div class="inline"></div>',
     {},
     {
       build: {
@@ -108,8 +108,8 @@ test('uses custom postcss plugins from the maizzle config', async t => {
     }
   }
 
-  const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
+  const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test inline">Test</a>', {}, maizzleConfig)
 
   t.not(css, undefined)
-  t.is(css.trim(), '.test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
+  t.is(css.trim(), '.inline {display: inline !important} .test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
 })