@maizzle/framework 3.7.2 → 4.0.0-alpha.10

package/src/transformers/index.js

@@ -1,57 +1,63 @@
-const inline = require('./inline')
-const minify = require('./minify')
-const markdown = require('./markdown')
-const prettify = require('./prettify')
-const ensureSixHEX = require('./six-hex')
-const addURLParams = require('./url-params')
-const transformContents = require('./transform')
-const preventWidows = require('./prevent-widows')
-const replaceStrings = require('./replace-strings')
-const safeClassNames = require('./safe-class-names')
-const applyBaseImageUrl = require('./base-image-url')
-const removeUnusedCSS = require('./remove-unused-css')
-const removeAttributes = require('./remove-attributes')
-const attributeToStyle = require('./attribute-to-style')
-const removeInlineSizes = require('./remove-inline-sizes')
-const applyExtraAttributes = require('./extra-attributes')
-const removeInlineBgColor = require('./remove-inline-bgcolor')
-
-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 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 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 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.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/{inline.js → inlineCss.js}

@@ -1,7 +1,5 @@
 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) {
@@ -9,7 +7,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)) {
@@ -32,17 +30,6 @@ module.exports = async (html, config = {}, direct = false) => {
 
     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
   }
 

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,20 +1,27 @@
-const {get, isEmpty} = require('lodash')
+/* eslint-disable camelcase */
 const pretty = require('pretty')
+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
+    indent_inner_html: false, // Helps reduce file size
+    extra_liners: [] // Don't add extra new line before any tag
   }
 
-  config = direct ? config : get(config, 'prettify', {})
+  config = direct ? config : get(config, 'prettify')
 
-  if (typeof config === 'boolean' && config) {
-    return pretty(html)
+  // Don't prettify if not explicitly enabled in config
+  if (!config || (isObject(config) && isEmpty(config))) {
+    return html
   }
 
-  if (!isEmpty(config)) {
-    return pretty(html, config)
+  if (typeof config === 'boolean' && config) {
+    return pretty(html, defaultConfig)
   }
 
-  return html
+  config = merge(defaultConfig, config)
+
+  return pretty(html, config)
 }

package/src/transformers/{remove-attributes.js → removeAttributes.js}

@@ -8,7 +8,7 @@ module.exports = async (html, config = {}, direct = false) => {
 
   attributes.push({name: 'style'}, {name: 'class'})
 
-  // Allow ommiting `value` key when removing empty attributes
+  // Allow omitting `value` key when removing empty attributes
   attributes.forEach(attr => {
     attr.value = attr.value || ''
   })

package/src/transformers/{remove-inline-bgcolor.js → 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,70 @@
+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
+            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

@@ -0,0 +1,40 @@
+const {comb} = require('email-comb')
+const {get, isEmpty} = require('lodash')
+
+module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'removeUnusedCSS') === false) {
+    return html
+  }
+
+  const options = direct ? config : get(config, 'removeUnusedCSS', {})
+
+  const safelist = [
+    '*body*', // Gmail
+    '.gmail*', // Gmail
+    '.apple*', // Apple Mail
+    '.ios*', // Mail on iOS
+    '.ox-*', // Open-Xchange
+    '.outlook*', // Outlook.com
+    '.ogs*', // 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, {whitelist: safelist}).result
+  }
+
+  if (!isEmpty(options)) {
+    options.whitelist = [...get(options, 'whitelist', []), ...safelist]
+
+    return comb(html, options).result
+  }
+
+  return html
+}

package/src/transformers/{safe-class-names.js → safeClassNames.js}

@@ -3,11 +3,17 @@ const posthtml = require('posthtml')
 const safeClassNames = require('posthtml-safe-class-names')
 
 module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'safeClassNames') === false) {
+  const option = get(config, 'safeClassNames')
+
+  if (option === false) {
     return html
   }
 
-  if (config.env === 'local') {
+  /*
+   * Setting it to `true` in the config will run `safeClassNames`
+   * no matter the environment.
+   */
+  if (config.env === 'local' && !option) {
     return html
   }
 

package/src/transformers/shorthandInlineCSS.js

@@ -0,0 +1,19 @@
+const posthtml = require('posthtml')
+const {get, isObject, isEmpty} = require('lodash')
+const mergeLonghand = require('posthtml-postcss-merge-longhand')
+
+module.exports = async (html, config, direct = false) => {
+  config = direct ? (isObject(config) ? config : true) : get(config, 'shorthandInlineCSS', [])
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  if (typeof config === 'boolean' && config) {
+    html = await posthtml([mergeLonghand()]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  if (isObject(config) && !isEmpty(config)) {
+    html = await posthtml([mergeLonghand(config)]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  return html
+}

package/src/transformers/sixHex.js

@@ -0,0 +1,33 @@
+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 = {}) => {
+  if (get(config, 'sixHex') === false) {
+    return 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)
+}

package/src/utils/helpers.js

@@ -1,5 +1,3 @@
-const readline = require('readline')
-
 module.exports = {
   asyncForEach: async (array, callback) => {
     for (let index = 0; index < array.length; index++) {
@@ -14,10 +12,6 @@ module.exports = {
       throw new Error(`could not load ${module}`)
     }
   },
-  clearConsole: () => {
-    const blank = '\n'.repeat(process.stdout.rows)
-    console.log(blank)
-    readline.cursorTo(process.stdout, 0, 0)
-    readline.clearScreenDown(process.stdout)
-  }
+  // https://github.com/lukeed/console-clear
+  clearConsole: () => process.stdout.write('\x1B[H\x1B[2J')
 }

package/test/expected/posthtml/component.html

@@ -0,0 +1,13 @@
+Variable from attribute: Example
+
+Variable from locals attribute: bar
+
+
+Variable from page: maizzle-ci
+
+  Variable from attribute: Nested component
+
+Variable from locals attribute: bar (nested)
+
+
+Variable from page (nested): maizzle-ci

package/test/expected/{inheritance.html → posthtml/extend-template.html}

@@ -1,2 +1,2 @@
-Parent
-    Child in second.html
+Parent
+    Child in second.html

package/test/expected/posthtml/fetch.html

@@ -0,0 +1,5 @@
+Leanne Graham
+
+Ervin Howell
+
+Clementine Bauch

package/test/expected/posthtml/layout.html

@@ -0,0 +1,3 @@
+    Environment: maizzle-ci
+
+    Front matter variable: Hello

package/test/expected/transformers/atimport-in-style.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <style>div {
+  margin-top: 1px;
+  margin-right: 2px;
+  margin-bottom: 3px;
+  margin-left: 4px;
+}
+    </style>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
+</html>

package/test/expected/transformers/base-url.html

@@ -0,0 +1,99 @@
+<html>
+  <head>
+    <style>.test {
+        background-image: url('https://example.com/image.jpg');
+        background: url('https://example.com/image.jpg');
+        background-image: url('https://preserve.me/image.jpg');
+        background: url('https://preserve.me/image.jpg');
+      }
+
+      .test-2 {
+        background-image: url("https://example.com/image.jpg");
+        background: url("https://example.com/image.jpg");
+        background-image: url("https://preserve.me/image.jpg");
+        background: url("https://preserve.me/image.jpg");
+      }
+
+      .test-3 {
+        background-image: url(https://example.com/image.jpg);
+        background: url(https://example.com/image.jpg);
+        background-image: url(https://preserve.me/image.jpg);
+        background: url(https://preserve.me/image.jpg);
+      }</style>
+  </head>
+
+  <body>
+    <img src="https://example.com/test.jpg">
+    <img src="https://example.com/test.jpg">
+
+    <img src="https://example.com/image1.jpg" srcset="https://example.com/image1-HD.jpg 2x, https://example.com/image1-phone.jpg 100w">
+
+    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
+
+    <picture>
+      <source media="(max-width: 799px)" srcset="https://example.com/elva-480w-close-portrait.jpg">
+      <source media="(min-width: 800px)" srcset="https://example.com/elva-800w.jpg">
+      <img src="https://example.com/elva-800w.jpg" alt="...">
+    </picture>
+
+    <video width="250" poster="https://example.com/flower.jpg">
+      <source src="https://example.com/media/flower.webm" type="video/webm">
+      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
+      <track default="" kind="captions" srclang="en" src="https://example.com/media/tracks/friday.vtt">
+    </video>
+
+    <audio src="https://example.com/media/sample.mp3">
+      Fallback content
+    </audio>
+
+    <embed type="video/webm" src="https://example.com/media/flower.mp4" width="250" height="200">
+
+    <iframe width="300" height="200" src="https://example.com/embed.html"></iframe>
+
+    <input type="image" src="https://example.com/image.jpg" alt="">
+
+    <script src="https://example.com/javascript.js"></script>
+
+    <div>
+      <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="width:600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
+      <v:textbox inset="0,0,0,0"><div><![endif]-->
+        <div>test</div>
+      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
+    </div>
+
+    <!--[if mso]>
+      <v:image src="https://example.com/image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
+    <![endif]-->
+
+    <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
+    <![endif]-->
+
+    <table>
+      <tr>
+        <td background="https://example.com/image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
+          <!--[if gte mso 9]>
+          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
+            <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+            <v:textbox inset="0,0,0,0">
+          <![endif]-->
+          <div>test</div>
+          <!--[if gte mso 9]>
+            </v:textbox>
+          </v:rect>
+          <![endif]-->
+        </td>
+      </tr>
+    </table>
+
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
+
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
+  </body>
+</html>