@maizzle/framework 4.0.0-alpha.9 → 4.0.2

package/src/transformers/filters/index.js

@@ -1,55 +1,55 @@
-const posthtml = require('posthtml')
-const {get, omit, has, merge} = require('lodash')
-const defaultFilters = require('./defaultFilters')
-const PostCSS = require('../../generators/postcss')
-const posthtmlContent = require('posthtml-content')
-const Tailwind = require('../../generators/tailwindcss')
-const safeClassNames = require('posthtml-safe-class-names')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const filters = direct ?
-    merge(defaultFilters, config) :
-    merge(defaultFilters, get(config, 'filters', {}))
-
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  /**
-   * 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)
-
-  return posthtml([
-    styleDataEmbed(),
-    posthtmlContent(filters),
-    safeClassNames()
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}
-
-/**
- * Prevent CSS inlining
- *
- * Add a `data-embed` attribute to <style> tags that we want to preserve.
- * Can be used for HTML email client targeting hacks.
- */
-const styleDataEmbed = () => tree => {
-  const process = node => {
-    if (
-      node.tag === 'style'
-      && node.attrs
-      && (has(node.attrs, 'preserve') || has(node.attrs, 'embed'))) {
-      node.attrs = {...node.attrs, 'data-embed': true}
-      node.attrs.preserve = false
-      node.attrs.embed = false
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
+const posthtml = require('posthtml')
+const {get, omit, has, merge} = require('lodash')
+const defaultFilters = require('./defaultFilters')
+const PostCSS = require('../../generators/postcss')
+const posthtmlContent = require('posthtml-content')
+const Tailwind = require('../../generators/tailwindcss')
+const safeClassNames = require('posthtml-safe-class-names')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const filters = direct ?
+    merge(defaultFilters, config) :
+    merge(defaultFilters, get(config, 'filters', {}))
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  /**
+   * 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)
+
+  return posthtml([
+    styleDataEmbed(),
+    posthtmlContent(filters),
+    safeClassNames()
+  ])
+    .process(html, posthtmlOptions)
+    .then(result => result.html)
+}
+
+/**
+ * Prevent CSS inlining
+ *
+ * Add a `data-embed` attribute to <style> tags that we want to preserve.
+ * Can be used for HTML email client targeting hacks.
+ */
+const styleDataEmbed = () => tree => {
+  const process = node => {
+    if (
+      node.tag === 'style'
+      && node.attrs
+      && (has(node.attrs, 'preserve') || has(node.attrs, 'embed'))) {
+      node.attrs = {...node.attrs, 'data-embed': true}
+      node.attrs.preserve = false
+      node.attrs.embed = false
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}

package/src/transformers/index.js

@@ -1,60 +1,63 @@
-const inline = require('./inlineCss')
-const minify = require('./minify')
-const filters = require('./filters')
-const markdown = require('./markdown')
-const prettify = require('./prettify')
-const ensureSixHEX = require('./sixHex')
-const applyBaseImageUrl = require('./baseUrl')
-const addURLParams = require('./urlParameters')
-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 filters(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.withFilters = (html, config) => filters(html, config, true)
-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.removeInlinedClasses = (html, config) => removeInlinedClasses(html, config)
-exports.removeInlineBgColor = (html, config) => removeInlineBgColor(html, config, true)
-exports.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)
+const inline = require('./inlineCss')
+const minify = require('./minify')
+const filters = require('./filters')
+const markdown = require('./markdown')
+const prettify = require('./prettify')
+const ensureSixHEX = require('./sixHex')
+const applyBaseUrl = require('./baseUrl')
+const addURLParams = require('./urlParameters')
+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 shorthandInlineCSS = require('./shorthandInlineCSS')
+const removeInlinedClasses = require('./removeInlinedSelectors')
+const removeInlineBgColor = require('./removeInlineBackgroundColor')
+
+exports.process = async (html, config) => {
+  html = await safeClassNames(html, config)
+  html = await filters(html, config)
+  html = await markdown(html, config)
+  html = await preventWidows(html, config)
+  html = await attributeToStyle(html, config)
+  html = await inline(html, config)
+  html = await shorthandInlineCSS(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 applyBaseUrl(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.withFilters = (html, config) => filters(html, config, true)
+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.applyBaseUrl = (html, config) => applyBaseUrl(html, config, true)
+exports.removeInlinedClasses = (html, config) => removeInlinedClasses(html, config)
+exports.shorthandInlineCSS = (html, config) => shorthandInlineCSS(html, config, true)
+exports.removeInlineBgColor = (html, config) => removeInlineBgColor(html, config, true)
+exports.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)

package/src/transformers/inlineCss.js

@@ -1,50 +1,37 @@
-const juice = require('juice')
-const posthtml = require('posthtml')
-const {get, isObject, isEmpty} = require('lodash')
-const mergeLonghand = require('posthtml-postcss-merge-longhand')
-
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'inlineCSS') === false) {
-    return html
-  }
-
-  const options = direct ? config : get(config, 'inlineCSS', {})
-  const removeStyleTags = get(options, 'removeStyleTags', false)
-  const css = get(config, 'customCSS', false)
-
-  if (get(config, 'inlineCSS') === true || !isEmpty(options)) {
-    juice.styleToAttribute = get(options, 'styleToAttribute', {'vertical-align': 'valign'})
-
-    juice.widthElements = get(options, 'applyWidthAttributes', [])
-    juice.heightElements = get(options, 'applyHeightAttributes', [])
-
-    juice.excludedProperties = ['--tw-shadow']
-
-    if (!isEmpty(options.excludedProperties)) {
-      juice.excludedProperties.push(...get(options, 'excludedProperties', []))
-    }
-
-    if (isObject(options.codeBlocks) && !isEmpty(options.codeBlocks)) {
-      Object.entries(options.codeBlocks).forEach(([k, v]) => {
-        juice.codeBlocks[k] = v
-      })
-    }
-
-    html = css ? juice.inlineContent(html, css, {removeStyleTags}) : juice(html, {removeStyleTags})
-
-    const posthtmlOptions = get(config, 'build.posthtml.options', {})
-    const mergeLonghandConfig = get(options, 'mergeLonghand', [])
-
-    if (typeof mergeLonghandConfig === 'boolean' && mergeLonghandConfig) {
-      html = await posthtml([mergeLonghand()]).process(html, posthtmlOptions).then(result => result.html)
-    }
-
-    if (isObject(mergeLonghandConfig) && !isEmpty(mergeLonghandConfig)) {
-      html = await posthtml([mergeLonghand({tags: mergeLonghandConfig})]).process(html, posthtmlOptions).then(result => result.html)
-    }
-
-    return html
-  }
-
-  return html
-}
+const juice = require('juice')
+const {get, isObject, isEmpty} = require('lodash')
+
+module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'inlineCSS') === false) {
+    return html
+  }
+
+  const options = direct ? config : get(config, 'inlineCSS', {})
+  const removeStyleTags = get(options, 'removeStyleTags', false)
+  const css = get(config, 'customCSS', false)
+
+  if (get(config, 'inlineCSS') === true || !isEmpty(options)) {
+    juice.styleToAttribute = get(options, 'styleToAttribute', {'vertical-align': 'valign'})
+
+    juice.widthElements = get(options, 'applyWidthAttributes', [])
+    juice.heightElements = get(options, 'applyHeightAttributes', [])
+
+    juice.excludedProperties = ['--tw-shadow']
+
+    if (!isEmpty(options.excludedProperties)) {
+      juice.excludedProperties.push(...get(options, 'excludedProperties', []))
+    }
+
+    if (isObject(options.codeBlocks) && !isEmpty(options.codeBlocks)) {
+      Object.entries(options.codeBlocks).forEach(([k, v]) => {
+        juice.codeBlocks[k] = v
+      })
+    }
+
+    html = css ? juice.inlineContent(html, css, {removeStyleTags}) : juice(html, {removeStyleTags})
+
+    return html
+  }
+
+  return html
+}

package/src/transformers/markdown.js

@@ -1,19 +1,19 @@
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const markdown = require('posthtml-markdownit')
-
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'markdown') === false) {
-    return html
-  }
-
-  const userMarkdownOptions = direct ? config : get(config, 'markdown', {})
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  const markdownOptions = merge({markdownit: {html: true}}, userMarkdownOptions)
-
-  return posthtml([
-    markdown({...markdownOptions})
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}
+const posthtml = require('posthtml')
+const {get, merge} = require('lodash')
+const markdown = require('posthtml-markdownit')
+
+module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'markdown') === false) {
+    return html
+  }
+
+  const userMarkdownOptions = direct ? config : get(config, 'markdown', {})
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const markdownOptions = merge({markdownit: {html: true}}, userMarkdownOptions)
+
+  return posthtml([
+    markdown({...markdownOptions})
+  ])
+    .process(html, posthtmlOptions)
+    .then(result => result.html)
+}

package/src/transformers/minify.js

@@ -1,21 +1,21 @@
-const {crush} = require('html-crush')
-const {get, isEmpty} = require('lodash')
-
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'minify') === false) {
-    return html
-  }
-
-  config = direct ? {
-    lineLengthLimit: 500,
-    removeIndentations: true,
-    removeLineBreaks: true,
-    ...config
-  } : get(config, 'minify', {})
-
-  if (!isEmpty(config)) {
-    html = crush(html, {removeLineBreaks: true, ...config}).result
-  }
-
-  return html
-}
+const {crush} = require('html-crush')
+const {get, isEmpty} = require('lodash')
+
+module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'minify') === false) {
+    return html
+  }
+
+  config = direct ? {
+    lineLengthLimit: 500,
+    removeIndentations: true,
+    removeLineBreaks: true,
+    ...config
+  } : get(config, 'minify', {})
+
+  if (!isEmpty(config)) {
+    html = crush(html, {removeLineBreaks: true, ...config}).result
+  }
+
+  return html
+}

package/src/transformers/plaintext.js

@@ -1,23 +1,23 @@
-const {get} = require('lodash')
-const posthtml = require('posthtml')
-
-module.exports = (html, config = {}) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  return posthtml([plaintext()]).process(html, {...posthtmlOptions, sync: true}).html
-}
-
-const plaintext = () => tree => {
-  const process = node => {
-    if (node.tag === 'plaintext') {
-      return {
-        tag: false,
-        content: ['']
-      }
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
+const {get} = require('lodash')
+const posthtml = require('posthtml')
+
+module.exports = (html, config = {}) => {
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  return posthtml([plaintext()]).process(html, {...posthtmlOptions, sync: true}).html
+}
+
+const plaintext = () => tree => {
+  const process = node => {
+    if (node.tag === 'plaintext') {
+      return {
+        tag: false,
+        content: ['']
+      }
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}

package/src/transformers/posthtmlMso.js

@@ -1,10 +1,10 @@
-const {get} = require('lodash')
-const posthtml = require('posthtml')
-const outlook = require('posthtml-mso')
-
-module.exports = async (html, config) => {
-  const outlookOptions = get(config, 'build.posthtml.outlook', {})
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  return posthtml([outlook({...outlookOptions})]).process(html, {...posthtmlOptions}).then(result => result.html)
-}
+const {get} = require('lodash')
+const posthtml = require('posthtml')
+const outlook = require('posthtml-mso')
+
+module.exports = async (html, config) => {
+  const outlookOptions = get(config, 'build.posthtml.outlook', {})
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  return posthtml([outlook({...outlookOptions})]).process(html, {...posthtmlOptions}).then(result => result.html)
+}

package/src/transformers/prettify.js

@@ -1,13 +1,8 @@
 /* eslint-disable camelcase */
-
 const pretty = require('pretty')
-const {get, merge, isEmpty} = require('lodash')
+const {get, merge, isEmpty, isObject} = require('lodash')
 
 module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'prettify') === false) {
-    return html
-  }
-
   const defaultConfig = {
     space_around_combinator: true, // Preserve space around CSS selector combinators
     newline_between_rules: false, // Remove empty lines between CSS rules
@@ -15,15 +10,18 @@ module.exports = async (html, config = {}, direct = false) => {
     extra_liners: [] // Don't add extra new line before any tag
   }
 
-  config = direct ? config : merge(defaultConfig, get(config, 'prettify', {}))
+  config = direct ? config : get(config, 'prettify')
+
+  // Don't prettify if not explicitly enabled in config
+  if (!config || (isObject(config) && isEmpty(config))) {
+    return html
+  }
 
   if (typeof config === 'boolean' && config) {
     return pretty(html, defaultConfig)
   }
 
-  if (!isEmpty(config)) {
-    return pretty(html, config)
-  }
+  config = merge(defaultConfig, config)
 
-  return html
+  return pretty(html, config)
 }

package/src/transformers/preventWidows.js

@@ -1,13 +1,13 @@
-const {get} = require('lodash')
-const posthtml = require('posthtml')
-const preventWidows = require('prevent-widows')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  if (direct) {
-    return preventWidows(html)
-  }
-
-  return posthtml([preventWidows.posthtml()]).process(html, posthtmlOptions).then(result => result.html)
-}
+const {get} = require('lodash')
+const posthtml = require('posthtml')
+const preventWidows = require('prevent-widows')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  if (direct) {
+    return preventWidows(html)
+  }
+
+  return posthtml([preventWidows.posthtml()]).process(html, posthtmlOptions).then(result => result.html)
+}

package/src/transformers/removeAttributes.js

@@ -1,17 +1,17 @@
-const {get} = require('lodash')
-const posthtml = require('posthtml')
-const removeAttributes = require('posthtml-remove-attributes')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const attributes = direct ? (Array.isArray(config) ? [...config] : []) : get(config, 'removeAttributes', [])
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  attributes.push({name: 'style'}, {name: 'class'})
-
-  // Allow omitting `value` key when removing empty attributes
-  attributes.forEach(attr => {
-    attr.value = attr.value || ''
-  })
-
-  return posthtml([removeAttributes(attributes)]).process(html, posthtmlOptions).then(result => result.html)
-}
+const {get} = require('lodash')
+const posthtml = require('posthtml')
+const removeAttributes = require('posthtml-remove-attributes')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const attributes = direct ? (Array.isArray(config) ? [...config] : []) : get(config, 'removeAttributes', [])
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  attributes.push({name: 'style'}, {name: 'class'})
+
+  // Allow omitting `value` key when removing empty attributes
+  attributes.forEach(attr => {
+    attr.value = attr.value || ''
+  })
+
+  return posthtml([removeAttributes(attributes)]).process(html, posthtmlOptions).then(result => result.html)
+}