@maizzle/framework 4.0.0-alpha.4 → 4.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.5",
   "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

@@ -1,208 +1,208 @@
-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 removePlaintextTags = require('../../transformers/plaintext')
-
-const Config = require('../config')
-const Tailwind = require('../tailwindcss')
-const Plaintext = require('../plaintext')
-
-const render = require('./to-string')
-
-module.exports = async (env, spinner, config) => {
-  process.env.NODE_ENV = env || 'local'
-
-  if (isEmpty(config)) {
-    config = await Config.getMerged(env).catch(error => {
-      spinner.fail('Build failed')
-      throw error
-    })
-  }
-
-  const buildTemplates = get(config, 'build.templates')
-  const templatesConfig = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
-
-  const parsed = []
-  let files = []
-
-  const css = (typeof get(config, 'tailwind.compiled') === 'string')
-    ? config.tailwind.compiled
-    : await Tailwind.compile('@tailwind components; @tailwind utilities;', '', {}, config, spinner)
-
-  // Parse each template config object
-  await asyncForEach(templatesConfig, async templateConfig => {
-    const outputDir = get(templateConfig, 'destination.path', `build_${env}`)
-
-    await fs.remove(outputDir)
-
-    /**
-     * Get all files in the template config's source directory
-     * Supports `source` defined as:
-     * - string
-     * - array of strings
-     * - function that returns either of the above
-     *
-     *  */
-    const templateSource = []
-    const templateTypeErrorMessage = 'Invalid template source: expected string or array of strings, got '
-
-    if (typeof templateConfig.source === 'function') {
-      const sources = templateConfig.source(config)
-
-      if (Array.isArray(sources)) {
-        templateSource.push(...sources)
-      } else if (typeof sources === 'string') {
-        templateSource.push(sources)
-      } else {
-        throw new TypeError(templateTypeErrorMessage + typeof sources)
-      }
-    } else {
-      if (Array.isArray(templateConfig.source)) {
-        templateSource.push(...templateConfig.source)
-      } else if (typeof templateConfig.source === 'string') {
-        templateSource.push(templateConfig.source)
-      } else {
-        throw new TypeError(templateTypeErrorMessage + typeof templateConfig.source)
-      }
-    }
-
-    // Parse each template source
-    await asyncForEach(templateSource, async source => {
-      /**
-       * 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
-
-      await fs
-        .copy(source, out)
-        .then(async () => {
-          const extensions = Array.isArray(templateConfig.filetypes)
-            ? templateConfig.filetypes.join('|')
-            : templateConfig.filetypes || get(templateConfig, 'filetypes', 'html')
-
-          const templates = await glob(`${outputDir}/**/*.+(${extensions})`)
-
-          if (templates.length === 0) {
-            spinner.warn(`Error: no files with the .${extensions} extension found in ${templateConfig.source}`)
-            return
-          }
-
-          if (config.events && typeof config.events.beforeCreate === 'function') {
-            await config.events.beforeCreate(config)
-          }
-
-          await asyncForEach(templates, async file => {
-            const html = await fs.readFile(file, 'utf8')
-
-            try {
-              const compiled = await render(html, {
-                maizzle: {
-                  ...config,
-                  env
-                },
-                tailwind: {
-                  compiled: css
-                },
-                ...config.events
-              })
-
-              const destination = config.permalink || file
-
-              /**
-               * Generate plaintext
-               *
-               * We do this first so that we can remove the <plaintext>
-               * tags from the markup before outputting the file.
-               */
-
-              const plaintextConfig = get(templateConfig, 'plaintext')
-              const plaintextPath = get(plaintextConfig, 'destination.path', config.permalink || file)
-
-              if (Boolean(plaintextConfig) || !isEmpty(plaintextConfig)) {
-                await Plaintext
-                  .generate(
-                    compiled.html,
-                    plaintextPath,
-                    merge(plaintextConfig, {filepath: file})
-                  )
-                  .then(({plaintext, destination}) => fs.outputFile(destination, plaintext))
-              }
-
-              compiled.html = removePlaintextTags(compiled.html, config)
-
-              /**
-               * Output file
-               */
-              const parts = path.parse(destination)
-              const extension = get(templateConfig, 'destination.extension', 'html')
-              const finalDestination = `${parts.dir}/${parts.name}.${extension}`
-
-              await fs.outputFile(finalDestination, compiled.html)
-
-              /**
-               * Remove original file if its path is different
-               * from the final destination path.
-               *
-               * This ensures non-HTML files do not pollute
-               * the build destination folder.
-               */
-              if (finalDestination !== file) {
-                await fs.remove(file)
-              }
-
-              // Keep track of handled files
-              files.push(file)
-              parsed.push(file)
-            } catch (error) {
-              switch (config.build.fail) {
-                case 'silent':
-                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
-                  break
-                case 'verbose':
-                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
-                  console.error(error)
-                  break
-                default:
-                  spinner.fail(`Failed to compile template: ${path.basename(file)}`)
-                  throw error
-              }
-            }
-          })
-
-          const assets = {source: '', destination: 'assets', ...get(templateConfig, 'assets')}
-
-          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))
-              }
-            })
-          } 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 glob(path.join(templateConfig.destination.path, '/**/*.*'))
-            .then(contents => {
-              files = [...new Set([...files, ...contents])]
-            })
-        })
-        .catch(error => spinner.warn(error.message))
-    })
-  })
-
-  if (config.events && typeof config.events.afterBuild === 'function') {
-    await config.events.afterBuild(files)
-  }
-
-  return {
-    files,
-    parsed,
-    css
-  }
-}
+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 removePlaintextTags = require('../../transformers/plaintext')
+
+const Config = require('../config')
+const Tailwind = require('../tailwindcss')
+const Plaintext = require('../plaintext')
+
+const render = require('./to-string')
+
+module.exports = async (env, spinner, config) => {
+  process.env.NODE_ENV = env || 'local'
+
+  if (isEmpty(config)) {
+    config = await Config.getMerged(env).catch(error => {
+      spinner.fail('Build failed')
+      throw error
+    })
+  }
+
+  const buildTemplates = get(config, 'build.templates')
+  const templatesConfig = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
+
+  const parsed = []
+  let files = []
+
+  const css = (typeof get(config, 'tailwind.compiled') === 'string')
+    ? config.tailwind.compiled
+    : await Tailwind.compile('', '', {}, config, spinner)
+
+  // Parse each template config object
+  await asyncForEach(templatesConfig, async templateConfig => {
+    const outputDir = get(templateConfig, 'destination.path', `build_${env}`)
+
+    await fs.remove(outputDir)
+
+    /**
+     * Get all files in the template config's source directory
+     * Supports `source` defined as:
+     * - string
+     * - array of strings
+     * - function that returns either of the above
+     *
+     *  */
+    const templateSource = []
+    const templateTypeErrorMessage = 'Invalid template source: expected string or array of strings, got '
+
+    if (typeof templateConfig.source === 'function') {
+      const sources = templateConfig.source(config)
+
+      if (Array.isArray(sources)) {
+        templateSource.push(...sources)
+      } else if (typeof sources === 'string') {
+        templateSource.push(sources)
+      } else {
+        throw new TypeError(templateTypeErrorMessage + typeof sources)
+      }
+    } else {
+      if (Array.isArray(templateConfig.source)) {
+        templateSource.push(...templateConfig.source)
+      } else if (typeof templateConfig.source === 'string') {
+        templateSource.push(templateConfig.source)
+      } else {
+        throw new TypeError(templateTypeErrorMessage + typeof templateConfig.source)
+      }
+    }
+
+    // Parse each template source
+    await asyncForEach(templateSource, async source => {
+      /**
+       * 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
+
+      await fs
+        .copy(source, out)
+        .then(async () => {
+          const extensions = Array.isArray(templateConfig.filetypes)
+            ? templateConfig.filetypes.join('|')
+            : templateConfig.filetypes || get(templateConfig, 'filetypes', 'html')
+
+          const templates = await glob(`${outputDir}/**/*.+(${extensions})`)
+
+          if (templates.length === 0) {
+            spinner.warn(`Error: no files with the .${extensions} extension found in ${templateConfig.source}`)
+            return
+          }
+
+          if (config.events && typeof config.events.beforeCreate === 'function') {
+            await config.events.beforeCreate(config)
+          }
+
+          await asyncForEach(templates, async file => {
+            const html = await fs.readFile(file, 'utf8')
+
+            try {
+              const compiled = await render(html, {
+                maizzle: {
+                  ...config,
+                  env
+                },
+                tailwind: {
+                  compiled: css
+                },
+                ...config.events
+              })
+
+              const destination = config.permalink || file
+
+              /**
+               * Generate plaintext
+               *
+               * We do this first so that we can remove the <plaintext>
+               * tags from the markup before outputting the file.
+               */
+
+              const plaintextConfig = get(templateConfig, 'plaintext')
+              const plaintextPath = get(plaintextConfig, 'destination.path', config.permalink || file)
+
+              if (Boolean(plaintextConfig) || !isEmpty(plaintextConfig)) {
+                await Plaintext
+                  .generate(
+                    compiled.html,
+                    plaintextPath,
+                    merge(plaintextConfig, {filepath: file})
+                  )
+                  .then(({plaintext, destination}) => fs.outputFile(destination, plaintext))
+              }
+
+              compiled.html = removePlaintextTags(compiled.html, config)
+
+              /**
+               * Output file
+               */
+              const parts = path.parse(destination)
+              const extension = get(templateConfig, 'destination.extension', 'html')
+              const finalDestination = `${parts.dir}/${parts.name}.${extension}`
+
+              await fs.outputFile(finalDestination, compiled.html)
+
+              /**
+               * Remove original file if its path is different
+               * from the final destination path.
+               *
+               * This ensures non-HTML files do not pollute
+               * the build destination folder.
+               */
+              if (finalDestination !== file) {
+                await fs.remove(file)
+              }
+
+              // Keep track of handled files
+              files.push(file)
+              parsed.push(file)
+            } catch (error) {
+              switch (config.build.fail) {
+                case 'silent':
+                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
+                  break
+                case 'verbose':
+                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
+                  console.error(error)
+                  break
+                default:
+                  spinner.fail(`Failed to compile template: ${path.basename(file)}`)
+                  throw error
+              }
+            }
+          })
+
+          const assets = {source: '', destination: 'assets', ...get(templateConfig, 'assets')}
+
+          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))
+              }
+            })
+          } 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 glob(path.join(templateConfig.destination.path, '/**/*.*'))
+            .then(contents => {
+              files = [...new Set([...files, ...contents])]
+            })
+        })
+        .catch(error => spinner.warn(error.message))
+    })
+  })
+
+  if (config.events && typeof config.events.afterBuild === 'function') {
+    await config.events.afterBuild(files)
+  }
+
+  return {
+    files,
+    parsed,
+    css
+  }
+}

package/src/generators/tailwindcss.js

@@ -91,6 +91,8 @@ module.exports = {
 
     if (userFileExists) {
       css += await fs.readFile(path.resolve(userFilePath), 'utf8')
+    } else {
+      css = '@tailwind components; @tailwind utilities;' + css
     }
 
     return postcss([

package/src/transformers/transform.js

@@ -15,8 +15,8 @@ module.exports = async (html, config = {}, direct = false) => {
 
   const compileCss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
 
-  replacements.tailwindcss = css => compileCss(`@tailwind components; @tailwind utilities; ${css}`)
-  replacements.postcss = css => compileCss(`@tailwind components; @tailwind utilities; ${css}`)
+  replacements.tailwindcss = css => compileCss(css)
+  replacements.postcss = css => compileCss(css)
 
   return posthtml([posthtmlContent(replacements)]).process(html, posthtmlOptions).then(result => result.html)
 }

package/test/test-tailwind.js

@@ -113,5 +113,5 @@ test('uses custom postcss plugins from the maizzle config', async t => {
   const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
 
   t.not(css, undefined)
-  t.is(css.trim(), '.test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
+  t.is(css.trim(), '.inline {display: inline !important} .table {display: table !important} .contents {display: contents !important} .transform {-webkit-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;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} .test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
 })