@maizzle/framework 4.4.0-beta.2 → 4.4.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.4.0-beta.2",
+  "version": "4.4.0-beta.3",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",

package/src/transformers/index.js

@@ -28,7 +28,6 @@ exports.process = async (html, config) => {
   html = await inline(html, config)
   html = await shorthandInlineCSS(html, config)
   html = await removeUnusedCSS(html, config)
-  html = await removeInlinedClasses(html, config)
   html = await removeInlineSizes(html, config)
   html = await removeInlineBgColor(html, config)
   html = await removeAttributes(html, config)
@@ -54,7 +53,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, true)
+exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config)
 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/removeInlinedSelectors.js

@@ -20,16 +20,26 @@ const plugin = posthtmlOptions => tree => {
     // For each style tag...
     if (node.tag === 'style') {
       const {root} = postcss().process(node.content)
+      const preservedClasses = []
 
-      root.walkRules(rule => {
-        // Skip media queries and such...
-        if (rule.parent.type === 'atrule') {
-          return
+      // Preserve selectors in at rules
+      root.walkAtRules(rule => {
+        if (['media', 'supports'].includes(rule.name)) {
+          rule.walkRules(rule => {
+            preservedClasses.push(rule.selector)
+          })
         }
+      })
 
+      root.walkRules(rule => {
         const {selector} = rule
         const prop = get(rule.nodes[0], 'prop')
 
+        // Preserve pseudo selectors
+        if (selector.includes(':')) {
+          preservedClasses.push(selector)
+        }
+
         try {
           // If we find the selector in the HTML...
           tree.match(matchHelper(selector), n => {
@@ -39,23 +49,16 @@ const plugin = posthtmlOptions => tree => {
 
             // 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 class as long as it's not a preserved class
+              if (!preservedClasses.some(item => item.endsWith(selector) || item.startsWith(selector))) {
+                remove(classAttr, classToRemove => selector.includes(classToRemove))
+              }
 
               // 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 && prop.includes(key)) {
+              if (rule.parent.type !== 'atrule') {
                 rule.remove()
-                remove(classAttr, s => selector.includes(s))
               }
-            })
+            }
 
             n.attrs = parsedAttrs.compose()
 

package/src/transformers/removeUnusedCss.js

@@ -1,15 +1,13 @@
 const {comb} = require('email-comb')
 const {get, merge} = require('lodash')
+const removeInlinedClasses = require('./removeInlinedSelectors')
 
-module.exports = async (html, config = {}, direct = false) => {
+module.exports = async (html, config = {}) => {
+  // If it's explicitly disabled, return the HTML
   if (get(config, 'removeUnusedCSS') === false) {
     return html
   }
 
-  if (!direct && !get(config, 'removeUnusedCSS')) {
-    return html
-  }
-
   const safelist = [
     '*body*', // Gmail
     '.gmail*', // Gmail
@@ -36,9 +34,9 @@ module.exports = async (html, config = {}, direct = false) => {
     whitelist: [...get(config, 'whitelist', []), ...safelist]
   }
 
-  const options = typeof config === 'boolean' && config ?
-    defaultOptions :
-    merge(defaultOptions, get(config, 'removeUnusedCSS', config))
+  const options = merge(defaultOptions, get(config, 'removeUnusedCSS', config))
+
+  html = await removeInlinedClasses(html, options)
 
   return comb(html, options).result
 }