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

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.8",
+  "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,6 +36,7 @@
     "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",
@@ -51,7 +55,7 @@
     "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",
@@ -62,7 +66,7 @@
     "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",
@@ -77,7 +81,7 @@
     "xo": "0.39.1"
   },
   "engines": {
-    "node": ">=14.19.1"
+    "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

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', '')
-
-  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/tailwindcss.js

@@ -1,116 +1,116 @@
-const path = require('path')
-const fs = require('fs-extra')
-const postcss = require('postcss')
-const tailwindcss = require('tailwindcss')
-const postcssImport = require('postcss-import')
-const postcssNested = require('tailwindcss/nesting')
-const {requireUncached} = require('../utils/helpers')
-const mergeLonghand = require('postcss-merge-longhand')
-const {get, isObject, isEmpty, merge} = require('lodash')
-
-module.exports = {
-  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}, spinner = null) => {
-    tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
-
-    // Compute the Tailwind config to use
-    const userConfig = () => {
-      // If a custom config object was passed, use that
-      if (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) {
-        return tailwindConfig
-      }
-
-      /**
-       * Try loading a fresh tailwind.config.js, with fallback to an empty object.
-       * This will use the default Tailwind config (with rem units etc)
-       */
-      try {
-        return requireUncached(path.resolve(process.cwd(), tailwindConfig))
-      } catch {
-        return {}
-      }
-    }
-
-    // Merge user's Tailwind config on top of a 'base' config
-    const config = merge({
-      important: true,
-      content: {
-        files: [
-          './src/**/*.*',
-          {raw: html, extension: 'html'}
-        ]
-      }
-    }, userConfig())
-
-    // Add back the `{raw: html}` option if user provided own config
-    if (Array.isArray(config.content)) {
-      config.content = {
-        files: [
-          ...config.content,
-          './src/**/*.*',
-          {raw: html, extension: 'html'}
-        ]
-      }
-    }
-
-    // Include all `build.templates.source` paths when scanning for selectors to preserve
-    const buildTemplates = get(maizzleConfig, 'build.templates')
-
-    if (buildTemplates) {
-      const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
-      const templateSources = templateObjects.map(template => {
-        const source = get(template, 'source')
-
-        if (typeof source === 'function') {
-          const sources = source(maizzleConfig)
-
-          if (Array.isArray(sources)) {
-            sources.map(s => config.content.files.push(s))
-          } else if (typeof sources === 'string') {
-            config.content.files.push(sources)
-          }
-
-          // Must return a valid `content` entry
-          return {raw: '', extension: 'html'}
-        }
-
-        // Support single-file sources i.e. src/templates/index.html
-        if (typeof source === 'string' && Boolean(path.extname(source))) {
-          config.content.files.push(source)
-
-          return {raw: '', extension: 'html'}
-        }
-
-        return `${source}/**/*.*`
-      })
-
-      config.content.files.push(...templateSources)
-    }
-
-    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
-    const userFileExists = await fs.pathExists(userFilePath)
-
-    if (userFileExists) {
-      css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
-    } else {
-      css = `@import "tailwindcss/components"; @import "tailwindcss/utilities"; ${css}`
-    }
-
-    return postcss([
-      postcssImport({path: path.dirname(userFilePath)}),
-      postcssNested(),
-      tailwindcss(config),
-      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(`Tailwind CSS compilation failed`)
-      })
-  }
-}
+const path = require('path')
+const fs = require('fs-extra')
+const postcss = require('postcss')
+const tailwindcss = require('tailwindcss')
+const postcssImport = require('postcss-import')
+const postcssNested = require('tailwindcss/nesting')
+const {requireUncached} = require('../utils/helpers')
+const mergeLonghand = require('postcss-merge-longhand')
+const {get, isObject, isEmpty, merge} = require('lodash')
+
+module.exports = {
+  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}, spinner = null) => {
+    tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
+
+    // Compute the Tailwind config to use
+    const userConfig = () => {
+      // If a custom config object was passed, use that
+      if (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) {
+        return tailwindConfig
+      }
+
+      /**
+       * Try loading a fresh tailwind.config.js, with fallback to an empty object.
+       * This will use the default Tailwind config (with rem units etc)
+       */
+      try {
+        return requireUncached(path.resolve(process.cwd(), tailwindConfig))
+      } catch {
+        return {}
+      }
+    }
+
+    // Merge user's Tailwind config on top of a 'base' config
+    const config = merge({
+      important: true,
+      content: {
+        files: [
+          './src/**/*.*',
+          {raw: html, extension: 'html'}
+        ]
+      }
+    }, userConfig())
+
+    // Add back the `{raw: html}` option if user provided own config
+    if (Array.isArray(config.content)) {
+      config.content = {
+        files: [
+          ...config.content,
+          './src/**/*.*',
+          {raw: html, extension: 'html'}
+        ]
+      }
+    }
+
+    // Include all `build.templates.source` paths when scanning for selectors to preserve
+    const buildTemplates = get(maizzleConfig, 'build.templates')
+
+    if (buildTemplates) {
+      const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
+      const templateSources = templateObjects.map(template => {
+        const source = get(template, 'source')
+
+        if (typeof source === 'function') {
+          const sources = source(maizzleConfig)
+
+          if (Array.isArray(sources)) {
+            sources.map(s => config.content.files.push(s))
+          } else if (typeof sources === 'string') {
+            config.content.files.push(sources)
+          }
+
+          // Must return a valid `content` entry
+          return {raw: '', extension: 'html'}
+        }
+
+        // Support single-file sources i.e. src/templates/index.html
+        if (typeof source === 'string' && Boolean(path.extname(source))) {
+          config.content.files.push(source)
+
+          return {raw: '', extension: 'html'}
+        }
+
+        return `${source}/**/*.*`
+      })
+
+      config.content.files.push(...templateSources)
+    }
+
+    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
+    const userFileExists = await fs.pathExists(userFilePath)
+
+    if (userFileExists) {
+      css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
+    } else {
+      css = `@import "tailwindcss/components"; @import "tailwindcss/utilities"; ${css}`
+    }
+
+    return postcss([
+      postcssImport({path: path.dirname(userFilePath)}),
+      postcssNested(),
+      tailwindcss(config),
+      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(`Tailwind CSS compilation failed`)
+      })
+  }
+}

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)
 

package/src/transformers/filters/defaultFilters.js

@@ -0,0 +1,126 @@
+const escapeMap = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&#34;',
+  '\'': '&#39;'
+}
+
+const unescapeMap = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&#34;': '"',
+  '&#39;': '\''
+}
+
+const unescape = string => string.replace(/&(amp|lt|gt|#34|#39);/g, m => unescapeMap[m])
+
+const append = (content, attribute) => content + attribute
+const capitalize = content => content.charAt(0).toUpperCase() + content.slice(1)
+const ceil = content => Math.ceil(Number.parseFloat(content))
+const divide = (content, attribute) => Number.parseFloat(content) / Number.parseFloat(attribute)
+const escape = content => content.replace(/["&'<>]/g, m => escapeMap[m])
+const escapeOnce = content => escape(unescape(content))
+const floor = content => Math.floor(Number.parseFloat(content))
+const lowercase = content => content.toLowerCase()
+const lstrip = content => content.replace(/^\s+/, '')
+const minus = (content, attribute) => Number.parseFloat(content) - Number.parseFloat(attribute)
+const modulo = (content, attribute) => Number.parseFloat(content) % Number.parseFloat(attribute)
+const multiply = (content, attribute) => Number.parseFloat(content) * Number.parseFloat(attribute)
+const newlineToBr = content => content.replace(/\n/g, '<br>')
+const plus = (content, attribute) => Number.parseFloat(content) + Number.parseFloat(attribute)
+const prepend = (content, attribute) => attribute + content
+
+const remove = (content, attribute) => {
+  const regex = new RegExp(attribute, 'g')
+  return content.replace(regex, '')
+}
+
+const removeFirst = (content, attribute) => content.replace(attribute, '')
+const replace = (content, attribute) => {
+  const [search, replace] = attribute.split('|')
+  const regex = new RegExp(search, 'g')
+  return content.replace(regex, replace)
+}
+
+const replaceFirst = (content, attribute) => {
+  const [search, replace] = attribute.split('|')
+  return content.replace(search, replace)
+}
+
+const round = content => Math.round(Number.parseFloat(content))
+const rstrip = content => content.replace(/\s+$/, '')
+const uppercase = content => content.toUpperCase()
+const size = content => content.length
+const slice = (content, attribute) => {
+  try {
+    const [start, end] = attribute.split(',')
+    return content.slice(start, end)
+  } catch {
+    return content.slice(attribute)
+  }
+}
+
+const stripNewlines = content => content.replace(/\n/g, '')
+const trim = content => content.trim()
+const truncate = (content, attribute) => {
+  try {
+    const [length, omission] = attribute.split(',')
+    return content.length > Number.parseInt(length, 10) ?
+      content.slice(0, length) + (omission || '...') :
+      content
+  } catch {
+    const length = Number.parseInt(attribute, 10)
+    return content.length > length ? content.slice(0, length) + '...' : content
+  }
+}
+
+const truncateWords = (content, attribute) => {
+  try {
+    const [length, omission] = attribute.split(',')
+    return content.split(' ').slice(0, Number.parseInt(length, 10)).join(' ') + (omission || '...')
+  } catch {
+    const length = Number.parseInt(attribute, 10)
+    return content.split(' ').slice(0, length).join(' ') + '...'
+  }
+}
+
+// eslint-disable-next-line
+const urlDecode = content => content.split('+').map(decodeURIComponent).join(' ')
+// eslint-disable-next-line
+const urlEncode = content => content.split(' ').map(encodeURIComponent).join('+')
+
+exports.append = append
+exports.capitalize = capitalize
+exports.ceil = ceil
+exports['divide-by'] = divide
+exports.divide = divide
+exports.escape = escape
+exports['escape-once'] = escapeOnce
+exports.floor = floor
+exports.lowercase = lowercase
+exports.lstrip = lstrip
+exports.minus = minus
+exports.modulo = modulo
+exports.multiply = multiply
+exports['newline-to-br'] = newlineToBr
+exports.plus = plus
+exports.prepend = prepend
+exports.remove = remove
+exports['remove-first'] = removeFirst
+exports.replace = replace
+exports['replace-first'] = replaceFirst
+exports.round = round
+exports.rstrip = rstrip
+exports.uppercase = uppercase
+exports.size = size
+exports.slice = slice
+exports.strip = trim
+exports['strip-newlines'] = stripNewlines
+exports.times = multiply
+exports.trim = trim
+exports.truncate = truncate
+exports['truncate-words'] = truncateWords
+exports['url-decode'] = urlDecode
+exports['url-encode'] = urlEncode