Maizzle v4.0.0

It's finally here: Maizzle v4.0.0 🥳

This is our biggest release ever, which introduces lots of cool new features as well as a few breaking changes - so make sure to read the upgrade guide if you're looking to update an existing project.

Breaking Changes
Upgrade Guide
New Features
Changes and deprecations
Bug fixes and improvements

Breaking changes

Node v14.0.0

Maizzle now requires at least Node v14.0.0.

This was required for some of the fixes and new features, and also paves the way for a migration to ESM-only.

Tailwind CSS v3

The purge key in tailwind.config.js has changed to content in v3.

Also, the JIT compiler is now the default engine.

See the Tailwind CSS v3 release notes and upgrade guide for more info.

Base URL Transformer

The new baseURL transformer replaces baseImageURL.

The new transformer is completely rewritten as a PostHTML plugin and is much more powerful and stable.

module.exports = {
-  baseImageURL: 'https://example.com/images/',
+  baseURL: {
+    tags: {
+      img: {
+	  src: 'https://example.com/images/',
+      },
+    },
+  },
}

This is a breaking change not only because of the new name, but also because of its behavior: simply seeting baseURL to a string URL will prepend that string to all src-like attributes, including hrefs in your anchor tags.

The example above shows how to avoid this, but you can read more about baseURL in the documentation.

`mergeLonghand` is now `shorthandInlineCSS`

The inlineCSS.mergeLonghand Transformer has been renamed to shorthandInlineCSS and is now standalone.

This means you can opt in to transform longhand inline CSS to shorthand-form even when you have disabled CSS inlining.

module.exports = {
-  inlineCSS: {
-    mergeLonghand: true
-  }
+  shorthandInlineCSS: true
}

shorthandInlineCSS does not run by default, you need to explicitly enable it.

Of course, you may customize which tags it should be enabled for:

module.exports = {
  shorthandInlineCSS: ['table', 'div'] // enable only for these tags
}

See the shorthandInlineCSS documentation.

`transform` is now `filters`

The "Transform Content" Transformer has been renamed to "Filters".

module.exports = {
- transform: {
+ filters: {
    uppercase: str => str.toUpperCase()
  }
}

Filter functions that you define here currently only work on string-type contents, so you can't use them on a tag that has other tags inside of it.

Maizzle 4 ships with 30 built-in filters inspired by those in Liquid, like capitalize, newline-to-br, or truncate.

Upgrade guide

See the full Maizzle v4 upgrade guide for more info.

New Features

Support for Tailwind CSS 3.x 🥳
Default filters #686
Console clearing when running maizzle serve
Support templates source as a function(config) (cddd30c, da52970)
Support templates source as array of string paths
Use config.js file in render() if available at path 5cfc87d
Support for tailwindcss attribute on <style> tags
Support attributes as locals for components 61d2016
All-new baseURL Transformer 710dd15
Support single-file template sources 1eb1021
Expose current file source and destination in config 6014d5b
Preserve unused CSS in <head> (8fe8fd8, 1660921)
Use PostCSS and Tailwind CSS generators programmatically 266f052

New Starter features

Email client targeting variants
New xs screen
Spacing scale now based on Tailwind's rem scale
Updated main layout
Added break-word utility
Added color-scheme meta tags to main layout
Updated npm build scripts names
Added new VML components
Moved body CSS reset to utility classes in main layout
Updated the layout's preheader to use a loop for characters

Changes and deprecations

Changed: allow enabling safeClassNames in any environment config f3e94ce
Changed: Tailwind CSS compilation errors should now throw an error a7f5451
Removed: old baseImageURL transformer 710dd15
Changed: make project's tailwind.config.js responsible for adding/disabling plugins d14cf40
Removed: tailwindcss-box-shadow plugin from core 49bf3af
Changed: throw error if templates source is invalid 65ffd84
Changed: default prettify config 76b71a6
Renamed mergeLongand Transformer to shorthandInlineCSS #695
pretty transformer is now opt-in 867fa3b

Bug fixes and improvements

Initialize Browsersync on demand (#605, 9f6375d)
Fixed an issue with Tailwind CSS purging when using custom template source paths c77392c
Fixed an issue that was overwriting all CSS with user's configured tailwind.css (#629, d0c8381)
Fixed an issue with @import in <style tailwindcss> tags 0ea90ec
Fixed an issue with using custom expression delimiters in layouts (#665, 252d5f7)
Fixed an issue with the sixHex transformer applying to text content (#668, 7165931)
Fixed an issue with escaped CSS class names not being safely rewritten in <style tailwindcss> tags a631d50
Fixed an issue with Browsersync triggering a file render on save although the file's type was not configured 44a9864
Fixed an issue with ignored expressions in front matter 9667f92

maizzle/framework v4.0.0 on GitHub