@maizzle/framework 4.2.0 → 4.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.2.0",
+  "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

@@ -26,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 => {
@@ -103,6 +103,7 @@ module.exports = async (env, spinner, config) => {
 
             try {
               const compiled = await render(html, {
+                useFileConfig: true,
                 maizzle: {
                   ...config,
                   env

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/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/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

@@ -401,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

@@ -287,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/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>