@maizzle/framework 4.4.3 → 4.4.5

package/package.json

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

package/src/generators/tailwindcss.js

@@ -92,7 +92,9 @@ module.exports = {
 
     if (buildTemplates) {
       const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
-      const fileTypes = get(buildTemplates, 'filetypes', 'html')
+      const configFileTypes = get(buildTemplates, 'filetypes', ['html'])
+      const fileTypes = Array.isArray(configFileTypes) ? configFileTypes : configFileTypes.split('|')
+      const fileTypesPattern = fileTypes.length > 1 ? `{${fileTypes.join(',')}}` : fileTypes[0]
 
       templateObjects.forEach(template => {
         const source = get(template, 'source')
@@ -101,7 +103,7 @@ module.exports = {
           const sources = source(config)
 
           if (Array.isArray(sources)) {
-            sources.map(s => tailwindConfig.content.files.push(`${s}/**/*.${fileTypes}`))
+            sources.map(s => tailwindConfig.content.files.push(`${s}/**/*.${fileTypesPattern}`))
           } else if (typeof sources === 'string') {
             tailwindConfig.content.files.push(sources)
           }
@@ -114,7 +116,7 @@ module.exports = {
 
         // Default behavior - directory sources as a string
         else {
-          tailwindConfig.content.files.push(`${source}/**/*.${fileTypes}`)
+          tailwindConfig.content.files.push(`${source}/**/*.${fileTypesPattern}`)
         }
       })
     }

package/src/transformers/removeInlinedSelectors.js

@@ -6,16 +6,19 @@ const matchHelper = require('posthtml-match-helper')
 const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}) => {
-  if (get(config, 'removeInlinedClasses') === false) {
+  if (get(config, 'removeInlinedSelectors') === false) {
     return html
   }
 
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
+  const options = {
+    posthtml: merge(defaultConfig, get(config, 'build.posthtml.options', {})),
+    removeUnusedCSS: config
+  }
 
-  return posthtml([plugin(posthtmlOptions)]).process(html, posthtmlOptions).then(result => result.html)
+  return posthtml([plugin(options)]).process(html, options.posthtml).then(result => result.html)
 }
 
-const plugin = posthtmlOptions => tree => {
+const plugin = (options = {}) => tree => {
   const process = node => {
     // For each style tag...
     if (node.tag === 'style') {
@@ -41,8 +44,16 @@ const plugin = posthtmlOptions => tree => {
         }
 
         try {
+          const safelist = get(options.removeUnusedCSS, 'whitelist', [])
+
           // If we find the selector in the HTML...
           tree.match(matchHelper(selector), n => {
+            // If the selector is safelisted, preserve it
+            if (safelist.some(item => item.endsWith(selector) || item.startsWith(selector))) {
+              preservedClasses.push(selector)
+              return n
+            }
+
             const parsedAttrs = parseAttrs(n.attrs)
             const classAttr = get(parsedAttrs, 'class', [])
             const styleAttr = get(parsedAttrs, 'style', {})
@@ -64,7 +75,7 @@ const plugin = posthtmlOptions => tree => {
 
             // Fix issue with .compose() automatically quoting attributes with no values
             Object.entries(n.attrs).forEach(([name, value]) => {
-              if (value === '' && get(posthtmlOptions, 'recognizeNoValueAttribute') === true) {
+              if (value === '' && get(options.posthtml, 'recognizeNoValueAttribute') === true) {
                 n.attrs[name] = true
               }
             })

package/src/transformers/removeUnusedCss.js

@@ -33,10 +33,10 @@ module.exports = async (html, config = {}, direct = false) => {
       {heads: '{{', tails: '}}'},
       {heads: '{%', tails: '%}'}
     ],
-    whitelist: [...get(config, 'whitelist', []), ...safelist]
+    whitelist: get(config, 'whitelist', safelist)
   }
 
-  const options = merge(defaultOptions, get(config, 'removeUnusedCSS', {}))
+  const options = merge(defaultOptions, config)
 
   /**
    * Remove possibly inlined selectors, as long as we're not calling