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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.4.0-beta.13",
+  "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() :
         () => {},