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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-alpha.8",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -36,7 +36,7 @@
     "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",
@@ -55,9 +55,10 @@
     "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",
@@ -76,7 +77,7 @@
     "xo": "0.39.1"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.19.1"
   },
   "ava": {
     "files": [

package/src/commands/serve.js

@@ -72,19 +72,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 +121,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

@@ -22,7 +22,7 @@ module.exports = async (html, options) => {
   let config = merge(fileConfig, get(options, 'maizzle', {}))
 
   const tailwindConfig = get(options, 'tailwind.config', {})
-  const cssString = get(options, 'tailwind.css', '@tailwind components; @tailwind utilities;')
+  const cssString = get(options, 'tailwind.css', '')
 
   let {frontmatter} = fm(html)
 

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

@@ -90,9 +90,9 @@ module.exports = {
     const userFileExists = await fs.pathExists(userFilePath)
 
     if (userFileExists) {
-      css += await fs.readFile(path.resolve(userFilePath), 'utf8')
+      css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
     } else {
-      css = '@tailwind components; @tailwind 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/index.js

@@ -1,57 +1,60 @@
-const inline = require('./inlineCss')
-const minify = require('./minify')
-const markdown = require('./markdown')
-const prettify = require('./prettify')
-const ensureSixHEX = require('./sixHex')
-const applyBaseImageUrl = require('./baseUrl')
-const addURLParams = require('./urlParameters')
-const transformContents = require('./transform')
-const preventWidows = require('./preventWidows')
-const replaceStrings = require('./replaceStrings')
-const safeClassNames = require('./safeClassNames')
-const removeUnusedCSS = require('./removeUnusedCss')
-const removeAttributes = require('./removeAttributes')
-const attributeToStyle = require('./attributeToStyle')
-const removeInlineSizes = require('./removeInlineSizes')
-const applyExtraAttributes = require('./extraAttributes')
-const removeInlineBgColor = require('./removeInlineBackgroundColor')
-
-exports.process = async (html, config) => {
-  html = await safeClassNames(html, config)
-  html = await transformContents(html, config)
-  html = await markdown(html, config)
-  html = await preventWidows(html, config)
-  html = await attributeToStyle(html, config)
-  html = await inline(html, config)
-  html = await removeUnusedCSS(html, config)
-  html = await removeInlineSizes(html, config)
-  html = await removeInlineBgColor(html, config)
-  html = await removeAttributes(html, config)
-  html = await applyExtraAttributes(html, config)
-  html = await applyBaseImageUrl(html, config)
-  html = await addURLParams(html, config)
-  html = await ensureSixHEX(html, config)
-  html = await prettify(html, config)
-  html = await minify(html, config)
-  html = await replaceStrings(html, config)
-
-  return html
-}
-
-exports.inlineCSS = (html, config) => inline(html, config, true)
-exports.minify = (html, config) => minify(html, config, true)
-exports.markdown = (html, config) => markdown(html, config, true)
-exports.prettify = (html, config) => prettify(html, config, true)
-exports.ensureSixHEX = (html, config) => ensureSixHEX(html, config)
-exports.addURLParams = (html, config) => addURLParams(html, config, true)
-exports.transformContents = (html, config) => transformContents(html, config, true)
-exports.preventWidows = (html, config) => preventWidows(html, config, true)
-exports.replaceStrings = (html, config) => replaceStrings(html, config, true)
-exports.safeClassNames = (html, config) => safeClassNames(html, config, true)
-exports.applyBaseImageUrl = (html, config) => applyBaseImageUrl(html, config, true)
-exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config, true)
-exports.removeAttributes = (html, config) => removeAttributes(html, config, true)
-exports.removeInlineSizes = (html, config) => removeInlineSizes(html, config, true)
-exports.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)
-exports.removeInlineBgColor = (html, config) => removeInlineBgColor(html, config, true)
-exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)
+const inline = require('./inlineCss')
+const minify = require('./minify')
+const markdown = require('./markdown')
+const prettify = require('./prettify')
+const ensureSixHEX = require('./sixHex')
+const applyBaseImageUrl = require('./baseUrl')
+const addURLParams = require('./urlParameters')
+const transformContents = require('./transform')
+const preventWidows = require('./preventWidows')
+const replaceStrings = require('./replaceStrings')
+const safeClassNames = require('./safeClassNames')
+const removeUnusedCSS = require('./removeUnusedCss')
+const removeAttributes = require('./removeAttributes')
+const attributeToStyle = require('./attributeToStyle')
+const removeInlineSizes = require('./removeInlineSizes')
+const applyExtraAttributes = require('./extraAttributes')
+const removeInlinedClasses = require('./removeInlinedSelectors')
+const removeInlineBgColor = require('./removeInlineBackgroundColor')
+
+exports.process = async (html, config) => {
+  html = await safeClassNames(html, config)
+  html = await transformContents(html, config)
+  html = await markdown(html, config)
+  html = await preventWidows(html, config)
+  html = await attributeToStyle(html, config)
+  html = await inline(html, config)
+  html = await removeInlinedClasses(html, config)
+  html = await removeUnusedCSS(html, config)
+  html = await removeInlineSizes(html, config)
+  html = await removeInlineBgColor(html, config)
+  html = await removeAttributes(html, config)
+  html = await applyExtraAttributes(html, config)
+  html = await applyBaseImageUrl(html, config)
+  html = await addURLParams(html, config)
+  html = await ensureSixHEX(html, config)
+  html = await prettify(html, config)
+  html = await minify(html, config)
+  html = await replaceStrings(html, config)
+
+  return html
+}
+
+exports.minify = (html, config) => minify(html, config, true)
+exports.inlineCSS = (html, config) => inline(html, config, true)
+exports.markdown = (html, config) => markdown(html, config, true)
+exports.prettify = (html, config) => prettify(html, config, true)
+exports.ensureSixHEX = (html, config) => ensureSixHEX(html, config)
+exports.addURLParams = (html, config) => addURLParams(html, config, true)
+exports.preventWidows = (html, config) => preventWidows(html, config, true)
+exports.replaceStrings = (html, config) => replaceStrings(html, config, true)
+exports.safeClassNames = (html, config) => safeClassNames(html, config, true)
+exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config, true)
+exports.removeAttributes = (html, config) => removeAttributes(html, config, true)
+exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)
+exports.removeInlineSizes = (html, config) => removeInlineSizes(html, config, true)
+exports.applyBaseImageUrl = (html, config) => applyBaseImageUrl(html, config, true)
+exports.transformContents = (html, config) => transformContents(html, config, true)
+exports.removeInlineBgColor = (html, config) => removeInlineBgColor(html, config, true)
+exports.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)
+exports.removeInlinedClasses = (html, config) => removeInlinedClasses(html, config)

package/src/transformers/inlineCss.js

@@ -9,7 +9,7 @@ module.exports = async (html, config = {}, direct = false) => {
   }
 
   const options = direct ? config : get(config, 'inlineCSS', {})
-  const removeStyleTags = get(options, 'removeStyleTags', true)
+  const removeStyleTags = get(options, 'removeStyleTags', false)
   const css = get(config, 'customCSS', false)
 
   if (get(config, 'inlineCSS') === true || !isEmpty(options)) {

package/src/transformers/minify.js

@@ -1,5 +1,5 @@
-const {get, isEmpty} = require('lodash')
 const {crush} = require('html-crush')
+const {get, isEmpty} = require('lodash')
 
 module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'minify') === false) {

package/src/transformers/prettify.js

@@ -1,5 +1,5 @@
-const {get, isEmpty} = require('lodash')
 const pretty = require('pretty')
+const {get, isEmpty} = require('lodash')
 
 module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'prettify') === false) {

package/src/transformers/removeInlineBackgroundColor.js

@@ -1,5 +1,5 @@
-const {get, isEmpty} = require('lodash')
 const posthtml = require('posthtml')
+const {get, isEmpty} = require('lodash')
 const parseAttrs = require('posthtml-attrs-parser')
 
 module.exports = async (html, config = {}, direct = false) => {

package/src/transformers/removeInlinedSelectors.js

@@ -0,0 +1,71 @@
+const {get, has, remove} = require('lodash')
+const postcss = require('postcss')
+const posthtml = require('posthtml')
+const parseAttrs = require('posthtml-attrs-parser')
+const matchHelper = require('posthtml-match-helper')
+
+module.exports = async (html, config = {}) => {
+  if (get(config, 'removeInlinedClasses') === false) {
+    return html
+  }
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  return posthtml([plugin()]).process(html, posthtmlOptions).then(result => result.html)
+}
+
+const plugin = () => tree => {
+  const process = node => {
+    // For each style tag...
+    if (node.tag === 'style') {
+      const {root} = postcss().process(node.content)
+
+      root.walkRules(rule => {
+        // Skip media queries and such...
+        if (rule.parent.type === 'atrule') {
+          return
+        }
+
+        const {selector} = rule
+        const prop = get(rule.nodes[0], 'prop')
+
+        // If we find the selector in the HTML...
+        tree.match(matchHelper(selector), n => {
+          const parsedAttrs = parseAttrs(n.attrs)
+          const classAttr = get(parsedAttrs, 'class', [])
+          const styleAttr = get(parsedAttrs, 'style', {})
+
+          // If the class is in the style attribute (inlined), remove it
+          if (has(styleAttr, prop)) {
+            // Remove the class attribute
+            // console.log(styleAttr, prop, classAttr)
+            remove(classAttr, s => selector.includes(s))
+
+            // Remove the rule in the <style> tag
+            rule.remove()
+          }
+
+          /**
+           * Remove from <style> selectors that were used to create shorthand declarations
+           * like `margin: 0 0 0 16px` (transformed with mergeLonghand when inlining).
+           */
+          Object.keys(styleAttr).forEach(key => {
+            if (prop.includes(key)) {
+              rule.remove()
+              remove(classAttr, s => selector.includes(s))
+            }
+          })
+
+          n.attrs = parsedAttrs.compose()
+
+          return n
+        })
+      })
+
+      node.content = root.toString()
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}

package/src/transformers/removeUnusedCss.js

@@ -1,5 +1,5 @@
-const {get, isEmpty} = require('lodash')
 const {comb} = require('email-comb')
+const {get, isEmpty} = require('lodash')
 
 module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'removeUnusedCSS') === false) {
@@ -8,11 +8,26 @@ module.exports = async (html, config = {}, direct = false) => {
 
   const options = direct ? config : get(config, 'removeUnusedCSS', {})
 
+  const safelist = [
+    '*body*', // Gmail
+    '.outlook*', // Outlook.com
+    '.bloop_container', // Airmail
+    '.Singleton', // Apple Mail 10
+    '.unused', // Notes 8
+    '.moz-text-html', // Thunderbird
+    '.mail-detail-content', // Comcast, Libero webmail
+    '*edo*', // Edison (all)
+    '#*', // Freenet uses #msgBody
+    '.lang*' // Fenced code blocks
+  ]
+
   if (typeof options === 'boolean' && options) {
-    return comb(html).result
+    return comb(html, {whitelist: safelist}).result
   }
 
   if (!isEmpty(options)) {
+    options.whitelist = [...get(options, 'whitelist', []), ...safelist]
+
     return comb(html, options).result
   }
 

package/src/transformers/sixHex.js

@@ -1,4 +1,6 @@
 const {get} = require('lodash')
+const posthtml = require('posthtml')
+const parseAttrs = require('posthtml-attrs-parser')
 const {conv} = require('color-shorthand-hex-to-six-digit')
 
 module.exports = async (html, config = {}) => {
@@ -6,5 +8,26 @@ module.exports = async (html, config = {}) => {
     return html
   }
 
-  return conv(html)
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  return posthtml([sixHex()]).process(html, posthtmlOptions).then(result => result.html)
+}
+
+const sixHex = () => tree => {
+  const process = node => {
+    const attrs = parseAttrs(node.attrs)
+
+    const targets = ['bgcolor', 'color']
+
+    targets.forEach(attribute => {
+      if (attrs[attribute]) {
+        attrs[attribute] = conv(attrs[attribute])
+      }
+    })
+
+    node.attrs = attrs.compose()
+
+    return node
+  }
+
+  return tree.walk(process)
 }