@maizzle/framework 4.4.0-beta.6 → 4.4.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.4.0-beta.6",
+  "version": "4.4.0-beta.8",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",

package/src/commands/serve.js

@@ -9,6 +9,10 @@ const renderToString = require('../functions/render')
 const {get, merge, isObject} = require('lodash')
 const {clearConsole} = require('../utils/helpers')
 
+/**
+ * Initialize Browsersync on-demand
+ * https://github.com/maizzle/framework/issues/605
+ */
 const browsersync = () => {
   if (!global.cachedBrowserSync) {
     const bs = require('browser-sync')
@@ -18,16 +22,17 @@ const browsersync = () => {
   return global.cachedBrowserSync
 }
 
+const getConfig = async (env = 'local', config = {}) => merge(
+  config,
+  await Config.getMerged(env)
+)
+
 const serve = async (env = 'local', config = {}) => {
-  config = merge(
-    config,
-    await Config.getMerged(env),
-    {
-      build: {
-        command: 'serve'
-      }
+  config = await getConfig(env, merge(config, {
+    build: {
+      command: 'serve'
     }
-  )
+  }))
 
   const spinner = ora()
 
@@ -43,14 +48,17 @@ const serve = async (env = 'local', config = {}) => {
       'src/**',
       ...new Set(get(config, 'build.browsersync.watch', []))
     ]
+
     if (typeof tailwindConfig === 'string') {
-      globalPaths.push(tailwindConfig);
+      globalPaths.push(tailwindConfig)
     }
 
     // Watch for Template file changes
     browsersync()
       .watch(templatePaths)
       .on('change', async file => {
+        config = await getConfig(env, config)
+
         if (config.events && typeof config.events.beforeCreate === 'function') {
           await config.events.beforeCreate(config)
         }

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

@@ -28,7 +28,7 @@ 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 => {
@@ -209,12 +209,16 @@ module.exports = async (env, spinner, config) => {
           if (Array.isArray(assets.source)) {
             await asyncForEach(assets.source, async 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))
             }
           }
 

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(),