@maizzle/framework 4.4.0-beta.12 → 4.4.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.4.0-beta.12",
+  "version": "4.4.0-beta.14",
   "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

@@ -8,6 +8,22 @@ const {requireUncached} = require('../utils/helpers')
 const mergeLonghand = require('postcss-merge-longhand')
 const {get, isObject, isEmpty, merge} = require('lodash')
 
+const addImportantPlugin = () => {
+  return {
+    postcssPlugin: 'add-important',
+    Rule(rule) {
+      const shouldAddImportant = get(rule, 'raws.tailwind.layer') === 'variants'
+      || get(rule, 'parent.type') === 'atrule'
+
+      if (shouldAddImportant) {
+        rule.walkDecls(decl => {
+          decl.important = true
+        })
+      }
+    }
+  }
+}
+
 module.exports = {
   compile: async ({css = '', html = '', config = {}}) => {
     // Compute the Tailwind config to use
@@ -34,25 +50,30 @@ module.exports = {
     const layoutsRoot = get(config, 'build.layouts.root')
     const componentsRoot = get(config, 'build.components.root')
 
+    const layoutsPath = typeof layoutsRoot === 'string' && layoutsRoot ?
+      `${layoutsRoot}/**/*.html`.replace(/\/\//g, '/') :
+      './src/layouts/**/*.html'
+
+    const componentsPath = typeof componentsRoot === 'string' && componentsRoot ?
+      `${componentsRoot}/**/*.html`.replace(/\/\//g, '/') :
+      './src/components/**/*.html'
+
     const tailwindConfig = merge({
-      important: true,
       content: {
         files: [
-          typeof layoutsRoot === 'string' && layoutsRoot ?
-            `${layoutsRoot}/**/*.html`.replace(/\/\//g, '/') :
-            './src/layouts/**/*.html',
-          typeof componentsRoot === 'string' && componentsRoot ?
-            `${componentsRoot}/**/*.html`.replace(/\/\//g, '/') :
-            './src/components/**/*.html',
+          layoutsPath,
+          componentsPath,
           {raw: html, extension: 'html'}
         ]
       }
     }, userConfig(config))
 
-    // Add back the `{raw: html}` option if user provided own config
+    // If `content` is an array, add it to `content.files`
     if (Array.isArray(tailwindConfig.content)) {
       tailwindConfig.content = {
         files: [
+          layoutsPath,
+          componentsPath,
           ...tailwindConfig.content,
           {raw: html, extension: 'html'}
         ]
@@ -99,6 +120,7 @@ module.exports = {
     const toProcess = [
       postcssNested(),
       tailwindcss(tailwindConfig),
+      get(tailwindConfig, 'important') === false ? () => {} : addImportantPlugin(),
       get(config, 'shorthandCSS', get(config, 'shorthandInlineCSS')) === true ?
         mergeLonghand() :
         () => {},

package/src/transformers/index.js

@@ -53,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)
+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/removeUnusedCss.js

@@ -1,10 +1,12 @@
 const {comb} = require('email-comb')
-const {get, merge} = require('lodash')
+const {get, merge, isEmpty, isObject} = require('lodash')
 const removeInlinedClasses = require('./removeInlinedSelectors')
 
-module.exports = async (html, config = {}) => {
-  // If it's explicitly disabled, return the HTML
-  if (get(config, 'removeUnusedCSS') === false) {
+module.exports = async (html, config = {}, direct = false) => {
+  config = direct ? config : get(config, 'removeUnusedCSS')
+
+  // Don't purge CSS if `removeUnusedCSS` is not set
+  if (!config || (isObject(config) && isEmpty(config))) {
     return html
   }
 
@@ -34,9 +36,13 @@ module.exports = async (html, config = {}) => {
     whitelist: [...get(config, 'whitelist', []), ...safelist]
   }
 
-  const options = merge(defaultOptions, get(config, 'removeUnusedCSS', config))
+  const options = merge(defaultOptions, get(config, 'removeUnusedCSS', {}))
 
-  html = await removeInlinedClasses(html, options)
+  /**
+   * Remove possibly inlined selectors, as long as we're not calling
+   * this function directly, i.e. Maizzle.removeUnusedCSS()
+   *  */
+  html = direct ? html : await removeInlinedClasses(html, options)
 
   return comb(html, options).result
 }