maizzle/framework v4.0.0-alpha.8 on GitHub

[BREAKING] Dropped Node 12/13 support

We had to drop Node 12.x and 13.x support in order to introduce functionality for preserving CSS in the <head>.

Maizzle will now require at least Node 14.19.1.

This paves the way to the start of the migration to pure ESM.

Fixed: CSS being removed

This happened because email-comb was removing CSS selectors that it considered to be unused. And rightfully so, because this was only the case with CSS email client targeting hacks like this:

div > u + .body .gmail-android-block {
  display: block !important;
}

In that example, div > u + .body wouldn't actually exist in your HTML, so the entire rule was being removed.

Maizzle now safelists the most popular hacks with email-comb:

const safelist = [
  '*body*', // Gmail
  '.outlook*', // Outlook.com
  '.bloop_container', // Airmail
  '.Singleton', // Apple Mail 10
  '.unused', // Notes 8
  '.moz-text-html', // Thunderbird
  '.mail-detail-content', // Comcast, Libero webmail
  '*edo*', // Edison (all)
  '#*', // Freenet uses #msgBody
  '.lang*' // Fenced code blocks
]

Fixed: attribute selectors being removed

Similarly, attribute selectors can be used to target email clients.

For example:

[data-ogsb] .ogsb-bg-blue-500 {
  background-color: #3b82f6
}

These were also removed, however a recent update to email-comb has fixed the issue.

New: PostCSS generator

The postcss attribute transform now uses a PostCSS-only generator, so that when you do this:

<style postcss>
/* some regular css */
</style>

... it only gets processed with the PostCSS plugins that you add in your environment config.

Previously this used the Tailwind CSS generator, just like <style tailwindcss> is, and was adding unwanted CSS in some cases.

New: CSS generators programmatic API

You can now use the PostCSS and Tailwind CSS generators that Maizzle uses internally, simply by requiring them in your app:

PostCSS

postcss.process(css, maizzleConfig).then(css => console.log(css))

const {postcss} = require('@maizzle/framework')

const maizzleConfig= {} // a Maizzle environment config object

postcss.process('@import ('src/css/example.css')', maizzleConfig).then(css => console.log(css))
// contents of example.css (thanks to postcss-import)

The following plugins are enabled in the PostCSS generator by default:

postcss-import
tailwindcss/nesting
postcss-merge-longhand (when process.env is not local)

TailwindCSS

tailwindcss.compile(css, html, tailwindConfig, maizzleConfig)

const {tailwindcss} = require('@maizzle/framework')

tailwindcss.compile('div { @apply hidden; }', '<div>text</div>', tailwindConfig, maizzleConfig).then(css => console.log(css))
// div { display: none }

Note: html is used as a content source to scan for selectors to preserve when compiling with Tailwind CSS.