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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.4.0-beta.7",
+  "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/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(),