@maizzle/framework 4.4.0-beta.9 → 4.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.4.0-beta.9",
+  "version": "4.4.1",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -36,13 +36,13 @@
     "release": "np"
   },
   "files": [
-    "src/*",
+    "src/**/*",
     "bin/*"
   ],
   "dependencies": {
     "@maizzle/cli": "^1.5.1",
-    "autoprefixer": "^10.4.13",
-    "browser-sync": "^2.27.11",
+    "autoprefixer": "^10.4.14",
+    "browser-sync": "^2.28.3",
     "color-shorthand-hex-to-six-digit": "^3.0.2",
     "email-comb": "^5.2.0",
     "front-matter": "^4.0.0",
@@ -50,7 +50,7 @@
     "glob-promise": "^4.1.0",
     "html-crush": "^4.0.0",
     "is-url-superb": "^5.0.0",
-    "juice": "^8.0.0",
+    "juice": "^9.0.0",
     "lodash": "^4.17.20",
     "ora": "^5.1.0",
     "postcss": "^8.4.21",
@@ -58,27 +58,27 @@
     "postcss-merge-longhand": "^5.1.7",
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^0.1.1",
-    "posthtml-base-url": "^1.0.1",
-    "posthtml-component": "^1.0.0-beta.16",
+    "posthtml-base-url": "^2.0.0",
+    "posthtml-component": "^1.1.0",
     "posthtml-content": "^0.1.0",
     "posthtml-extend": "^0.6.0",
-    "posthtml-extra-attributes": "^1.0.0",
-    "posthtml-fetch": "^2.2.0",
+    "posthtml-extra-attributes": "^2.0.0",
+    "posthtml-fetch": "^3.0.0",
     "posthtml-markdownit": "^1.3.1",
     "posthtml-match-helper": "^1.0.3",
-    "posthtml-mso": "^1.0.4",
-    "posthtml-postcss-merge-longhand": "^1.0.2",
-    "posthtml-safe-class-names": "^2.0.0",
-    "posthtml-url-parameters": "^1.0.4",
+    "posthtml-mso": "^2.0.0",
+    "posthtml-postcss-merge-longhand": "^2.0.1",
+    "posthtml-safe-class-names": "^3.0.0",
+    "posthtml-url-parameters": "^2.0.0",
     "pretty": "^2.0.0",
     "query-string": "^7.1.3",
     "string-remove-widows": "^2.1.0",
     "string-strip-html": "^8.2.0",
-    "tailwindcss": "^3.2.6"
+    "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
     "ava": "^5.2.0",
-    "c8": "^7.11.0",
+    "c8": "^7.13.0",
     "np": "*",
     "xo": "0.39.1"
   },

package/src/commands/serve.js

@@ -36,137 +36,154 @@ const serve = async (env = 'local', config = {}) => {
 
   const spinner = ora()
 
-  try {
-    await buildToFile(env, config)
-
-    let templates = get(config, 'build.templates')
-    templates = Array.isArray(templates) ? templates : [templates]
-
-    const templatePaths = [...new Set(templates.map(config => `${get(config, 'source', 'src')}/**`))]
-    const tailwindConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
-    const globalPaths = [
-      'src/**',
-      ...new Set(get(config, 'build.browsersync.watch', []))
-    ]
-
-    if (typeof tailwindConfig === 'string') {
-      globalPaths.push(tailwindConfig)
-    }
-
-    // Watch for Template file changes
-    browsersync()
-      .watch(templatePaths)
-      .on('change', async file => {
-        config = await getConfig(env, config)
-
-        if (config.events && typeof config.events.beforeCreate === 'function') {
-          await config.events.beforeCreate(config)
-        }
-
-        // Don't render if file type is not configured
-        // eslint-disable-next-line
-        const filetypes = templates.reduce((acc, template) => {
-          return [...acc, ...get(template, 'filetypes', ['html'])]
-        }, [])
-
-        if (!filetypes.includes(path.extname(file).slice(1))) {
-          return
-        }
-
-        if (get(config, 'build.console.clear')) {
-          clearConsole()
-        }
-
-        const start = new Date()
-
-        spinner.start('Building email...')
+  // Build all emails first
+  await buildToFile(env, config)
+
+  // Set some paths to watch
+  let templates = get(config, 'build.templates')
+  templates = Array.isArray(templates) ? templates : [templates]
+
+  const templatePaths = [...new Set(templates.map(config => `${get(config, 'source', 'src')}/**`))]
+  const tailwindConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
+  const globalPaths = [
+    'src/**',
+    ...new Set(get(config, 'build.browsersync.watch', []))
+  ]
+
+  if (typeof tailwindConfig === 'string') {
+    globalPaths.push(tailwindConfig)
+  }
 
-        renderToString(
-          await fs.readFile(file.replace(/\\/g, '/'), 'utf8'),
-          {
-            maizzle: merge(
-              config,
-              {
-                build: {
-                  current: {
-                    path: path.parse(file)
-                  }
+  // Watch for Template file changes
+  browsersync()
+    .watch(templatePaths)
+    .on('change', async file => {
+      config = await getConfig(env, config)
+
+      if (config.events && typeof config.events.beforeCreate === 'function') {
+        await config.events.beforeCreate(config)
+      }
+
+      // Don't render if file type is not configured
+      // eslint-disable-next-line
+      const filetypes = templates.reduce((acc, template) => {
+        return [...acc, ...get(template, 'filetypes', ['html'])]
+      }, [])
+
+      if (!filetypes.includes(path.extname(file).slice(1))) {
+        return
+      }
+
+      // Clear console if enabled
+      if (get(config, 'build.console.clear')) {
+        clearConsole()
+      }
+
+      // Start the spinner
+      const start = new Date()
+      spinner.start('Building email...')
+
+      // Render the template
+      renderToString(
+        await fs.readFile(file.replace(/\\/g, '/'), 'utf8'),
+        {
+          maizzle: merge(
+            config,
+            {
+              build: {
+                current: {
+                  path: path.parse(file)
                 }
               }
-            ),
-            ...config.events
-          }
-        )
-          .then(async ({html, config}) => {
-            let source = ''
-            let dest = ''
-            let ext = ''
-
-            if (Array.isArray(config.build.templates)) {
-              const match = config.build.templates.find(template => template.source === path.parse(file).dir)
-              source = get(match, 'source')
-              dest = get(match, 'destination.path', 'build_local')
-              ext = get(match, 'destination.ext', 'html')
-            } else if (isObject(config.build.templates)) {
-              source = get(config, 'build.templates.source')
-              dest = get(config, 'build.templates.destination.path', 'build_local')
-              ext = get(config, 'build.templates.destination.ext', 'html')
             }
+          ),
+          ...config.events
+        }
+      )
+        .then(async ({html, config}) => {
+          // Write the file to disk
+          let source = ''
+          let dest = ''
+          let ext = ''
+
+          if (Array.isArray(config.build.templates)) {
+            const match = config.build.templates.find(template => template.source === path.parse(file).dir)
+            source = path.normalize(get(match, 'source'))
+            dest = path.normalize(get(match, 'destination.path', 'build_local'))
+            ext = get(match, 'destination.ext', 'html')
+          } else if (isObject(config.build.templates)) {
+            source = path.normalize(get(config, 'build.templates.source'))
+            dest = path.normalize(get(config, 'build.templates.destination.path', 'build_local'))
+            ext = get(config, 'build.templates.destination.ext', 'html')
+          }
 
-            const fileDir = path.parse(file).dir.replace(source, '')
-            const finalDestination = path.join(dest, fileDir, `${path.parse(file).name}.${ext}`)
-
-            await fs.outputFile(config.permalink || finalDestination, html)
-          })
-          .then(() => {
-            browsersync().reload()
-            spinner.succeed(`Compiled in ${(Date.now() - start) / 1000}s [${file}]`)
-          })
-          .catch(() => spinner.warn(`Received empty HTML, please save your file again [${file}]`))
+          const fileDir = path.parse(file).dir.replace(source, '')
+          const finalDestination = path.join(dest, fileDir, `${path.parse(file).name}.${ext}`)
+
+          await fs.outputFile(config.permalink || finalDestination, html)
+        })
+        .then(() => {
+          browsersync().reload()
+          spinner.succeed(`Compiled in ${(Date.now() - start) / 1000}s [${file}]`)
+        })
+        .catch(error => {
+          throw error
+        })
+    })
+
+  // Watch for changes in all other files
+  browsersync()
+    .watch(globalPaths, {ignored: templatePaths})
+    .on('change', () => buildToFile(env, config)
+      .then(() => browsersync().reload())
+      .catch(error => {
+        throw error
       })
-
-    // Watch for changes in all other files
-    browsersync()
-      .watch(globalPaths, {ignored: templatePaths})
-      .on('change', () => buildToFile(env, config).then(() => browsersync().reload()))
-      .on('unlink', () => buildToFile(env, config).then(() => browsersync().reload()))
-
-    // Watch for changes in config files
-    browsersync()
-      .watch('config*.js')
-      .on('change', async file => {
-        const parsedEnv = path.parse(file).name.split('.')[1] || 'local'
-
-        Config
-          .getMerged(parsedEnv)
-          .then(config => buildToFile(parsedEnv, config).then(() => browsersync().reload()))
+    )
+    .on('unlink', () => buildToFile(env, config)
+      .then(() => browsersync().reload())
+      .catch(error => {
+        throw error
       })
-
-    // Browsersync options
-    const baseDir = templates.map(t => t.destination.path)
-
-    // Initialize Browsersync
-    browsersync()
-      .init(
-        merge(
-          {
-            notify: false,
-            open: false,
-            port: 3000,
-            server: {
-              baseDir,
-              directory: true
-            },
-            tunnel: false,
-            ui: {port: 3001},
-            logFileChanges: false
+    )
+
+  // Watch for changes in config files
+  browsersync()
+    .watch('config*.js')
+    .on('change', async file => {
+      const parsedEnv = path.parse(file).name.split('.')[1] || 'local'
+
+      Config
+        .getMerged(parsedEnv)
+        .then(config => buildToFile(parsedEnv, config)
+          .then(() => browsersync().reload())
+          .catch(error => {
+            throw error
+          })
+        )
+    })
+
+  // Browsersync options
+  const baseDir = templates.map(t => t.destination.path)
+
+  // Initialize Browsersync
+  browsersync()
+    .init(
+      merge(
+        {
+          notify: false,
+          open: false,
+          port: 3000,
+          server: {
+            baseDir,
+            directory: true
           },
-          get(config, 'build.browsersync', {})
-        ), () => {})
-  } catch (error) {
-    spinner.fail(error)
-    throw error
-  }
+          tunnel: false,
+          ui: {port: 3001},
+          logFileChanges: false
+        },
+        get(config, 'build.browsersync', {})
+      ), () => {})
 }
 
 module.exports = serve

package/src/generators/output/to-string.js

@@ -37,7 +37,7 @@ module.exports = async (html, options) => {
       config: merge(config, {
         build: {
           tailwind: {
-            config: get(options, 'tailwind.config', {})
+            config: get(options, 'tailwind.config')
           }
         }
       })

package/src/generators/posthtml/defaultComponentsConfig.js

@@ -0,0 +1,9 @@
+module.exports = {
+  root: './',
+  folders: ['src/components', 'src/layouts', 'src/templates'],
+  fileExtension: 'html',
+  tag: 'component',
+  attribute: 'src',
+  yield: 'content',
+  propsAttribute: 'locals'
+}

package/src/generators/posthtml/defaultConfig.js

@@ -1,3 +1,4 @@
 module.exports = {
-  recognizeNoValueAttribute: true
+  recognizeNoValueAttribute: true,
+  recognizeSelfClosing: true
 }

package/src/generators/posthtml/index.js

@@ -5,11 +5,18 @@ const fetch = require('posthtml-fetch')
 const layouts = require('posthtml-extend')
 const components = require('posthtml-component')
 const defaultConfig = require('./defaultConfig')
+const defaultComponentsConfig = require('./defaultComponentsConfig')
 
 module.exports = async (html, config) => {
   const layoutsOptions = get(config, 'build.layouts', {})
   const componentsOptions = get(config, 'build.components', {})
-  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
+  const expressionsOptions = merge(
+    {
+      loopTags: ['each', 'for'],
+      strictMode: false
+    },
+    get(config, 'build.posthtml.expressions', {})
+  )
 
   const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
   const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
@@ -29,6 +36,20 @@ module.exports = async (html, config) => {
     )
   )
 
+  const defaultComponentsOptions = merge(
+    defaultComponentsConfig,
+    {
+      folders: [
+        ...defaultComponentsConfig.folders,
+        ...get(componentsOptions, 'folders', [])
+      ]
+    },
+    {
+      root: componentsOptions.root || './',
+      expressions: {...expressionsOptions, locals}
+    }
+  )
+
   return posthtml([
     fetchPlugin,
     layouts(
@@ -42,15 +63,7 @@ module.exports = async (html, config) => {
     ),
     components(
       merge(
-        {
-          root: componentsOptions.root || './',
-          folders: ['src/components', 'src/layouts', 'src/templates'],
-          tag: 'component',
-          attribute: 'src',
-          yield: 'content',
-          propsAttribute: 'locals',
-          expressions: {...expressionsOptions, locals}
-        },
+        defaultComponentsOptions,
         componentsOptions
       )
     ),

package/src/generators/tailwindcss.js

@@ -7,6 +7,23 @@ const postcssNested = require('tailwindcss/nesting')
 const {requireUncached} = require('../utils/helpers')
 const mergeLonghand = require('postcss-merge-longhand')
 const {get, isObject, isEmpty, merge} = require('lodash')
+const defaultComponentsConfig = require('./posthtml/defaultComponentsConfig')
+
+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 = {}}) => {
@@ -32,73 +49,86 @@ module.exports = {
 
     // Merge user's Tailwind config on top of a 'base' config
     const layoutsRoot = get(config, 'build.layouts.root')
-    const componentsRoot = get(config, 'build.components.root')
+    const componentsRoot = get(config, 'build.components.root', defaultComponentsConfig.root)
+
+    const layoutsPath = typeof layoutsRoot === 'string' && layoutsRoot ?
+      `${layoutsRoot}/**/*.*`.replace(/\/\//g, '/') :
+      'src/layouts/**/*.*'
+
+    const componentsPath = defaultComponentsConfig.folders.map(folder => {
+      return path
+        .join(componentsRoot, folder, `**/*.${defaultComponentsConfig.fileExtension}`)
+        .replace(/\\/g, '/')
+        .replace(/\/\//g, '/')
+    })
 
     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',
-          {raw: html, extension: 'html'}
+          ...componentsPath,
+          layoutsPath
         ]
       }
     }, 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: [
-          ...tailwindConfig.content,
-          {raw: html, extension: 'html'}
+          ...componentsPath,
+          layoutsPath,
+          ...tailwindConfig.content
         ]
       }
     }
 
+    // Add raw HTML if using API
+    if (html) {
+      tailwindConfig.content.files.push({raw: html, extension: 'html'})
+    }
+
     // Include all `build.templates.source` paths when scanning for selectors to preserve
     const buildTemplates = get(config, 'build.templates')
 
     if (buildTemplates) {
       const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
-      const templateSources = templateObjects.map(template => {
+      const fileTypes = get(buildTemplates, 'filetypes', 'html')
+
+      templateObjects.forEach(template => {
         const source = get(template, 'source')
 
         if (typeof source === 'function') {
           const sources = source(config)
 
           if (Array.isArray(sources)) {
-            sources.map(s => tailwindConfig.content.files.push(s))
+            sources.map(s => tailwindConfig.content.files.push(`${s}/**/*.${fileTypes}`))
           } else if (typeof sources === 'string') {
             tailwindConfig.content.files.push(sources)
           }
-
-          // Must return a valid `content` entry
-          return {raw: '', extension: 'html'}
         }
 
         // Support single-file sources i.e. src/templates/index.html
-        if (typeof source === 'string' && Boolean(path.extname(source))) {
+        else if (typeof source === 'string' && Boolean(path.extname(source))) {
           tailwindConfig.content.files.push(source)
-
-          return {raw: '', extension: 'html'}
         }
 
-        return `${source}/**/*.*`
+        // Default behavior - directory sources as a string
+        else {
+          tailwindConfig.content.files.push(`${source}/**/*.${fileTypes}`)
+        }
       })
-
-      tailwindConfig.content.files.push(...templateSources)
     }
 
+    // Filter out any duplicate content paths
+    tailwindConfig.content.files = [...new Set(tailwindConfig.content.files)]
+
     const userFilePath = get(config, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
     const userFileExists = await fs.pathExists(userFilePath)
 
     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/inlineCss.js

@@ -14,7 +14,7 @@ module.exports = async (html, config = {}, direct = false) => {
 
   if (get(config, 'inlineCSS') === true || !isEmpty(options)) {
     options.applyAttributesTableElements = true
-    juice.styleToAttribute = get(options, 'styleToAttribute', {'vertical-align': 'valign'})
+    juice.styleToAttribute = get(options, 'styleToAttribute', {})
 
     juice.widthElements = get(options, 'applyWidthAttributes', []).map(i => i.toUpperCase())
     juice.heightElements = get(options, 'applyHeightAttributes', []).map(i => i.toUpperCase())

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
 }