@maizzle/framework 4.4.0-beta.7 → 4.4.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.4.0-beta.7",
+  "version": "4.4.0-beta.9",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -74,10 +74,10 @@
     "query-string": "^7.1.3",
     "string-remove-widows": "^2.1.0",
     "string-strip-html": "^8.2.0",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.6"
   },
   "devDependencies": {
-    "ava": "^5.1.1",
+    "ava": "^5.2.0",
     "c8": "^7.11.0",
     "np": "*",
     "xo": "0.39.1"

package/src/commands/serve.js

@@ -81,16 +81,21 @@ const serve = async (env = 'local', config = {}) => {
 
         spinner.start('Building email...')
 
-        file = file.replace(/\\/g, '/')
-
-        const renderOptions = {
-          maizzle: config,
-          ...config.events
-        }
-
         renderToString(
-          await fs.readFile(file, 'utf8'),
-          renderOptions
+          await fs.readFile(file.replace(/\\/g, '/'), 'utf8'),
+          {
+            maizzle: merge(
+              config,
+              {
+                build: {
+                  current: {
+                    path: path.parse(file)
+                  }
+                }
+              }
+            ),
+            ...config.events
+          }
         )
           .then(async ({html, config}) => {
             let source = ''

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

@@ -2,7 +2,6 @@ const path = require('path')
 const fs = require('fs-extra')
 const glob = require('glob-promise')
 const {get, isEmpty, merge} = require('lodash')
-const {asyncForEach} = require('../../utils/helpers')
 
 const Config = require('../config')
 const Tailwind = require('../tailwindcss')
@@ -28,10 +27,10 @@ module.exports = async (env, spinner, config) => {
 
   const css = (typeof get(config, 'build.tailwind.compiled') === 'string')
     ? config.build.tailwind.compiled
-    : await Tailwind.compile('', '', {}, config)
+    : await Tailwind.compile({config})
 
   // Parse each template config object
-  await asyncForEach(templatesConfig, async templateConfig => {
+  for await (const templateConfig of templatesConfig) {
     if (!templateConfig) {
       const configFileName = env === 'local' ? 'config.js' : `config.${env}.js`
       throw new Error(`No template sources defined in \`build.templates\`, check your ${configFileName} file`)
@@ -79,18 +78,20 @@ module.exports = async (env, spinner, config) => {
       : templateConfig.filetypes || get(templateConfig, 'filetypes', 'html')
 
     // List of files that won't be copied to the output directory
-    const omitted = Array.isArray(templateConfig.omit) ?
-      templateConfig.omit :
-      [get(templateConfig, 'omit', '')]
+    const omitted = Array.isArray(templateConfig.omit)
+      ? templateConfig.omit
+      : [get(templateConfig, 'omit', '')]
 
     // Parse each template source
-    await asyncForEach(templateSource, async source => {
+    for await (const source of templateSource) {
       /**
        * Copy single-file sources correctly
        * If `src` is a file, `dest` cannot be a directory
        * https://github.com/jprichardson/node-fs-extra/issues/323
        */
-      const out = fs.lstatSync(source).isFile() ? `${outputDir}/${path.basename(source)}` : outputDir
+      const out = fs.lstatSync(source).isFile()
+        ? `${outputDir}/${path.basename(source)}`
+        : outputDir
 
       await fs
         .copy(source, out, {filter: file => {
@@ -119,7 +120,7 @@ module.exports = async (env, spinner, config) => {
             await config.events.beforeCreate(config)
           }
 
-          await asyncForEach(templates, async file => {
+          for await (const file of templates) {
             config.build.current = {
               path: path.parse(file)
             }
@@ -202,19 +203,23 @@ module.exports = async (env, spinner, config) => {
                   throw error
               }
             }
-          })
+          }
 
           const assets = {source: '', destination: 'assets', ...get(templateConfig, 'assets')}
 
           if (Array.isArray(assets.source)) {
-            await asyncForEach(assets.source, async source => {
+            for await (const source of assets.source) {
               if (fs.existsSync(source)) {
-                await fs.copy(source, path.join(templateConfig.destination.path, assets.destination)).catch(error => spinner.warn(error.message))
+                await fs
+                  .copy(source, path.join(templateConfig.destination.path, assets.destination))
+                  .catch(error => spinner.warn(error.message))
               }
-            })
+            }
           } else {
             if (fs.existsSync(assets.source)) {
-              await fs.copy(assets.source, path.join(templateConfig.destination.path, assets.destination)).catch(error => spinner.warn(error.message))
+              await fs
+                .copy(assets.source, path.join(templateConfig.destination.path, assets.destination))
+                .catch(error => spinner.warn(error.message))
             }
           }
 
@@ -224,8 +229,8 @@ module.exports = async (env, spinner, config) => {
             })
         })
         .catch(error => spinner.warn(error.message))
-    })
-  })
+    }
+  }
 
   if (config.events && typeof config.events.afterBuild === 'function') {
     await config.events.afterBuild(files)

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

@@ -22,9 +22,6 @@ module.exports = async (html, options) => {
 
   let config = merge(fileConfig, get(options, 'maizzle', {}))
 
-  const tailwindConfig = get(options, 'tailwind.config', {})
-  const cssString = get(options, 'tailwind.css', '')
-
   const {frontmatter} = fm(html)
 
   html = `---\n${frontmatter}\n---\n\n${fm(html).body}`
@@ -34,7 +31,17 @@ module.exports = async (html, options) => {
   if (typeof get(options, 'tailwind.compiled') === 'string') {
     config.css = options.tailwind.compiled
   } else {
-    config.css = await Tailwind.compile(cssString, html, tailwindConfig, config)
+    config.css = await Tailwind.compile({
+      css: get(options, 'tailwind.css', ''),
+      html,
+      config: merge(config, {
+        build: {
+          tailwind: {
+            config: get(options, 'tailwind.config', {})
+          }
+        }
+      })
+    })
   }
 
   if (options && typeof options.beforeRender === 'function') {

package/src/generators/tailwindcss.js

@@ -9,14 +9,14 @@ const mergeLonghand = require('postcss-merge-longhand')
 const {get, isObject, isEmpty, merge} = require('lodash')
 
 module.exports = {
-  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}) => {
-    tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
-
+  compile: async ({css = '', html = '', config = {}}) => {
     // Compute the Tailwind config to use
-    const userConfig = () => {
+    const userConfig = config => {
+      const tailwindUserConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
+
       // If a custom config object was passed, use that
-      if (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) {
-        return tailwindConfig
+      if (isObject(tailwindUserConfig) && !isEmpty(tailwindUserConfig)) {
+        return tailwindUserConfig
       }
 
       /**
@@ -24,17 +24,17 @@ module.exports = {
        * This will use the default Tailwind config (with rem units etc)
        */
       try {
-        return requireUncached(path.resolve(process.cwd(), tailwindConfig))
+        return requireUncached(path.resolve(process.cwd(), tailwindUserConfig))
       } catch {
         return {}
       }
     }
 
     // Merge user's Tailwind config on top of a 'base' config
-    const layoutsRoot = get(maizzleConfig, 'build.layouts.root')
-    const componentsRoot = get(maizzleConfig, 'build.components.root')
+    const layoutsRoot = get(config, 'build.layouts.root')
+    const componentsRoot = get(config, 'build.components.root')
 
-    const config = merge({
+    const tailwindConfig = merge({
       important: true,
       content: {
         files: [
@@ -47,20 +47,20 @@ module.exports = {
           {raw: html, extension: 'html'}
         ]
       }
-    }, userConfig())
+    }, userConfig(config))
 
     // Add back the `{raw: html}` option if user provided own config
-    if (Array.isArray(config.content)) {
-      config.content = {
+    if (Array.isArray(tailwindConfig.content)) {
+      tailwindConfig.content = {
         files: [
-          ...config.content,
+          ...tailwindConfig.content,
           {raw: html, extension: 'html'}
         ]
       }
     }
 
     // Include all `build.templates.source` paths when scanning for selectors to preserve
-    const buildTemplates = get(maizzleConfig, 'build.templates')
+    const buildTemplates = get(config, 'build.templates')
 
     if (buildTemplates) {
       const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
@@ -68,12 +68,12 @@ module.exports = {
         const source = get(template, 'source')
 
         if (typeof source === 'function') {
-          const sources = source(maizzleConfig)
+          const sources = source(config)
 
           if (Array.isArray(sources)) {
-            sources.map(s => config.content.files.push(s))
+            sources.map(s => tailwindConfig.content.files.push(s))
           } else if (typeof sources === 'string') {
-            config.content.files.push(sources)
+            tailwindConfig.content.files.push(sources)
           }
 
           // Must return a valid `content` entry
@@ -82,7 +82,7 @@ module.exports = {
 
         // Support single-file sources i.e. src/templates/index.html
         if (typeof source === 'string' && Boolean(path.extname(source))) {
-          config.content.files.push(source)
+          tailwindConfig.content.files.push(source)
 
           return {raw: '', extension: 'html'}
         }
@@ -90,23 +90,24 @@ module.exports = {
         return `${source}/**/*.*`
       })
 
-      config.content.files.push(...templateSources)
+      tailwindConfig.content.files.push(...templateSources)
     }
 
-    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
+    const userFilePath = get(config, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
     const userFileExists = await fs.pathExists(userFilePath)
 
     const toProcess = [
       postcssNested(),
-      tailwindcss(config),
-      get(maizzleConfig, 'shorthandCSS', get(maizzleConfig, 'shorthandInlineCSS')) === true ?
+      tailwindcss(tailwindConfig),
+      get(config, 'shorthandCSS', get(config, 'shorthandInlineCSS')) === true ?
         mergeLonghand() :
         () => {},
-      ...get(maizzleConfig, 'build.postcss.plugins', [])
+      ...get(config, 'build.postcss.plugins', [])
     ]
 
     if (userFileExists) {
       css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
+
       toProcess.unshift(
         postcssImport({path: path.dirname(userFilePath)})
       )

package/src/transformers/filters/index.js

@@ -22,10 +22,19 @@ module.exports = async (html, config = {}, direct = false) => {
    * Compile CSS in <style {post|tailwind}css> tags
    */
   const maizzleConfig = omit(config, ['build.tailwind.css', 'css'])
-  const tailwindConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
 
   filters.postcss = css => PostCSS.process(css, maizzleConfig)
-  filters.tailwindcss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
+  filters.tailwindcss = css => Tailwind.compile({
+    css,
+    html,
+    config: merge({
+      build: {
+        tailwind: {
+          config: get(config, 'build.tailwind.config', {})
+        }
+      }
+    }, maizzleConfig)
+  })
 
   const posthtmlPlugins = [
     styleDataEmbed(),

package/src/utils/helpers.js

@@ -1,9 +1,4 @@
 module.exports = {
-  asyncForEach: async (array, callback) => {
-    for (let index = 0; index < array.length; index++) {
-      await callback(array[index], index, array) // eslint-disable-line
-    }
-  },
   requireUncached: module => {
     try {
       delete require.cache[require.resolve(module)]