Maizzle v2.5.0 is now available with support for Tailwind CSS inside Outlook conditionals + other improvements.
New features
Use Tailwind CSS inside <outlook> conditional tags (#349)
Added support for using Tailwind classes inside <outlook> tags. You no longer need to write inline styles by hand inside these conditionals – as long as you have inlineCSS enabled in your Maizzle config, it'll just work.
For example this:
<outlook>
<p class="text-center">Example</p>
</outlook>... will be output like this if you have CSS inlining enabled:
<!--[if mso]>
<p style="text-align: center">Example</p>
<![endif]-->The way it works is that the posthtml-mso plugin now runs after all Transformers, giving the inliner (and other tools) the chance to work with real HTML nodes instead of HTML comments, which is what Outlook conditionals are.
Define top-level data objects in your config (#350)
You can now define variables (a.k.a. locals) outside of the regular page object.
Simply add a locals object to your config.js:
module.exports = {
locals: {
company: {
name: 'Spacely Space Sprockets, Inc.'
}
}
}Access company.name directly, no need for the page object:
<h1>{{ company.name }}</h1>Alternatively, you can also create a top-level config object by configuring posthtml-expressions and passing in locals there:
module.exports = {
build: {
posthtml: {
expressions: {
locals: {
foo: 'bar'
}
}
}
}
}<p>'foo' is {{ foo }}</p>Note: overwriting the page object is not possible, so if you do something like this:
module.exports = {
locals: {
page: {
foo: 'bar'
}
}
}... Maizzle will overwrite that locals.page object, and foo will be undefined.
Changed
- default to Tailwind's PurgeCSS extractor
Fixed
- always remove the
<plaintext>tag from the HTML version