@maizzle/framework 4.0.0-alpha.9 → 4.0.2

package/src/transformers/removeInlineBackgroundColor.js

@@ -1,52 +1,52 @@
-const posthtml = require('posthtml')
-const {get, isEmpty} = require('lodash')
-const parseAttrs = require('posthtml-attrs-parser')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  if (isEmpty(config)) {
-    return posthtml([removeInlineBGColor()]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  if (get(config, 'inlineCSS.preferBgColorAttribute') === true) {
-    return posthtml([removeInlineBGColor()]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  const tags = direct ? (Array.isArray(config) ? config : false) : get(config, 'inlineCSS.preferBgColorAttribute', false)
-
-  if (Array.isArray(tags)) {
-    return posthtml([removeInlineBGColor({tags})]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  return html
-}
-
-const removeInlineBGColor = (options = {}) => tree => {
-  options.tags = options.tags || ['body', 'marquee', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr']
-
-  const process = node => {
-    if (!options.tags.includes(node.tag)) {
-      return node
-    }
-
-    const attrs = parseAttrs(node.attrs, {
-      rules: {
-        bgcolor: {
-          delimiter: /\s+/,
-          glue: ' '
-        }
-      }
-    })
-
-    if (attrs.style && attrs.style['background-color']) {
-      attrs.bgcolor = attrs.style['background-color']
-      delete attrs.style['background-color']
-      node.attrs = attrs.compose()
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
+const posthtml = require('posthtml')
+const {get, isEmpty} = require('lodash')
+const parseAttrs = require('posthtml-attrs-parser')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  if (isEmpty(config)) {
+    return posthtml([removeInlineBGColor()]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  if (get(config, 'inlineCSS.preferBgColorAttribute') === true) {
+    return posthtml([removeInlineBGColor()]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  const tags = direct ? (Array.isArray(config) ? config : false) : get(config, 'inlineCSS.preferBgColorAttribute', false)
+
+  if (Array.isArray(tags)) {
+    return posthtml([removeInlineBGColor({tags})]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  return html
+}
+
+const removeInlineBGColor = (options = {}) => tree => {
+  options.tags = options.tags || ['body', 'marquee', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr']
+
+  const process = node => {
+    if (!options.tags.includes(node.tag)) {
+      return node
+    }
+
+    const attrs = parseAttrs(node.attrs, {
+      rules: {
+        bgcolor: {
+          delimiter: /\s+/,
+          glue: ' '
+        }
+      }
+    })
+
+    if (attrs.style && attrs.style['background-color']) {
+      attrs.bgcolor = attrs.style['background-color']
+      delete attrs.style['background-color']
+      node.attrs = attrs.compose()
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}

package/src/transformers/removeInlineSizes.js

@@ -1,41 +1,41 @@
-const posthtml = require('posthtml')
-const {get, isEmpty} = require('lodash')
-const parseAttrs = require('posthtml-attrs-parser')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const settings = direct ? config : get(config, 'inlineCSS.keepOnlyAttributeSizes', {})
-
-  if (!isEmpty(settings)) {
-    const posthtmlOptions = get(config, 'build.posthtml.options', {})
-    return posthtml([removeInlineSizes(settings)]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  return html
-}
-
-const removeInlineSizes = (mappings = {}) => tree => {
-  const process = node => {
-    const attrs = parseAttrs(node.attrs)
-    const tag = node.tag ? node.tag.toUpperCase() : ''
-
-    Object.entries(mappings).forEach(([attribute, tags]) => {
-      tags = Object.values(tags)
-
-      if (!tags.includes(tag)) {
-        return node
-      }
-
-      tags.forEach(() => {
-        if (attrs.style) {
-          delete attrs.style[attribute]
-        }
-      })
-    })
-
-    node.attrs = attrs.compose()
-
-    return node
-  }
-
-  return tree.walk(process)
-}
+const posthtml = require('posthtml')
+const {get, isEmpty} = require('lodash')
+const parseAttrs = require('posthtml-attrs-parser')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const settings = direct ? config : get(config, 'inlineCSS.keepOnlyAttributeSizes', {})
+
+  if (!isEmpty(settings)) {
+    const posthtmlOptions = get(config, 'build.posthtml.options', {})
+    return posthtml([removeInlineSizes(settings)]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  return html
+}
+
+const removeInlineSizes = (mappings = {}) => tree => {
+  const process = node => {
+    const attrs = parseAttrs(node.attrs)
+    const tag = node.tag ? node.tag.toUpperCase() : ''
+
+    Object.entries(mappings).forEach(([attribute, tags]) => {
+      tags = Object.values(tags)
+
+      if (!tags.includes(tag)) {
+        return node
+      }
+
+      tags.forEach(() => {
+        if (attrs.style) {
+          delete attrs.style[attribute]
+        }
+      })
+    })
+
+    node.attrs = attrs.compose()
+
+    return node
+  }
+
+  return tree.walk(process)
+}

package/src/transformers/replaceStrings.js

@@ -1,14 +1,14 @@
-const {isEmpty, get} = require('lodash')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const replacements = direct ? config : get(config, 'replaceStrings', {})
-
-  if (!isEmpty(replacements)) {
-    Object.entries(replacements).forEach(([k, v]) => {
-      const regex = new RegExp(k, 'gi')
-      html = html.replace(regex, v)
-    })
-  }
-
-  return html
-}
+const {isEmpty, get} = require('lodash')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const replacements = direct ? config : get(config, 'replaceStrings', {})
+
+  if (!isEmpty(replacements)) {
+    Object.entries(replacements).forEach(([k, v]) => {
+      const regex = new RegExp(k, 'gi')
+      html = html.replace(regex, v)
+    })
+  }
+
+  return html
+}

package/src/transformers/safeClassNames.js

@@ -1,24 +1,24 @@
-const {get} = require('lodash')
-const posthtml = require('posthtml')
-const safeClassNames = require('posthtml-safe-class-names')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const option = get(config, 'safeClassNames')
-
-  if (option === false) {
-    return html
-  }
-
-  /*
-   * Setting it to `true` in the config will run `safeClassNames`
-   * no matter the environment.
-   */
-  if (config.env === 'local' && !option) {
-    return html
-  }
-
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  const replacements = direct ? config : get(config, 'safeClassNames', {})
-
-  return posthtml([safeClassNames({replacements})]).process(html, posthtmlOptions).then(result => result.html)
-}
+const {get} = require('lodash')
+const posthtml = require('posthtml')
+const safeClassNames = require('posthtml-safe-class-names')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const option = get(config, 'safeClassNames')
+
+  if (option === false) {
+    return html
+  }
+
+  /*
+   * Setting it to `true` in the config will run `safeClassNames`
+   * no matter the environment.
+   */
+  if (config.env === 'local' && !option) {
+    return html
+  }
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const replacements = direct ? config : get(config, 'safeClassNames', {})
+
+  return posthtml([safeClassNames({replacements})]).process(html, posthtmlOptions).then(result => result.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

@@ -1,33 +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)
-}
+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/transformers/urlParameters.js

@@ -1,17 +1,17 @@
-const posthtml = require('posthtml')
-const {get, isEmpty} = require('lodash')
-const urlParams = require('posthtml-url-parameters')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const urlParameters = direct ? config : get(config, 'urlParameters', {})
-
-  if (!isEmpty(urlParameters)) {
-    const {_options, ...parameters} = urlParameters
-    const {tags, qs} = _options || {tags: ['a'], qs: {encode: false}}
-    const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-    return posthtml([urlParams({parameters, tags, qs})]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  return html
-}
+const posthtml = require('posthtml')
+const {get, isEmpty} = require('lodash')
+const urlParams = require('posthtml-url-parameters')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const urlParameters = direct ? config : get(config, 'urlParameters', {})
+
+  if (!isEmpty(urlParameters)) {
+    const {_options, ...parameters} = urlParameters
+    const {tags, qs} = _options || {tags: ['a'], qs: {encode: false}}
+    const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+    return posthtml([urlParams({parameters, tags, qs})]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  return html
+}

package/src/utils/helpers.js

@@ -1,17 +1,17 @@
-module.exports = {
-  asyncForEach: async (array, callback) => {
-    for (let index = 0; index < array.length; index++) {
-      await callback(array[index], index, array) // eslint-disable-line
-    }
-  },
-  requireUncached: module => {
-    try {
-      delete require.cache[require.resolve(module)]
-      return require(module)
-    } catch {
-      throw new Error(`could not load ${module}`)
-    }
-  },
-  // https://github.com/lukeed/console-clear
-  clearConsole: () => process.stdout.write('\x1B[H\x1B[2J')
-}
+module.exports = {
+  asyncForEach: async (array, callback) => {
+    for (let index = 0; index < array.length; index++) {
+      await callback(array[index], index, array) // eslint-disable-line
+    }
+  },
+  requireUncached: module => {
+    try {
+      delete require.cache[require.resolve(module)]
+      return require(module)
+    } catch {
+      throw new Error(`could not load ${module}`)
+    }
+  },
+  // https://github.com/lukeed/console-clear
+  clearConsole: () => process.stdout.write('\x1B[H\x1B[2J')
+}

package/test/expected/posthtml/component.html

@@ -5,7 +5,7 @@ Variable from locals attribute: bar
 
 Variable from page: maizzle-ci
 
-Variable from attribute: Nested component
+  Variable from attribute: Nested component
 
 Variable from locals attribute: bar (nested)
 

package/test/expected/posthtml/extend-template.html

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

package/test/expected/posthtml/fetch.html

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

package/test/expected/posthtml/layout.html

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

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

@@ -1,16 +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>
+  <head>
+    <style>div {
+  margin-top: 1px;
+  margin-right: 2px;
+  margin-bottom: 3px;
+  margin-left: 4px;
+}
+    </style>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
 </html>