@maizzle/framework 4.2.5 → 4.3.1

package/README.md

@@ -1,10 +1,10 @@
 <div align="center">
   <p>
-    <a href="https://maizzle.com/#gh-light-mode-only" target="_blank">
-      <img src="./.github/media/logo-light.svg" alt="Maizzle" width="300">
-    </a>
-    <a href="https://maizzle.com/#gh-dark-mode-only" target="_blank">
-      <img src="./.github/media/logo-dark.svg" alt="Maizzle" width="300">
+    <a href="https://maizzle.com" target="_blank">
+      <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/maizzle/framework/HEAD/.github/media/logo-dark.svg">
+        <img alt="Maizzle" src="https://raw.githubusercontent.com/maizzle/framework/HEAD/.github/media/logo-light.svg" width="300" height="225" style="max-width: 100%;">
+      </picture>
     </a>
   </p>
   <p>Quickly build HTML emails with utility-first CSS</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.2.5",
+  "version": "4.3.1",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -41,7 +41,7 @@
   ],
   "dependencies": {
     "@maizzle/cli": "^1.5.1",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.13",
     "browser-sync": "^2.26.13",
     "color-shorthand-hex-to-six-digit": "^3.0.2",
     "email-comb": "^5.2.0",
@@ -53,9 +53,9 @@
     "juice": "^8.0.0",
     "lodash": "^4.17.20",
     "ora": "^5.1.0",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.19",
     "postcss-import": "^15.0.0",
-    "postcss-merge-longhand": "^5.0.1",
+    "postcss-merge-longhand": "^5.1.7",
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^0.1.1",
     "posthtml-base-url": "^1.0.1",
@@ -75,10 +75,10 @@
     "query-string": "^7.1.0",
     "string-remove-widows": "^2.1.0",
     "string-strip-html": "^8.2.0",
-    "tailwindcss": "^3.1.0"
+    "tailwindcss": "^3.2.4"
   },
   "devDependencies": {
-    "ava": "^4.0.1",
+    "ava": "^5.1.0",
     "c8": "^7.11.0",
     "np": "*",
     "xo": "0.39.1"

package/src/generators/tailwindcss.js

@@ -113,7 +113,7 @@ module.exports = {
     }
 
     return postcss([...toProcess])
-      .process(css, {from: undefined})
+      .process(css, {from: userFileExists ? userFilePath : undefined})
       .then(result => result.css)
       .catch(error => {
         throw new SyntaxError(error)

package/src/transformers/filters/index.js

@@ -8,6 +8,10 @@ const safeClassNames = require('posthtml-safe-class-names')
 const defaultConfig = require('../../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'filters') === false) {
+    return html
+  }
+
   const filters = direct ?
     merge(defaultFilters, config) :
     merge(defaultFilters, get(config, 'filters', {}))

package/src/transformers/index.js

@@ -54,7 +54,7 @@ exports.addURLParams = (html, config) => addURLParams(html, config, true)
 exports.preventWidows = (html, config) => preventWidows(html, config)
 exports.replaceStrings = (html, config) => replaceStrings(html, config, true)
 exports.safeClassNames = (html, config) => safeClassNames(html, config, true)
-exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config)
+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)

package/src/transformers/inlineCss.js

@@ -7,14 +7,17 @@ module.exports = async (html, config = {}, direct = false) => {
   }
 
   const options = direct ? config : get(config, 'inlineCSS', {})
+  // Default `removeStyleTags` to false so we can preserve
+  // CSS selectors that are not present in the HTML
   const removeStyleTags = get(options, 'removeStyleTags', false)
   const css = get(config, 'customCSS', false)
 
   if (get(config, 'inlineCSS') === true || !isEmpty(options)) {
+    options.applyAttributesTableElements = true
     juice.styleToAttribute = get(options, 'styleToAttribute', {'vertical-align': 'valign'})
 
-    juice.widthElements = get(options, 'applyWidthAttributes', [])
-    juice.heightElements = get(options, 'applyHeightAttributes', [])
+    juice.widthElements = get(options, 'applyWidthAttributes', []).map(i => i.toUpperCase())
+    juice.heightElements = get(options, 'applyHeightAttributes', []).map(i => i.toUpperCase())
 
     juice.excludedProperties = ['--tw-shadow']
 
@@ -28,7 +31,9 @@ module.exports = async (html, config = {}, direct = false) => {
       })
     }
 
-    html = css ? juice.inlineContent(html, css, {removeStyleTags}) : juice(html, {removeStyleTags})
+    html = css ?
+      juice.inlineContent(html, css, {removeStyleTags, ...options}) :
+      juice(html, {removeStyleTags, ...options})
 
     return html
   }

package/src/transformers/removeInlineSizes.js

@@ -19,12 +19,11 @@ module.exports = async (html, config = {}, direct = false) => {
 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)
+      tags = Object.values(tags).map(tag => tag.toLowerCase())
 
-      if (!tags.includes(tag)) {
+      if (!tags.includes(node.tag)) {
         return node
       }
 

package/src/transformers/removeUnusedCss.js

@@ -1,11 +1,15 @@
 const {comb} = require('email-comb')
 const {get, merge} = require('lodash')
 
-module.exports = async (html, config = {}) => {
+module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'removeUnusedCSS') === false) {
     return html
   }
 
+  if (!direct && !get(config, 'removeUnusedCSS')) {
+    return html
+  }
+
   const safelist = [
     '*body*', // Gmail
     '.gmail*', // Gmail
@@ -13,7 +17,7 @@ module.exports = async (html, config = {}) => {
     '.ios*', // Mail on iOS
     '.ox-*', // Open-Xchange
     '.outlook*', // Outlook.com
-    '.ogs*', // Outlook.com
+    '[data-ogs*', // Outlook.com
     '.bloop_container', // Airmail
     '.Singleton', // Apple Mail 10
     '.unused', // Notes 8