@maizzle/framework 4.0.0-alpha.6 → 4.0.0-alpha.9

package/.github/workflows/nodejs.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12, 14, 16]
+        node-version: [14, 16, 17]
 
     steps:
       - uses: actions/checkout@v2

package/bin/maizzle

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('@maizzle/cli')

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.9",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
+  "bin": {
+    "maizzle": "bin/maizzle"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/maizzle/framework.git"
@@ -33,10 +36,11 @@
     "release": "np"
   },
   "dependencies": {
+    "@maizzle/cli": "^1.4.0",
     "autoprefixer": "^10.4.0",
     "browser-sync": "^2.26.13",
     "color-shorthand-hex-to-six-digit": "^3.0.2",
-    "email-comb": "^5.0.0",
+    "email-comb": "^5.2.0",
     "front-matter": "^4.0.0",
     "fs-extra": "^10.0.0",
     "glob-promise": "^4.1.0",
@@ -51,17 +55,18 @@
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^0.1.1",
     "posthtml-base-url": "^1.0.1",
-    "posthtml-content": "^0.0.3",
+    "posthtml-content": "^0.1.0",
     "posthtml-expressions": "^1.8.1",
     "posthtml-extend": "^0.6.0",
     "posthtml-extra-attributes": "^1.0.0",
-    "posthtml-fetch": "^2.0.0",
+    "posthtml-fetch": "^2.2.0",
     "posthtml-markdownit": "^1.3.0",
-    "posthtml-modules": "^0.8.0",
+    "posthtml-match-helper": "^1.0.3",
+    "posthtml-modules": "^0.9.0",
     "posthtml-mso": "^1.0.4",
     "posthtml-postcss-merge-longhand": "^1.0.2",
     "posthtml-remove-attributes": "^1.0.0",
-    "posthtml-safe-class-names": "^1.0.4",
+    "posthtml-safe-class-names": "^1.0.8",
     "posthtml-url-parameters": "^1.0.4",
     "pretty": "^2.0.0",
     "prevent-widows": "^1.0.2",
@@ -76,7 +81,7 @@
     "xo": "0.39.1"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.0.0"
   },
   "ava": {
     "files": [

package/src/commands/serve.js

@@ -41,13 +41,27 @@ const serve = async (env = 'local', config = {}) => {
     const globalPaths = [
       'src/**',
       get(config, 'build.tailwind.config', 'tailwind.config.js'),
-      [...new Set(get(config, 'build.browsersync.watch', []))]
+      ...new Set(get(config, 'build.browsersync.watch', []))
     ]
 
     // Watch for Template file changes
     browsersync()
       .watch(templatePaths)
       .on('change', async file => {
+        if (config.events && typeof config.events.beforeCreate === 'function') {
+          await config.events.beforeCreate(config)
+        }
+
+        // Don't render if file type is not configured
+        // eslint-disable-next-line
+        const filetypes = templates.reduce((acc, template) => {
+          return [...acc, ...get(template, 'filetypes', ['html'])]
+        }, [])
+
+        if (!filetypes.includes(path.extname(file).slice(1))) {
+          return
+        }
+
         if (get(config, 'build.console.clear')) {
           clearConsole()
         }
@@ -58,10 +72,6 @@ const serve = async (env = 'local', config = {}) => {
 
         file = file.replace(/\\/g, '/')
 
-        if (config.events && typeof config.events.beforeCreate === 'function') {
-          await config.events.beforeCreate(config)
-        }
-
         const renderOptions = {
           maizzle: config,
           ...config.events
@@ -72,19 +82,23 @@ const serve = async (env = 'local', config = {}) => {
           renderOptions
         )
           .then(async ({html, config}) => {
+            let source = ''
             let dest = ''
             let ext = ''
 
             if (Array.isArray(config.build.templates)) {
               const match = config.build.templates.find(template => template.source === path.parse(file).dir)
+              source = get(match, 'source')
               dest = get(match, 'destination.path', 'build_local')
               ext = get(match, 'destination.ext', 'html')
             } else if (isObject(config.build.templates)) {
+              source = get(config, 'build.templates.source')
               dest = get(config, 'build.templates.destination.path', 'build_local')
               ext = get(config, 'build.templates.destination.ext', 'html')
             }
 
-            const finalDestination = path.join(dest, `${path.parse(file).name}.${ext}`)
+            const fileDir = path.parse(file).dir.replace(source, '')
+            const finalDestination = path.join(dest, fileDir, `${path.parse(file).name}.${ext}`)
 
             await fs.outputFile(config.permalink || finalDestination, html)
           })
@@ -117,19 +131,22 @@ const serve = async (env = 'local', config = {}) => {
 
     // Initialize Browsersync
     browsersync()
-      .init({
-        notify: false,
-        open: false,
-        port: 3000,
-        server: {
-          baseDir,
-          directory: true
-        },
-        tunnel: false,
-        ui: {port: 3001},
-        logFileChanges: false,
-        ...get(config, 'build.browsersync', {})
-      }, () => {})
+      .init(
+        merge(
+          {
+            notify: false,
+            open: false,
+            port: 3000,
+            server: {
+              baseDir,
+              directory: true
+            },
+            tunnel: false,
+            ui: {port: 3001},
+            logFileChanges: false
+          },
+          get(config, 'build.browsersync', {})
+        ), () => {})
   } catch (error) {
     spinner.fail(error)
     throw error

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

@@ -1,71 +1,71 @@
-const fm = require('front-matter')
-const {get, merge} = require('lodash')
-const posthtml = require('../posthtml')
-const Tailwind = require('../tailwindcss')
-const Transformers = require('../../transformers')
-const posthtmlMSO = require('../../transformers/posthtmlMso')
-const Config = require('../config')
-
-module.exports = async (html, options) => {
-  process.env.NODE_ENV = get(options, 'maizzle.env', 'local')
-
-  if (typeof html !== 'string') {
-    throw new TypeError(`first argument must be an HTML string, received ${html}`)
-  }
-
-  if (html.length === 0) {
-    throw new RangeError('received empty string')
-  }
-
-  const fileConfig = await Config.getMerged(process.env.NODE_ENV)
-
-  let config = merge(fileConfig, get(options, 'maizzle', {}))
-
-  const tailwindConfig = get(options, 'tailwind.config', {})
-  const cssString = get(options, 'tailwind.css', '@tailwind components; @tailwind utilities;')
-
-  let {frontmatter} = fm(html)
-
-  if (frontmatter) {
-    frontmatter = await posthtml(frontmatter, config)
-  }
-
-  html = `---\n${frontmatter}\n---\n\n${fm(html).body}`
-
-  config = merge({applyTransformers: true}, config, fm(html).attributes)
-
-  if (typeof get(options, 'tailwind.compiled') === 'string') {
-    config.css = options.tailwind.compiled
-  } else {
-    config.css = await Tailwind.compile(cssString, html, tailwindConfig, config)
-  }
-
-  if (options && typeof options.beforeRender === 'function') {
-    html = await options.beforeRender(html, config)
-  }
-
-  html = await posthtml(html, config)
-
-  while (Object.keys(fm(html).attributes).length > 0) {
-    html = fm(html).body
-  }
-
-  if (options && typeof options.afterRender === 'function') {
-    html = await options.afterRender(html, config)
-  }
-
-  if (config.applyTransformers) {
-    html = await Transformers.process(html, config)
-  }
-
-  if (options && typeof options.afterTransformers === 'function') {
-    html = await options.afterTransformers(html, config)
-  }
-
-  html = await posthtmlMSO(html, config)
-
-  return {
-    html,
-    config
-  }
-}
+const fm = require('front-matter')
+const {get, merge} = require('lodash')
+const posthtml = require('../posthtml')
+const Tailwind = require('../tailwindcss')
+const Transformers = require('../../transformers')
+const posthtmlMSO = require('../../transformers/posthtmlMso')
+const Config = require('../config')
+
+module.exports = async (html, options) => {
+  process.env.NODE_ENV = get(options, 'maizzle.env', 'local')
+
+  if (typeof html !== 'string') {
+    throw new TypeError(`first argument must be an HTML string, received ${html}`)
+  }
+
+  if (html.length === 0) {
+    throw new RangeError('received empty string')
+  }
+
+  const fileConfig = await Config.getMerged(process.env.NODE_ENV)
+
+  let config = merge(fileConfig, get(options, 'maizzle', {}))
+
+  const tailwindConfig = get(options, 'tailwind.config', {})
+  const cssString = get(options, 'tailwind.css', '')
+
+  let {frontmatter} = fm(html)
+
+  if (frontmatter) {
+    frontmatter = await posthtml(frontmatter, config)
+  }
+
+  html = `---\n${frontmatter}\n---\n\n${fm(html).body}`
+
+  config = merge({applyTransformers: true}, config, fm(html).attributes)
+
+  if (typeof get(options, 'tailwind.compiled') === 'string') {
+    config.css = options.tailwind.compiled
+  } else {
+    config.css = await Tailwind.compile(cssString, html, tailwindConfig, config)
+  }
+
+  if (options && typeof options.beforeRender === 'function') {
+    html = await options.beforeRender(html, config)
+  }
+
+  html = await posthtml(html, config)
+
+  while (Object.keys(fm(html).attributes).length > 0) {
+    html = fm(html).body
+  }
+
+  if (options && typeof options.afterRender === 'function') {
+    html = await options.afterRender(html, config)
+  }
+
+  if (config.applyTransformers) {
+    html = await Transformers.process(html, config)
+  }
+
+  if (options && typeof options.afterTransformers === 'function') {
+    html = await options.afterTransformers(html, config)
+  }
+
+  html = await posthtmlMSO(html, config)
+
+  return {
+    html,
+    config
+  }
+}

package/src/generators/postcss.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const {get} = require('lodash')
+const postcss = require('postcss')
+const postcssImport = require('postcss-import')
+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'))
+
+    return postcss([
+      postcssImport({path: path.dirname(userFilePath)}),
+      postcssNested(),
+      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
+      ...get(maizzleConfig, 'build.postcss.plugins', [])
+    ])
+      .process(css, {from: undefined})
+      .then(result => result.css)
+      .catch(error => {
+        console.error(error)
+        if (spinner) {
+          spinner.stop()
+        }
+
+        throw new Error(`PostCSS processing failed`)
+      })
+  }
+}

package/src/generators/posthtml.js

@@ -1,61 +1,66 @@
-const fm = require('front-matter')
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const fetch = require('posthtml-fetch')
-const layouts = require('posthtml-extend')
-const modules = require('posthtml-modules')
-const expressions = require('posthtml-expressions')
-
-module.exports = async (html, config) => {
-  const layoutsOptions = get(config, 'build.layouts', {})
-
-  const fetchOptions = get(config, 'build.posthtml.fetch', {})
-  const fetchPlugin = fetch({...fetchOptions})
-
-  const modulesOptions = get(config, 'build.components', {})
-  // Fake `from` option so we can reference modules relatively
-  const modulesRoot = modulesOptions.root || './'
-  const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
-
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
-
-  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
-
-  const locals = merge(
-    get(expressionsOptions, 'locals', {}),
-    get(config, 'locals', {}),
-    {page: config}
-  )
-
-  return posthtml([
-    fetchPlugin,
-    layouts(
-      merge(
-        {
-          strict: false,
-          plugins: [
-            expressions({...expressionsOptions, locals})
-          ]
-        },
-        layoutsOptions
-      )
-    ),
-    modules({
-      parser: posthtmlOptions,
-      attributeAsLocals: true,
-      from: modulesFrom,
-      root: modulesRoot,
-      tag: 'component',
-      attribute: 'src',
-      plugins: [
-        fetchPlugin
-      ],
-      locals,
-      ...modulesOptions
-    }),
-    ...posthtmlPlugins
-  ])
-    .process(html, {...posthtmlOptions})
-    .then(result => fm(result.html).body)
-}
+const fm = require('front-matter')
+const posthtml = require('posthtml')
+const {get, merge} = require('lodash')
+const fetch = require('posthtml-fetch')
+const layouts = require('posthtml-extend')
+const modules = require('posthtml-modules')
+const expressions = require('posthtml-expressions')
+
+module.exports = async (html, config) => {
+  const layoutsOptions = get(config, 'build.layouts', {})
+
+  const modulesOptions = get(config, 'build.components', {})
+  // Fake `from` option so we can reference modules relatively
+  const modulesRoot = modulesOptions.root || './'
+  const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
+
+  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
+
+  const locals = merge(
+    get(expressionsOptions, 'locals', {}),
+    get(config, 'locals', {}),
+    {page: config}
+  )
+
+  const fetchPlugin = fetch(
+    merge(
+      {
+        expressions: merge({...expressionsOptions, locals})
+      },
+      get(config, 'build.posthtml.fetch', {})
+    )
+  )
+
+  return posthtml([
+    fetchPlugin,
+    expressions({...expressionsOptions, locals}),
+    layouts(
+      merge(
+        {
+          strict: false,
+          expressions: merge({...expressionsOptions, locals})
+        },
+        layoutsOptions
+      )
+    ),
+    modules({
+      parser: posthtmlOptions,
+      attributeAsLocals: true,
+      from: modulesFrom,
+      root: modulesRoot,
+      tag: 'component',
+      attribute: 'src',
+      plugins: [
+        fetchPlugin
+      ],
+      locals,
+      ...modulesOptions
+    }),
+    ...posthtmlPlugins
+  ])
+    .process(html, {...posthtmlOptions})
+    .then(result => fm(result.html).body)
+}

package/src/generators/tailwindcss.js

@@ -92,7 +92,7 @@ module.exports = {
     if (userFileExists) {
       css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
     } else {
-      css = '@import "tailwindcss/components"; @import "tailwindcss/utilities";' + css
+      css = `@import "tailwindcss/components"; @import "tailwindcss/utilities"; ${css}`
     }
 
     return postcss([

package/src/index.js

@@ -1,13 +1,17 @@
-const serve = require('./commands/serve')
-const toFile = require('./commands/build')
-const transformers = require('./transformers')
-const toString = require('./functions/render')
-const toPlaintext = require('./functions/plaintext')
-
-module.exports = {
-  serve,
-  build: toFile,
-  ...transformers,
-  render: toString,
-  plaintext: toPlaintext
-}
+const serve = require('./commands/serve')
+const toFile = require('./commands/build')
+const transformers = require('./transformers')
+const toString = require('./functions/render')
+const PostCSS = require('./generators/postcss')
+const toPlaintext = require('./functions/plaintext')
+const TailwindCSS = require('./generators/tailwindcss')
+
+module.exports = {
+  serve,
+  build: toFile,
+  ...transformers,
+  render: toString,
+  postcss: PostCSS,
+  plaintext: toPlaintext,
+  tailwindcss: TailwindCSS
+}

package/src/transformers/baseUrl.js

@@ -3,17 +3,41 @@ const isUrl = require('is-url-superb')
 const baseUrl = require('posthtml-base-url')
 const {get, isObject, isEmpty} = require('lodash')
 
-// VML backgrounds need regex because they're inside HTML comments :(
+/**
+ * VML backgrounds must be handled with regex because
+ * they're inside HTML comments.
+ */
 const rewriteVMLs = (html, url) => {
-  const vImageMatch = html.match(/(<v:image.+)(src=['"]([^'"]+)['"])/)
-  const vFillMatch = html.match(/(<v:fill.+)(src=['"]([^'"]+)['"])/)
+  // Handle <v:image>
+  const vImageMatches = html.match(/<v:image[^>]+src="?([^"\s]+)"/g)
 
-  if (vImageMatch && !isUrl(vImageMatch[3])) {
-    html = html.replace(vImageMatch[0], `${vImageMatch[1]}src="${url}${vImageMatch[3]}"`)
+  if (vImageMatches) {
+    vImageMatches.forEach(match => {
+      const vImage = match.match(/<v:image[^>]+src="?([^"\s]+)"/)
+      const vImageSrc = vImage[1]
+
+      if (!isUrl(vImageSrc)) {
+        const vImageSrcUrl = url + vImageSrc
+        const vImageReplace = vImage[0].replace(vImageSrc, vImageSrcUrl)
+        html = html.replace(vImage[0], vImageReplace)
+      }
+    })
   }
 
-  if (vFillMatch && !isUrl(vFillMatch[3])) {
-    html = html.replace(vFillMatch[0], `${vFillMatch[1]}src="${url}${vFillMatch[3]}"`)
+  // Handle <v:fill>
+  const vFillMatches = html.match(/<v:fill[^>]+src="?([^"\s]+)"/g)
+
+  if (vFillMatches) {
+    vFillMatches.forEach(match => {
+      const vFill = match.match(/<v:fill[^>]+src="?([^"\s]+)"/)
+      const vFillSrc = vFill[1]
+
+      if (!isUrl(vFillSrc)) {
+        const vFillSrcUrl = url + vFillSrc
+        const vFillReplace = vFill[0].replace(vFillSrc, vFillSrcUrl)
+        html = html.replace(vFill[0], vFillReplace)
+      }
+    })
   }
 
   return html
@@ -23,7 +47,7 @@ module.exports = async (html, config = {}, direct = false) => {
   const url = direct ? config : get(config, 'baseURL')
   const posthtmlOptions = get(config, 'build.posthtml.options', {})
 
-  // `baseUrl` as a string
+  // Handle `baseUrl` as a string
   if (typeof url === 'string' && url.length > 0) {
     html = rewriteVMLs(html, url)
 
@@ -34,7 +58,7 @@ module.exports = async (html, config = {}, direct = false) => {
       .then(result => result.html)
   }
 
-  // `baseUrl: {}`
+  // Handle `baseUrl` as an object
   if (isObject(url) && !isEmpty(url)) {
     html = rewriteVMLs(html, url.url)