@maizzle/framework 4.0.0-alpha.8 → 4.0.1

package/src/transformers/removeUnusedCss.js

@@ -1,35 +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
-    '.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, {whitelist: safelist}).result
-  }
-
-  if (!isEmpty(options)) {
-    options.whitelist = [...get(options, 'whitelist', []), ...safelist]
-
-    return comb(html, options).result
-  }
-
-  return html
-}
+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/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

@@ -1,13 +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
+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/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

@@ -6,7 +6,8 @@
   margin-right: 2px;
   margin-bottom: 3px;
   margin-left: 4px;
-}</style>
+}
+    </style>
   </head>
   <body>
     <div>test</div>

package/test/expected/transformers/{base-image-url.html → base-url.html}

@@ -56,13 +56,21 @@
 
     <div>
       <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="600px;height:400px;" />
-      <v:rect fill="false" stroke="false" style="position:absolute;600px;height:400px;">
+      <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">
@@ -79,5 +87,13 @@
         </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>

package/test/expected/transformers/filters.html

@@ -0,0 +1,81 @@
+<!-- Append -->
+<div>testing append</div>
+<!-- Prepend -->
+<div>testing prepend</div>
+
+<!-- Uppercase -->
+<div>TEST</div>
+<!-- Lowercase -->
+<div>test</div>
+<!-- Capitalize -->
+<div>Test</div>
+
+<!-- Ceil -->
+<div>2</div>
+<!-- Floor -->
+<div>1</div>
+<!-- Round -->
+<div>1235</div>
+
+<!-- Escape -->
+<div>&#34;&amp;&#39;&lt;&gt;</div>
+<!-- Escape Once -->
+<div>1 &lt; 2 &amp; 3</div>
+
+<!-- lstrip -->
+<div>test   </div>
+<!-- rstrip -->
+<div>   test</div>
+<!-- trim -->
+<div>test</div>
+
+<!-- Minus -->
+<div>1.02</div>
+<!-- Plus -->
+<div>5.02</div>
+<!-- Times -->
+<div>12.08</div>
+<!-- Divide -->
+<div>6.04</div>
+<!-- Modulo -->
+<div>1</div>
+
+<!-- Newline to br -->
+<div><br>  test<br>  test<br></div>
+<!-- Strip newlines -->
+<div>  test  test</div>
+
+<!-- Remove -->
+<div>I sted to see the t through the </div>
+<!-- Remove First -->
+<div>I sted to see the train through the rain</div>
+
+<!-- Replace -->
+<div>testestest</div>
+<!-- Replace First -->
+<div>testest</div>
+
+<!-- Size -->
+<div>33</div>
+
+<!-- Slice -->
+<div>est</div>
+<!-- Slice with endIndex -->
+<div>tes</div>
+
+<!-- Truncate -->
+<div>Ground control to...</div>
+<!-- Truncate (do nothing) -->
+<div>Ground control to</div>
+<!-- Truncate with custom ellipsis -->
+<div>Ground control to no one</div>
+
+<!-- Truncate words -->
+<div>Ground control...</div>
+<!-- Truncate words with custom ellipsis -->
+<div>Ground control over and out</div>
+
+<!-- URL decode -->
+<div>'Stop!' said Fred</div>
+<!-- URL encode -->
+<div>user%40example.com</div>

package/test/expected/transformers/preserve-transform-css.html

@@ -9,8 +9,16 @@
         display: table !important;
 } .contents {
         display: contents !important;
-} .transform {
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+} .truncate {
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+} .uppercase {
+        text-transform: uppercase !important;
+} .lowercase {
+        text-transform: lowercase !important;
+} .capitalize {
+        text-transform: capitalize !important;
 } div {
         text-transform: uppercase;
 } [data-ogsc] .inexistent {
@@ -19,7 +27,8 @@
         display: block !important;
       } u + #body a {
         color: inherit;
-      }</style>
+      }
+    </style>
   </head>
   <body>
     <div>test</div>

package/test/expected/useConfig.html

@@ -1,9 +1,9 @@
-<!doctype html>
-<html>
-  <head>
-    <title>test></title>
-  </head>
-  <body>
-    <div>build_production</div>
-  </body>
-</html>
+<!doctype html>
+<html>
+  <head>
+    <title>test></title>
+  </head>
+  <body>
+    <div>build_production</div>
+  </body>
+</html>

package/test/fixtures/basic.html

@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
-  <head>
-    <title>test></title>
-  </head>
-  <body>
-    <div>test</div>
-  </body>
+<head>
+  <title>test></title>
+</head>
+<body>
+  <div>test</div>
+</body>
 </html>

package/test/fixtures/posthtml/component.html

@@ -1,19 +1,19 @@
-<component
-  src="test/stubs/components/component.html"
-  text="Example"
-  locals='{
-    "foo": "bar"
-  }'
->
-  Variable from page: [[ page.env ]]
-
-  <component
-    src="test/stubs/components/component.html"
-    text="Nested component"
-    locals='{
-      "foo": "bar (nested)"
-    }'
-  >
-    Variable from page (nested): [[ page.env ]]
-  </component>
-</component>
+<component
+  src="test/stubs/components/component.html"
+  text="Example"
+  locals='{
+    "foo": "bar"
+  }'
+>
+Variable from page: [[ page.env ]]
+
+  <component
+    src="test/stubs/components/component.html"
+    text="Nested component"
+    locals='{
+      "foo": "bar (nested)"
+    }'
+  >
+Variable from page (nested): [[ page.env ]]
+  </component>
+</component>

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

@@ -1,7 +1,7 @@
----
-template: second
----
-
-<extends src="test/stubs/template.html">
-  <block name="button">Child in second.html</block>
-</extends>
+---
+template: second
+---
+
+<extends src="test/stubs/template.html">
+  <block name="button">Child in second.html</block>
+</extends>

package/test/fixtures/posthtml/fetch.html

@@ -1,9 +1,9 @@
-<extends src="test/stubs/layouts/basic.html">
-  <block name="template">
-    <fetch url="test/stubs/data.json">
-      <each loop="user in response">
-[[ user.name ]]
-      </each>
-    </fetch>
-  </block>
-</extends>
+<extends src="test/stubs/layouts/basic.html">
+  <block name="template">
+    <fetch url="test/stubs/data.json">
+      <each loop="user in response">
+[[ user.name ]]
+      </each>
+    </fetch>
+  </block>
+</extends>

package/test/fixtures/posthtml/layout.html

@@ -1,11 +1,11 @@
----
-greeting: Hello
----
-
-<extends src="test/stubs/layouts/basic.html">
-  <block name="template">
-    Environment: {{ page.env }}
-
-    Front matter variable: {{ page.greeting }}
-  </block>
-</extends>
+---
+greeting: Hello
+---
+
+<extends src="test/stubs/layouts/basic.html">
+  <block name="template">
+    Environment: {{ page.env }}
+
+    Front matter variable: {{ page.greeting }}
+  </block>
+</extends>