@maizzle/framework 4.3.1 → 4.4.0-beta.10

package/README.md

@@ -34,9 +34,9 @@ The Maizzle framework is open-sourced software licensed under the [MIT license](
 
 [npm]: https://www.npmjs.com/package/@maizzle/framework
 [npm-stats]: https://npm-stat.com/charts.html?package=%40maizzle%2Fframework&from=2019-03-27
-[npm-version-shield]: https://img.shields.io/npm/v/@maizzle/framework.svg?style=flat-square
-[npm-stats-shield]: https://img.shields.io/npm/dt/@maizzle/framework.svg?style=flat-square&color=4f46e5
+[npm-version-shield]: https://img.shields.io/npm/v/@maizzle/framework.svg
+[npm-stats-shield]: https://img.shields.io/npm/dt/@maizzle/framework.svg?color=4f46e5
 [github-ci]: https://github.com/maizzle/framework/actions
-[github-ci-shield]: https://img.shields.io/github/workflow/status/maizzle/framework/Node.js%20CI?style=flat-square
+[github-ci-shield]: https://github.com/maizzle/framework/actions/workflows/nodejs.yml/badge.svg
 [license]: ./LICENSE
-[license-shield]: https://img.shields.io/npm/l/@maizzle/framework.svg?style=flat-square&color=0e9f6e
+[license-shield]: https://img.shields.io/npm/l/@maizzle/framework.svg?color=0e9f6e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.3.1",
+  "version": "4.4.0-beta.10",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@maizzle/cli": "^1.5.1",
     "autoprefixer": "^10.4.13",
-    "browser-sync": "^2.26.13",
+    "browser-sync": "^2.27.11",
     "color-shorthand-hex-to-six-digit": "^3.0.2",
     "email-comb": "^5.2.0",
     "front-matter": "^4.0.0",
@@ -53,32 +53,31 @@
     "juice": "^8.0.0",
     "lodash": "^4.17.20",
     "ora": "^5.1.0",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.21",
     "postcss-import": "^15.0.0",
     "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-content": "^0.1.0",
-    "posthtml-expressions": "^1.8.1",
     "posthtml-extend": "^0.6.0",
     "posthtml-extra-attributes": "^1.0.0",
     "posthtml-fetch": "^2.2.0",
-    "posthtml-markdownit": "^1.3.0",
+    "posthtml-markdownit": "^1.3.1",
     "posthtml-match-helper": "^1.0.3",
-    "posthtml-modules": "^0.9.0",
     "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",
     "pretty": "^2.0.0",
-    "query-string": "^7.1.0",
+    "query-string": "^7.1.3",
     "string-remove-widows": "^2.1.0",
     "string-strip-html": "^8.2.0",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.6"
   },
   "devDependencies": {
-    "ava": "^5.1.0",
+    "ava": "^5.2.0",
     "c8": "^7.11.0",
     "np": "*",
     "xo": "0.39.1"

package/src/commands/serve.js

@@ -9,6 +9,10 @@ const renderToString = require('../functions/render')
 const {get, merge, isObject} = require('lodash')
 const {clearConsole} = require('../utils/helpers')
 
+/**
+ * Initialize Browsersync on-demand
+ * https://github.com/maizzle/framework/issues/605
+ */
 const browsersync = () => {
   if (!global.cachedBrowserSync) {
     const bs = require('browser-sync')
@@ -18,142 +22,168 @@ const browsersync = () => {
   return global.cachedBrowserSync
 }
 
+const getConfig = async (env = 'local', config = {}) => merge(
+  config,
+  await Config.getMerged(env)
+)
+
 const serve = async (env = 'local', config = {}) => {
-  config = merge(
-    config,
-    await Config.getMerged(env),
-    {
-      build: {
-        command: 'serve'
-      }
+  config = await getConfig(env, merge(config, {
+    build: {
+      command: 'serve'
     }
-  )
+  }))
 
   const spinner = ora()
 
-  try {
-    await buildToFile(env, config)
-
-    let templates = get(config, 'build.templates')
-    templates = Array.isArray(templates) ? templates : [templates]
+  // Build all emails first
+  await buildToFile(env, config)
 
-    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);
-    }
+  // Set some paths to watch
+  let templates = get(config, 'build.templates')
+  templates = Array.isArray(templates) ? templates : [templates]
 
-    // Watch for Template file changes
-    browsersync()
-      .watch(templatePaths)
-      .on('change', async file => {
-        if (config.events && typeof config.events.beforeCreate === 'function') {
-          await config.events.beforeCreate(config)
-        }
+  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', []))
+  ]
 
-        // 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 (typeof tailwindConfig === 'string') {
+    globalPaths.push(tailwindConfig)
+  }
 
-        if (!filetypes.includes(path.extname(file).slice(1))) {
-          return
-        }
+  // Watch for Template file changes
+  browsersync()
+    .watch(templatePaths)
+    .on('change', async file => {
+      config = await getConfig(env, config)
 
-        if (get(config, 'build.console.clear')) {
-          clearConsole()
-        }
+      if (config.events && typeof config.events.beforeCreate === 'function') {
+        await config.events.beforeCreate(config)
+      }
 
-        const start = new Date()
+      // 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'])]
+      }, [])
 
-        spinner.start('Building email...')
+      if (!filetypes.includes(path.extname(file).slice(1))) {
+        return
+      }
 
-        file = file.replace(/\\/g, '/')
+      // Clear console if enabled
+      if (get(config, 'build.console.clear')) {
+        clearConsole()
+      }
 
-        const renderOptions = {
-          maizzle: config,
+      // 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
         }
-
-        renderToString(
-          await fs.readFile(file, 'utf8'),
-          renderOptions
-        )
-          .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')
-            }
-
-            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}]`))
+      )
+        .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(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/config.js

@@ -13,16 +13,23 @@ module.exports = {
 
     const cwd = env === 'maizzle-ci' ? './test/stubs/config' : process.cwd()
 
-    for (const module of ['./config', './config.local']) {
+    for (const module of ['./config', './config.cjs', './config.local', './config.local.cjs']) {
       try {
         baseConfig = merge(baseConfig, requireUncached(path.resolve(cwd, module)))
       } catch {}
     }
 
     if (typeof env === 'string' && env !== 'local') {
-      try {
-        envConfig = merge(envConfig, requireUncached(path.resolve(cwd, `./config.${env}`)))
-      } catch {
+      let loaded = false
+      for (const module of [`./config.${env}`, `./config.${env}.cjs`]) {
+        try {
+          envConfig = merge(envConfig, requireUncached(path.resolve(cwd, module)))
+          loaded = true
+          break
+        } catch {}
+      }
+
+      if (!loaded) {
         throw new Error(`could not load config.${env}.js`)
       }
     }

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

@@ -2,7 +2,6 @@ const path = require('path')
 const fs = require('fs-extra')
 const glob = require('glob-promise')
 const {get, isEmpty, merge} = require('lodash')
-const {asyncForEach} = require('../../utils/helpers')
 
 const Config = require('../config')
 const Tailwind = require('../tailwindcss')
@@ -28,10 +27,15 @@ module.exports = async (env, spinner, config) => {
 
   const css = (typeof get(config, 'build.tailwind.compiled') === 'string')
     ? config.build.tailwind.compiled
-    : await Tailwind.compile('', '', {}, config)
+    : await Tailwind.compile({config})
 
   // Parse each template config object
-  await asyncForEach(templatesConfig, async templateConfig => {
+  for await (const templateConfig of templatesConfig) {
+    if (!templateConfig) {
+      const configFileName = env === 'local' ? 'config.js' : `config.${env}.js`
+      throw new Error(`No template sources defined in \`build.templates\`, check your ${configFileName} file`)
+    }
+
     const outputDir = get(templateConfig, 'destination.path', `build_${env}`)
 
     await fs.remove(outputDir)
@@ -67,23 +71,45 @@ module.exports = async (env, spinner, config) => {
       }
     }
 
+    // Create a pipe-delimited list of allowed extensions
+    // We only compile these, the rest are copied as-is
+    const extensions = Array.isArray(templateConfig.filetypes)
+      ? templateConfig.filetypes.join('|')
+      : templateConfig.filetypes || get(templateConfig, 'filetypes', 'html')
+
+    // List of files that won't be copied to the output directory
+    const omitted = Array.isArray(templateConfig.omit)
+      ? templateConfig.omit
+      : [get(templateConfig, 'omit', '')]
+
     // Parse each template source
-    await asyncForEach(templateSource, async source => {
+    for await (const source of templateSource) {
       /**
        * Copy single-file sources correctly
        * If `src` is a file, `dest` cannot be a directory
        * https://github.com/jprichardson/node-fs-extra/issues/323
        */
-      const out = fs.lstatSync(source).isFile() ? `${outputDir}/${path.basename(source)}` : outputDir
+      const out = fs.lstatSync(source).isFile()
+        ? `${outputDir}/${path.basename(source)}`
+        : outputDir
 
       await fs
-        .copy(source, out)
+        .copy(source, out, {filter: file => {
+          // Do not copy omitted files
+          return !omitted
+            .filter(Boolean)
+            .some(omit => path.normalize(file).includes(path.normalize(omit)))
+        }})
         .then(async () => {
-          const extensions = Array.isArray(templateConfig.filetypes)
-            ? templateConfig.filetypes.join('|')
-            : templateConfig.filetypes || get(templateConfig, 'filetypes', 'html')
+          const allSourceFiles = await glob(`${outputDir}/**/*.+(${extensions})`)
 
-          const templates = await glob(`${outputDir}/**/*.+(${extensions})`)
+          const skipped = Array.isArray(templateConfig.skip) ?
+            templateConfig.skip :
+            [get(templateConfig, 'skip', '')]
+
+          const templates = allSourceFiles.filter(template => {
+            return !skipped.includes(template.replace(`${outputDir}/`, ''))
+          })
 
           if (templates.length === 0) {
             spinner.warn(`Error: no files with the .${extensions} extension found in ${templateConfig.source}`)
@@ -94,7 +120,7 @@ module.exports = async (env, spinner, config) => {
             await config.events.beforeCreate(config)
           }
 
-          await asyncForEach(templates, async file => {
+          for await (const file of templates) {
             config.build.current = {
               path: path.parse(file)
             }
@@ -114,7 +140,7 @@ module.exports = async (env, spinner, config) => {
                 ...config.events
               })
 
-              const destination = config.permalink || file
+              const destination = get(compiled, 'config.permalink', file)
 
               /**
                * Generate plaintext
@@ -125,7 +151,7 @@ module.exports = async (env, spinner, config) => {
 
               // Check if plaintext: true globally, fallback to template's front matter
               const plaintextConfig = get(templateConfig, 'plaintext', get(compiled.config, 'plaintext', false))
-              const plaintextPath = get(plaintextConfig, 'destination.path', config.permalink || file)
+              const plaintextPath = get(plaintextConfig, 'destination.path', destination)
 
               if (Boolean(plaintextConfig) || !isEmpty(plaintextConfig)) {
                 await Plaintext
@@ -177,19 +203,23 @@ module.exports = async (env, spinner, config) => {
                   throw error
               }
             }
-          })
+          }
 
           const assets = {source: '', destination: 'assets', ...get(templateConfig, 'assets')}
 
           if (Array.isArray(assets.source)) {
-            await asyncForEach(assets.source, async source => {
+            for await (const source of assets.source) {
               if (fs.existsSync(source)) {
-                await fs.copy(source, path.join(templateConfig.destination.path, assets.destination)).catch(error => spinner.warn(error.message))
+                await fs
+                  .copy(source, path.join(templateConfig.destination.path, assets.destination))
+                  .catch(error => spinner.warn(error.message))
               }
-            })
+            }
           } else {
             if (fs.existsSync(assets.source)) {
-              await fs.copy(assets.source, path.join(templateConfig.destination.path, assets.destination)).catch(error => spinner.warn(error.message))
+              await fs
+                .copy(assets.source, path.join(templateConfig.destination.path, assets.destination))
+                .catch(error => spinner.warn(error.message))
             }
           }
 
@@ -199,8 +229,8 @@ module.exports = async (env, spinner, config) => {
             })
         })
         .catch(error => spinner.warn(error.message))
-    })
-  })
+    }
+  }
 
   if (config.events && typeof config.events.afterBuild === 'function') {
     await config.events.afterBuild(files)

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

@@ -22,9 +22,6 @@ module.exports = async (html, options) => {
 
   let config = merge(fileConfig, get(options, 'maizzle', {}))
 
-  const tailwindConfig = get(options, 'tailwind.config', {})
-  const cssString = get(options, 'tailwind.css', '')
-
   const {frontmatter} = fm(html)
 
   html = `---\n${frontmatter}\n---\n\n${fm(html).body}`
@@ -34,7 +31,17 @@ module.exports = async (html, options) => {
   if (typeof get(options, 'tailwind.compiled') === 'string') {
     config.css = options.tailwind.compiled
   } else {
-    config.css = await Tailwind.compile(cssString, html, tailwindConfig, config)
+    config.css = await Tailwind.compile({
+      css: get(options, 'tailwind.css', ''),
+      html,
+      config: merge(config, {
+        build: {
+          tailwind: {
+            config: get(options, 'tailwind.config')
+          }
+        }
+      })
+    })
   }
 
   if (options && typeof options.beforeRender === 'function') {

package/src/generators/postcss.js

@@ -9,7 +9,9 @@ module.exports = {
     return postcss([
       postcssImport(),
       postcssNested(),
-      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
+      get(maizzleConfig, 'shorthandCSS', get(maizzleConfig, 'shorthandInlineCSS')) === true ?
+        mergeLonghand() :
+        () => {},
       ...get(maizzleConfig, 'build.postcss.plugins', [])
     ])
       .process(css, {from: undefined})

package/src/generators/posthtml/index.js

@@ -3,23 +3,17 @@ const posthtml = require('posthtml')
 const {get, merge} = require('lodash')
 const fetch = require('posthtml-fetch')
 const layouts = require('posthtml-extend')
-const modules = require('posthtml-modules')
+const components = require('posthtml-component')
 const defaultConfig = require('./defaultConfig')
-const expressions = require('posthtml-expressions')
 
 module.exports = async (html, config) => {
   const layoutsOptions = get(config, 'build.layouts', {})
-
-  const modulesOptions = get(config, 'build.components', {})
-  // Fake `from` option so we can reference modules relatively
-  const modulesRoot = modulesOptions.root || './'
-  const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
+  const componentsOptions = get(config, 'build.components', {})
+  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
 
   const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
   const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
 
-  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
-
   const locals = merge(
     get(expressionsOptions, 'locals', {}),
     get(config, 'locals', {}),
@@ -37,7 +31,6 @@ module.exports = async (html, config) => {
 
   return posthtml([
     fetchPlugin,
-    expressions({...expressionsOptions, locals}),
     layouts(
       merge(
         {
@@ -47,20 +40,20 @@ module.exports = async (html, config) => {
         layoutsOptions
       )
     ),
-    modules({
-      expressions: expressionsOptions,
-      parser: posthtmlOptions,
-      attributeAsLocals: true,
-      from: modulesFrom,
-      root: modulesRoot,
-      tag: 'component',
-      attribute: 'src',
-      plugins: [
-        fetchPlugin
-      ],
-      locals,
-      ...modulesOptions
-    }),
+    components(
+      merge(
+        {
+          root: componentsOptions.root || './',
+          folders: ['src/components', 'src/layouts', 'src/templates'],
+          tag: 'component',
+          attribute: 'src',
+          yield: 'content',
+          propsAttribute: 'locals',
+          expressions: {...expressionsOptions, locals}
+        },
+        componentsOptions
+      )
+    ),
     ...posthtmlPlugins
   ])
     .process(html, {...posthtmlOptions})

package/src/generators/tailwindcss.js

@@ -9,14 +9,14 @@ const mergeLonghand = require('postcss-merge-longhand')
 const {get, isObject, isEmpty, merge} = require('lodash')
 
 module.exports = {
-  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}) => {
-    tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
-
+  compile: async ({css = '', html = '', config = {}}) => {
     // Compute the Tailwind config to use
-    const userConfig = () => {
+    const userConfig = config => {
+      const tailwindUserConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
+
       // If a custom config object was passed, use that
-      if (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) {
-        return tailwindConfig
+      if (isObject(tailwindUserConfig) && !isEmpty(tailwindUserConfig)) {
+        return tailwindUserConfig
       }
 
       /**
@@ -24,17 +24,17 @@ module.exports = {
        * This will use the default Tailwind config (with rem units etc)
        */
       try {
-        return requireUncached(path.resolve(process.cwd(), tailwindConfig))
+        return requireUncached(path.resolve(process.cwd(), tailwindUserConfig))
       } catch {
         return {}
       }
     }
 
     // Merge user's Tailwind config on top of a 'base' config
-    const layoutsRoot = get(maizzleConfig, 'build.layouts.root')
-    const componentsRoot = get(maizzleConfig, 'build.components.root')
+    const layoutsRoot = get(config, 'build.layouts.root')
+    const componentsRoot = get(config, 'build.components.root')
 
-    const config = merge({
+    const tailwindConfig = merge({
       important: true,
       content: {
         files: [
@@ -47,20 +47,20 @@ module.exports = {
           {raw: html, extension: 'html'}
         ]
       }
-    }, userConfig())
+    }, userConfig(config))
 
     // Add back the `{raw: html}` option if user provided own config
-    if (Array.isArray(config.content)) {
-      config.content = {
+    if (Array.isArray(tailwindConfig.content)) {
+      tailwindConfig.content = {
         files: [
-          ...config.content,
+          ...tailwindConfig.content,
           {raw: html, extension: 'html'}
         ]
       }
     }
 
     // Include all `build.templates.source` paths when scanning for selectors to preserve
-    const buildTemplates = get(maizzleConfig, 'build.templates')
+    const buildTemplates = get(config, 'build.templates')
 
     if (buildTemplates) {
       const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
@@ -68,12 +68,12 @@ module.exports = {
         const source = get(template, 'source')
 
         if (typeof source === 'function') {
-          const sources = source(maizzleConfig)
+          const sources = source(config)
 
           if (Array.isArray(sources)) {
-            sources.map(s => config.content.files.push(s))
+            sources.map(s => tailwindConfig.content.files.push(s))
           } else if (typeof sources === 'string') {
-            config.content.files.push(sources)
+            tailwindConfig.content.files.push(sources)
           }
 
           // Must return a valid `content` entry
@@ -82,7 +82,7 @@ module.exports = {
 
         // Support single-file sources i.e. src/templates/index.html
         if (typeof source === 'string' && Boolean(path.extname(source))) {
-          config.content.files.push(source)
+          tailwindConfig.content.files.push(source)
 
           return {raw: '', extension: 'html'}
         }
@@ -90,21 +90,24 @@ module.exports = {
         return `${source}/**/*.*`
       })
 
-      config.content.files.push(...templateSources)
+      tailwindConfig.content.files.push(...templateSources)
     }
 
-    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
+    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(config),
-      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
-      ...get(maizzleConfig, 'build.postcss.plugins', [])
+      tailwindcss(tailwindConfig),
+      get(config, 'shorthandCSS', get(config, 'shorthandInlineCSS')) === true ?
+        mergeLonghand() :
+        () => {},
+      ...get(config, 'build.postcss.plugins', [])
     ]
 
     if (userFileExists) {
       css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
+
       toProcess.unshift(
         postcssImport({path: path.dirname(userFilePath)})
       )

package/src/transformers/baseUrl.js

@@ -5,7 +5,7 @@ const {get, merge, isObject, isEmpty} = require('lodash')
 const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}, direct = false) => {
-  const url = direct ? config : get(config, 'baseURL')
+  const url = direct ? config : get(config, 'baseURL', get(config, 'baseUrl'))
   const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
 
   // Handle `baseUrl` as a string
@@ -19,11 +19,15 @@ module.exports = async (html, config = {}, direct = false) => {
       .then(result => result.html)
   }
 
-  // Handle `baseUrl` as an object
+  // Handle `baseURL` as an object
   if (isObject(url) && !isEmpty(url)) {
-    html = rewriteVMLs(html, url.url)
+    html = rewriteVMLs(html, get(url, 'url', ''))
 
-    return posthtml([baseUrl(url)]).process(html, posthtmlOptions).then(result => result.html)
+    return posthtml([
+      baseUrl(merge({styleTag: true, inlineCss: true}, url))
+    ])
+      .process(html, posthtmlOptions)
+      .then(result => result.html)
   }
 
   return html

package/src/transformers/filters/index.js

@@ -22,10 +22,19 @@ module.exports = async (html, config = {}, direct = false) => {
    * Compile CSS in <style {post|tailwind}css> tags
    */
   const maizzleConfig = omit(config, ['build.tailwind.css', 'css'])
-  const tailwindConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
 
   filters.postcss = css => PostCSS.process(css, maizzleConfig)
-  filters.tailwindcss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
+  filters.tailwindcss = css => Tailwind.compile({
+    css,
+    html,
+    config: merge({
+      build: {
+        tailwind: {
+          config: get(config, 'build.tailwind.config', {})
+        }
+      }
+    }, maizzleConfig)
+  })
 
   const posthtmlPlugins = [
     styleDataEmbed(),

package/src/transformers/index.js

@@ -26,9 +26,8 @@ exports.process = async (html, config) => {
   html = await preventWidows(html, config)
   html = await attributeToStyle(html, config)
   html = await inline(html, config)
-  html = await shorthandInlineCSS(html, config)
   html = await removeUnusedCSS(html, config)
-  html = await removeInlinedClasses(html, config)
+  html = await shorthandInlineCSS(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
 }

package/src/transformers/shorthandInlineCSS.js

@@ -1,19 +1,25 @@
 const posthtml = require('posthtml')
 const {get, merge, isObject, isEmpty} = require('lodash')
-const mergeLonghand = require('posthtml-postcss-merge-longhand')
+const mergeInlineLonghand = require('posthtml-postcss-merge-longhand')
 const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config, direct = false) => {
-  config = direct ? (isObject(config) ? config : true) : get(config, 'shorthandInlineCSS', [])
+  config = direct ?
+    (isObject(config) ? config : true) :
+    get(config, 'shorthandCSS', get(config, 'shorthandInlineCSS', []))
 
   const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
 
   if (typeof config === 'boolean' && config) {
-    html = await posthtml([mergeLonghand()]).process(html, posthtmlOptions).then(result => result.html)
+    html = await posthtml([mergeInlineLonghand()])
+      .process(html, posthtmlOptions)
+      .then(result => result.html)
   }
 
   if (isObject(config) && !isEmpty(config)) {
-    html = await posthtml([mergeLonghand(config)]).process(html, posthtmlOptions).then(result => result.html)
+    html = await posthtml([mergeInlineLonghand(config)])
+      .process(html, posthtmlOptions)
+      .then(result => result.html)
   }
 
   return html

package/src/utils/helpers.js

@@ -1,9 +1,4 @@
 module.exports = {
-  asyncForEach: async (array, callback) => {
-    for (let index = 0; index < array.length; index++) {
-      await callback(array[index], index, array) // eslint-disable-line
-    }
-  },
   requireUncached: module => {
     try {
       delete require.cache[require.resolve(module)]