@maizzle/framework 4.0.0-alpha.8 → 4.0.1

package/test/test-tostring.js

@@ -1,142 +1,148 @@
-const test = require('ava')
-const Maizzle = require('../src')
-
-const path = require('path')
-const {readFileSync} = require('fs')
-
-const fixture = file => readFileSync(path.join(__dirname, 'fixtures', `${file}.html`), 'utf8')
-const expected = file => readFileSync(path.join(__dirname, 'expected', `${file}.html`), 'utf8')
-
-const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html)
-
-test('compiles HTML string if no options are passed', async t => {
-  const source = fixture('basic')
-
-  const html = await renderString(source)
-
-  t.is(html, source)
-})
-
-test('uses environment config file(s) if available', async t => {
-  const source = fixture('useConfig')
-
-  const html = await renderString(source, {maizzle: {env: 'maizzle-ci'}})
-
-  t.is(html, expected('useConfig'))
-})
-
-test('throws if first argument is not an HTML string', async t => {
-  await t.throwsAsync(async () => {
-    await renderString()
-  }, {instanceOf: TypeError, message: 'first argument must be an HTML string, received undefined'})
-})
-
-test('throws if first argument is an empty string', async t => {
-  await t.throwsAsync(async () => {
-    await renderString('')
-  }, {instanceOf: RangeError, message: 'received empty string'})
-})
-
-test('runs the `beforeRender` event', async t => {
-  const html = await renderString(`<div>{{ page.foo }}</div>`, {
-    beforeRender(html, config) {
-      config.foo = 'bar'
-
-      return html
-    }
-  })
-
-  t.is(html, `<div>bar</div>`)
-})
-
-test('runs the `afterRender` event', async t => {
-  const result = await renderString(`<div>foo</div>`, {
-    afterRender(html, config) {
-      config.replaceStrings = {
-        foo: 'baz'
-      }
-
-      return html
-    }
-  })
-
-  t.is(result, `<div>baz</div>`)
-})
-
-test('runs the `afterTransformers` event', async t => {
-  const result = await renderString(`<div>foo</div>`, {
-    maizzle: {
-      title: 'bar'
-    },
-    afterTransformers(html, config) {
-      return html.replace('foo', config.title)
-    }
-  })
-
-  t.is(result, `<div>bar</div>`)
-})
-
-test('locals work when defined in all supported places', async t => {
-  const result = await renderString(`{{ page.one }}, {{ two }}, {{ three }}`, {
-    maizzle: {
-      one: 1,
-      build: {
-        posthtml: {
-          expressions: {
-            locals: {
-              two: 2
-            }
-          }
-        }
-      },
-      locals: {
-        three: 3
-      }
-    }
-  })
-
-  t.is(result, `1, 2, 3`)
-})
-
-test('prevents overwriting page object', async t => {
-  const result = await renderString(`{{ page.one }}, {{ two }}, {{ three }}`, {
-    maizzle: {
-      one: 1,
-      build: {
-        posthtml: {
-          expressions: {
-            locals: {
-              page: {
-                two: 2
-              }
-            }
-          }
-        }
-      },
-      locals: {
-        page: {
-          three: 3
-        }
-      }
-    }
-  })
-
-  t.is(result, `1, undefined, undefined`)
-})
-
-test('preserves css in marked style tags (tailwindcss)', async t => {
-  const html = await renderString(fixture('transformers/preserve-transform-css'), {
-    // So that we don't compile twice
-    tailwind: {
-      compiled: ''
-    }
-  })
-
-  t.is(html, expected('transformers/preserve-transform-css'))
-})
-
-test('@import css files in marked style tags', async t => {
-  const html = await renderString(fixture('transformers/atimport-in-style'))
-
-  t.is(html, expected('transformers/atimport-in-style'))
-})
+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 html = await renderString(source, {maizzle: {env: 'maizzle-ci'}})
+
+  t.is(html, await expected('useConfig'))
+})
+
+test('throws if first argument is not an HTML string', async t => {
+  await t.throwsAsync(async () => {
+    await renderString()
+  }, {instanceOf: TypeError, message: 'first argument must be an HTML string, received undefined'})
+})
+
+test('throws if first argument is an empty string', async t => {
+  await t.throwsAsync(async () => {
+    await renderString('')
+  }, {instanceOf: RangeError, message: 'received empty string'})
+})
+
+test('runs the `beforeRender` event', async t => {
+  const html = await renderString(`<div>{{ page.foo }}</div>`, {
+    beforeRender(html, config) {
+      config.foo = 'bar'
+
+      return html
+    }
+  })
+
+  t.is(html, `<div>bar</div>`)
+})
+
+test('runs the `afterRender` event', async t => {
+  const result = await renderString(`<div>foo</div>`, {
+    afterRender(html, config) {
+      config.replaceStrings = {
+        foo: 'baz'
+      }
+
+      return html
+    }
+  })
+
+  t.is(result, `<div>baz</div>`)
+})
+
+test('runs the `afterTransformers` event', async t => {
+  const result = await renderString(`<div>foo</div>`, {
+    maizzle: {
+      title: 'bar'
+    },
+    afterTransformers(html, config) {
+      return html.replace('foo', config.title)
+    }
+  })
+
+  t.is(result, `<div>bar</div>`)
+})
+
+test('locals work when defined in all supported places', async t => {
+  const result = await renderString(`{{ page.one }}, {{ two }}, {{ three }}`, {
+    maizzle: {
+      one: 1,
+      build: {
+        posthtml: {
+          expressions: {
+            locals: {
+              two: 2
+            }
+          }
+        }
+      },
+      locals: {
+        three: 3
+      }
+    }
+  })
+
+  t.is(result, `1, 2, 3`)
+})
+
+test('prevents overwriting page object', async t => {
+  const result = await renderString(`{{ page.one }}, {{ two }}, {{ three }}`, {
+    maizzle: {
+      one: 1,
+      build: {
+        posthtml: {
+          expressions: {
+            locals: {
+              page: {
+                two: 2
+              }
+            }
+          }
+        }
+      },
+      locals: {
+        page: {
+          three: 3
+        }
+      }
+    }
+  })
+
+  t.is(result, `1, undefined, undefined`)
+})
+
+test('preserves css in marked style tags (tailwindcss)', async t => {
+  const source = await fixture('transformers/preserve-transform-css')
+  const html = await renderString(source, {
+    // So that we don't compile twice
+    tailwind: {
+      compiled: ''
+    }
+  })
+
+  t.is(html, await expected('transformers/preserve-transform-css'))
+})
+
+test('@import css files in marked style tags', async t => {
+  const source = await fixture('transformers/atimport-in-style')
+  const html = await renderString(source)
+
+  t.is(html, await expected('transformers/atimport-in-style'))
+})

package/test/test-transformers.js

@@ -3,10 +3,14 @@ const Maizzle = require('../src')
 const removePlaintextTags = require('../src/transformers/plaintext')
 
 const path = require('path')
-const {readFileSync} = require('fs')
+const fs = require('fs')
 
-const fixture = file => readFileSync(path.join(__dirname, 'fixtures/transformers', `${file}.html`), 'utf8')
-const expect = file => readFileSync(path.join(__dirname, 'expected/transformers', `${file}.html`), 'utf8')
+const readFile = (dir, filename) => fs.promises
+  .readFile(path.join(__dirname, dir, `${filename}.html`), 'utf8')
+  .then(html => html.trim())
+
+const fixture = file => readFile('fixtures/transformers', file)
+const expected = file => readFile('expected/transformers', file)
 
 test('remove inline sizes', async t => {
   const options = {
@@ -44,18 +48,10 @@ test('remove inline background-color (with tags)', async t => {
 })
 
 test('inline CSS', async t => {
-  const html = `<div class="foo bar px-2 py-2">test</div>`
+  const html = `<div class="foo bar">test</div>`
   const css = `
     .foo {color: red}
     .bar {cursor: pointer}
-    .px-2 {
-      padding-left: 2px;
-      padding-right: 2px;
-    }
-    .py-2 {
-      padding-top: 2px;
-      padding-bottom: 2px;
-    }
   `
 
   const result = await Maizzle.inlineCSS(html, {
@@ -76,13 +72,7 @@ test('inline CSS', async t => {
     }
   })
 
-  const result2 = await Maizzle.inlineCSS(html, {
-    customCSS: css,
-    mergeLonghand: true
-  })
-
-  t.is(result, '<div class="foo bar px-2 py-2" style="color: red; padding: 2px;">test</div>')
-  t.is(result2, '<div class="foo bar px-2 py-2" style="color: red; cursor: pointer; padding: 2px;">test</div>')
+  t.is(result, '<div class="foo bar" style="color: red;">test</div>')
 })
 
 test('inline CSS (disabled)', async t => {
@@ -109,7 +99,7 @@ test('remove unused CSS', async t => {
     </body>
   </html>`
 
-  const expected1 = `<!DOCTYPE html>
+  const result1 = `<!DOCTYPE html>
   <html>
     <head>
       <style>
@@ -122,7 +112,7 @@ test('remove unused CSS', async t => {
     </body>
   </html>`
 
-  const expected2 = `<!DOCTYPE html>
+  const result2 = `<!DOCTYPE html>
   <html>
     <head>
       <style>
@@ -137,8 +127,8 @@ test('remove unused CSS', async t => {
   const withOptions = await Maizzle.removeUnusedCSS(html, {whitelist: ['.bar*']})
   const enabled = await Maizzle.removeUnusedCSS(html, true)
 
-  t.is(withOptions, expected1)
-  t.is(enabled, expected2)
+  t.is(withOptions, result1)
+  t.is(enabled, result2)
 })
 
 test('remove unused CSS (disabled)', async t => {
@@ -154,7 +144,7 @@ test('remove unused CSS (disabled)', async t => {
     </body>
   </html>`
 
-  const expected = `<!DOCTYPE html>
+  const result = `<!DOCTYPE html>
   <html>
     <head>
       <style>
@@ -169,8 +159,8 @@ test('remove unused CSS (disabled)', async t => {
   const disabled = await Maizzle.removeUnusedCSS(html, {removeUnusedCSS: false})
   const unset = await Maizzle.removeUnusedCSS(html)
 
-  t.is(disabled, expected)
-  t.is(unset, expected)
+  t.is(disabled, result)
+  t.is(unset, result)
 })
 
 test('remove attributes', async t => {
@@ -192,35 +182,42 @@ test('extra attributes (disabled)', async t => {
 })
 
 test('base URL (string)', async t => {
-  const html = await Maizzle.applyBaseImageUrl(fixture('base-image-url'), 'https://example.com/')
+  const source = await fixture('base-url')
+  const html = await Maizzle.applyBaseUrl(source, 'https://example.com/')
 
-  t.is(html, expect('base-image-url'))
+  t.is(html, await expected('base-url'))
 })
 
 test('base URL (object)', async t => {
-  const html = await Maizzle.applyBaseImageUrl(fixture('base-image-url'), {
+  const source = await fixture('base-url')
+  const html = await Maizzle.applyBaseUrl(source, {
     url: 'https://example.com/',
     allTags: true,
     styleTag: true,
     inlineCss: true
   })
 
-  t.is(html, expect('base-image-url'))
+  t.is(html, await expected('base-url'))
 })
 
 test('prettify', async t => {
+  // `prettify: true`
+  const html2 = await Maizzle.prettify('<div><p>test</p></div>', true)
+
+  // With custom object config
   // eslint-disable-next-line
   const html = await Maizzle.prettify('<div><p>test</p></div>', {indent_inner_result: true})
-  const html2 = await Maizzle.prettify('<div><p>test</p></div>', true)
 
-  t.is(html, '<div>\n  <p>test</p>\n</div>')
-  t.is(html2, '<div>\n  <p>test</p>\n</div>')
-})
+  // No config
+  const html3 = await Maizzle.prettify('<div><p>test</p></div>')
 
-test('prettify (disabled)', async t => {
-  const html = await Maizzle.prettify('<div><p>test</p></div>', {prettify: false})
+  // Empty object config
+  const html4 = await Maizzle.prettify('<div><p>test</p></div>', {})
 
-  t.is(html, '<div><p>test</p></div>')
+  t.is(html, '<div>\n  <p>test</p>\n</div>')
+  t.is(html2, '<div>\n  <p>test</p>\n</div>')
+  t.is(html3, '<div><p>test</p></div>')
+  t.is(html4, '<div><p>test</p></div>')
 })
 
 test('minify', async t => {
@@ -282,14 +279,15 @@ test('six digit hex (disabled)', async t => {
   t.is(html, '<td style="color: #ffc" bgcolor="#000"></td>')
 })
 
-test('transform contents (javascript)', async t => {
-  const html = await Maizzle.transformContents('<div uppercase>test</div>', {uppercase: string => string.toUpperCase()})
+test('filters (default)', async t => {
+  const source = await fixture('filters')
+  const html = await Maizzle.withFilters(source)
 
-  t.is(html, '<div>TEST</div>')
+  t.is(html, await expected('filters'))
 })
 
-test('transform contents (tailwindcss)', async t => {
-  const html = await Maizzle.transformContents(
+test('filters (tailwindcss)', async t => {
+  const html = await Maizzle.withFilters(
     `<style tailwindcss>
       div {
         @apply hidden;
@@ -300,15 +298,20 @@ test('transform contents (tailwindcss)', async t => {
   const expected = `<style>.inline { display: inline !important
 } .table { display: table !important
 } .contents { display: contents !important
-} .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !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>`
+}
+    </style>`
 
   t.is(html, expected)
 })
 
-test('transform contents (postcss)', async t => {
-  const html = await Maizzle.transformContents(
+test('filters (postcss)', async t => {
+  const html = await Maizzle.withFilters(
     `<style postcss>@import 'test/stubs/post.css';</style>`
   )
 
@@ -477,3 +480,32 @@ test('remove inlined selectors (disabled)', async t => {
 
   t.is(result, expected)
 })
+
+test('shorthand inline css', async t => {
+  const html = `
+    <div style="padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px;">padding</div>
+    <div style="margin-left: 2px; margin-right: 2px; margin-top: 2px; margin-bottom: 2px;">margin</div>
+    <div style="border-width: 1px; border-style: solid; border-color: #000;">border</div>
+    <p style="border-width: 1px; border-style: solid; border-color: #000;">border</p>
+  `
+
+  const expect = `
+    <div style="padding: 2px;">padding</div>
+    <div style="margin: 2px;">margin</div>
+    <div style="border: 1px solid #000;">border</div>
+    <p style="border: 1px solid #000;">border</p>
+  `
+
+  const expect2 = `
+    <div style="padding: 2px;">padding</div>
+    <div style="margin: 2px;">margin</div>
+    <div style="border: 1px solid #000;">border</div>
+    <p style="border-width: 1px; border-style: solid; border-color: #000;">border</p>
+  `
+
+  const result = await Maizzle.shorthandInlineCSS(html)
+  const result2 = await Maizzle.shorthandInlineCSS(html, {tags: ['div']})
+
+  t.is(result, expect)
+  t.is(result2, expect2)
+})

package/xo.config.js

@@ -1,22 +1,22 @@
-module.exports = {
-  space: true,
-  rules: {
-    semi: 0,
-    complexity: 0,
-    'max-params': 0,
-    'no-lonely-if': 0,
-    'unicorn/no-reduce': 0,
-    'import/extensions': 0,
-    'operator-linebreak': 0,
-    'max-nested-callbacks': 0,
-    'unicorn/filename-case': 0,
-    'unicorn/no-hex-escape': 0,
-    'unicorn/prefer-ternary': 0,
-    'unicorn/string-content': 0,
-    'unicorn/no-array-for-each': 0,
-    'unicorn/prefer-array-find': 0,
-    'promise/prefer-await-to-then': 0,
-    'unicorn/no-abusive-eslint-disable': 0,
-    quotes: ['error', 'single', {allowTemplateLiterals: true}]
-  }
-}
+module.exports = {
+  space: true,
+  rules: {
+    semi: 0,
+    complexity: 0,
+    'max-params': 0,
+    'no-lonely-if': 0,
+    'unicorn/no-reduce': 0,
+    'import/extensions': 0,
+    'operator-linebreak': 0,
+    'max-nested-callbacks': 0,
+    'unicorn/filename-case': 0,
+    'unicorn/no-hex-escape': 0,
+    'unicorn/prefer-ternary': 0,
+    'unicorn/string-content': 0,
+    'unicorn/no-array-for-each': 0,
+    'unicorn/prefer-array-find': 0,
+    'promise/prefer-await-to-then': 0,
+    'unicorn/no-abusive-eslint-disable': 0,
+    quotes: ['error', 'single', {allowTemplateLiterals: true}]
+  }
+}

package/test/stubs/templates/2.html

@@ -1 +0,0 @@
-<a href="https://example.com">Test</a>

package/test/stubs/templates/3.mzl

@@ -1 +0,0 @@
-<a href="https://example.com">Test</a>