v1.0.0

Maizzle v1.0.0

This is the first major release of Maizzle.js 🎉

We've added lots of new features and have finally added tests. The CLI and Starter have also been updated with this release.

There are a few breaking changes too, so please make sure to read the upgrade guide.

New Features

• PostHTML templating (see layouts, templates, tags)
• New <plaintext> tag (docs)
• New <outlook> tags (docs)
• New <fetch> tag (docs)
• New transformer: removeAttributes (docs)
• Customizable safe class names (docs)
• Default Browsersync paths 38664a5
• Default PurgeCSS sources db3c3c9
• Default extra attributes b36201c
• Merge inline CSS longhand to shorthand e4d3672
• Use removeStyleTags in CSS inliner options 48fda1c
• CLI: interactive prompt for scaffolding commands (docs)
• CLI: short commands for project scaffolding (docs)

Breaking Changes

• PostHTML instead of Nunjucks
• New config.js structure
• Requires Node 10 or later

Fixes and Improvements

• maizzle serve now works properly with multiple template paths 844a195
• Node.js: you can just pass in a string when using render(), no option is required
• Build error handling now lets you know which file failed to compile (customizable)
• Better minification (now using html-crush) 094d03b
• Better Markdown (now using markdown-it) 7d12277

Removed

• Removed afterConfig event
• CLI: removed the need for bootstrap.js in project root maizzle/cli@30087b8

Updated documentation

We've refreshed the maizzle.com homepage design (partially using Tailwind UI 😍) and added more sections.

The documentation has also been updated to reflect these changes, but there still might be typos or stuff missing. If you find anything that needs adding/fixing, I'd would really appreciate a pull request:

https://github.com/maizzle/docs

Upgrade Guide

• Update @maizzle/cli
• Update @maizzle/framework
• Update config.*.js
• Update tailwind.config.js
• Remove bootstrap.js
• Switch To PostHTML

Update CLI

Update the Maizzle CLI to use the new scaffolding commands:

npm install -g @maizzle/cli

Verify you're using v1.0.0:

maizzle -v

Update Maizzle

Inside your project directory:

npm update @maizzle/framework

Alternatively, bump your @maizzle/framework version to 1.0.0 in package.json and run npm install.

Update config.*.js

Some config options have been moved or renamed, so you'll need to update your config.*.js files to continue using them.

These are the new configs included in the default Starter:

• config.js
• config.production.js

You can also refer to the new make:config stubs: full and basic.

Remove Layout Variables

Some variables from the config are now directly computed in the Layout, there's no real need to keep them in the config. They are removed in the Starter, and you can remove them too:

module.exports = {
-  doctype: 'html',
-  language: 'en',
-  charset: 'utf-8',
}

Browsersync config

The Browsersync config has been moved to build.browsersync:

module.exports = {
  build: {
+    browsersync: {
+      watch: [
+        'src/**/*.*',
+        'tailwind.config.js',
+      ],
+    },
  }
-  browsersync: {
-    directory: true,
-    notify: false,
-    open: false,
-    port: 3000,
-    tunnel: false,
-    watch: [
-      'src/layouts/**/*.*',
-      'src/partials/**/*.*',
-      'src/components/**/*.*',
-    ],
-  },
}

Template config

Template config has been moved to build.templates, and both keys have been renamed:

module.exports = {
  build: {
    templates: {
-      source: 'src/templates',
-      filetypes: 'html|njk|nunjucks',
+      root: 'src/templates',
+      extensions: 'html',
    },

Move keepOnlyAttributeSizes

The cleanup.keepOnlyAttributeSizes config option has been moved under inlineCSS:

module.exports = {
  inlineCSS: {
+   keepOnlyAttributeSizes: {
+     width: [],
+     height: [],
+   },
  },
- cleanup {
-   keepOnlyAttributeSizes: {
-     width: [],
-     height: [],
-   },
- }
}

Move preferBgColorAttribute

The cleanup.preferBgColorAttribute config option has also been moved under inlineCSS:

module.exports = {
  inlineCSS: {
+   preferBgColorAttribute: {
+     enabled: false,
+   }
  },
- cleanup {
-   preferBgColorAttribute: false,
- }
}

Move purgeCSS

The cleanup key has been removed, so cleanup.purgeCSS has been moved one level up:

module.exports = {
+  purgeCSS: {
+    content: [
+      'src/layouts/**/*.*',
+      'src/partials/**/*.*',
+      'src/components/**/*.*',
+    ],
+    whitelist: [],
+    whitelistPatterns: [],
+    extractor: /[\w-/:%]+(?<!:)/g,
+  },
-  cleanup: {
-    purgeCSS: {
-      content: [
-        'src/layouts/**/*.*',
-        'src/partials/**/*.*',
-        'src/components/**/*.*',
-      ],
-      whitelist: [],
-      whitelistPatterns: [],
-    },
-  },
}

Move removeUnusedCSS

The cleanup key has been removed, so cleanup.removeUnusedCSS has been moved one level up:

module.exports = {
+  removeUnusedCSS: {
+    enabled: false,
+  },
-  cleanup: {
-    removeUnusedCSS: {
-      enabled: false,
-    },
-  },
}

Move replaceStrings

The cleanup key has been removed, so cleanup.replaceStrings has been moved one level up:

module.exports = {
+  replaceStrings: {},
-  cleanup: {
-    replaceStrings: {}
-  },
}

Rename applyExtraAttributes

applyExtraAttributes has been renamed to extraAttributes:

module.exports = {
+  extraAttributes: {
-  applyExtraAttributes: {
    table: {
      cellpadding: 0,
      cellspacing: 0,
      role: 'presentation',
    },
    img: {
      alt: ''
    }
  },
}

Note: extraAttributes adds the attributes shown above by default now (docs).

Update markdown

We're now using the markdown-it library, so if you were passing options to marked, you need to update the config object:

module.exports = {
  markdown: {
+    root: './',
+    encoding: 'utf8',
+    markdownit: {},
+    plugins: [],
-    baseUrl: null,
-    breaks: false,
-    gfm: true,
-    headerIds: false,
-    headerPrefix: '',
-    highlight: null,
-    langPrefix: 'language-',
-    mangle: true,
-    pendantic: false,
-    sanitize: false,
-    sanitizer: null,
-    silent: false,
-    smartLists: false,
-    smartypants: false,
-    tables: true,
-    xhtml: false
  }, 
}

Note: see the docs for an explanation of the new Markdown options.

Update tailwind.config.js

We've added:

• a 6px spacing option maizzle/maizzle@ceea35f
• new utilities from Tailwind CSS v1.3.0 maizzle/maizzle@beed904

Remove bootstrap.js

This file is no longer required by the framework, so you can safely remove it ✌

Switch To PostHTML

PostHTML has replaced Nunjucks, so you'll need to update your Layouts and Templates.

Update File Extensions

.html extensions are used by default now, so rename all src/**/*.njk

Update Layouts

If you were using the old default Layout and didn't do any customizations to it, you can simply use the [new default Layout](https://github.com/maizz...

v0.9.1

This patch release fixes the recent acorn and minimist vulnerabilities, and updates some dependencies.

• Update ESLint. fc9a806
• Bump query-string from 6.11.0 to 6.11.1 2af6427
• Bump email-comb from 3.9.3 to 3.9.4 1fdeb11
• Bump string-strip-html from 4.3.16 to 4.3.17 5356a1b
• Bump nunjucks from 3.2.0 to 3.2.1 0324913
• [Security] Bump acorn from 7.1.0 to 7.1.1 2fbb4bf

v0.9.0...v0.9.1

v0.9.0

This is a minor feature release.

New Markdown syntax

We've migrated over to posthtml-markdown, please see the updated Markdown docs.

Basically, you'll now add Markdown like this:

<markdown>This Markdown will be **compiled** to HTML</markdown>
<md>There's also a _shorter_ version of the tag above.</md>

Or like this:

<div markdown>This Markdown will be **compiled** to HTML</div>
<p md>There's also a _shorter_ version of the tag above.</p>

Transform Contents

This is a very cool feature in 0.9.0. It was previously used only to compile Tailwind CSS directives like @apply, with PostCSS, but we've now opened it up so you can:

1. add a custom attribute on an element
2. associate it with a function that transforms the content inside that element 💥

Learn more about it in the Transform Content docs.

Support dots in utility class names

Since Tailwind UI was released, some might want to use names like '2.5' for (spacing?) utilities.

This release adds support for that - see docs.

<style postcss>

You'll now need to use a postcss attribute on <style> tags that you want to use Tailwind CSS inside of (docs):

- <style tailwind>
+ <style postcss>

Commits

• Use postcss attribute to compile with PostCSS. 9683561
• Support dots in utility class names. 84b6dbd
• PostHTML content transforms. 6478bb5
• Extract PostHTML Transformers to their own files. 476450b
• Use posthtml-markdown. 025da74

v0.8.0...v0.9.0

v0.8.0

New features

• Add beforeCreate event. 9ef368f
• Support async functions in afterBuild event. 4f4829c

Maintenance

• Rename config variables. 9650e2d
• Bump @fullhuman/postcss-purgecss from 2.0.5 to 2.1.0 d0e52cd
• Bump postcss from 7.0.26 to 7.0.27 2903e2c
• Bump np from 5.2.1 to 6.2.0 9d21f44
• Bump email-comb from 3.9.0 to 3.9.3 060be57
• Bump eslint-plugin-import from 2.20.0 to 2.20.1 cc13487
• Bump query-string from 6.10.1 to 6.11.0 ff30eba
• Bump string-strip-html from 4.3.15 to 4.3.16 f87c461

v0.7.4...v0.8.0

v0.7.4

• Don't rewrite class names when developing locally. 1cbe8fd
• Fix Nunjucks inheritance. 4d5efce
• Include ui browser sync option ab0b7c8

v0.7.3...v0.7.4

v0.7.3

• Bump tailwindcss from 1.1.4 to 1.2.0 ab15ec7

v0.7.2...v0.7.3

v0.7.2

• Allow using local as environment name in config file. 45b5ccd

v0.7.1...v0.7.2

v0.7.1

• Replace % with pc in output HTML class names. 4b90d7a
• Add support for % in default PurgeCSS extractor. dc8e0ab
• Update Tailwind separator replacer regex. fcad256

v0.7.0...v0.7.1

v0.7.0

New in v0.7.0: you can now use an afterBuild event when working with the CLI.

---

• Ensure parent object exists for afterBuild event. 5b9fd9f
• Bump string-strip-html from 4.3.14 to 4.3.15 6556a93
• Bump color-shorthand-hex-to-six-digit from 2.10.55 to 2.10.56 46674c4
• Bump email-comb from 3.8.21 to 3.9.0 f67d31d
• Add afterBuild hook. 4e12a6f
• Bump string-strip-html from 4.3.12 to 4.3.14 cc89770
• Bump email-comb from 3.8.19 to 3.8.21 2f181d4
• Bump @fullhuman/postcss-purgecss from 1.3.0 to 2.0.5 92dd016
• Bump query-string from 6.9.0 to 6.10.1 ecd7c52
• Bump eslint-plugin-import from 2.19.1 to 2.20.0 8d4804e
• Bump front-matter from 3.0.2 to 3.1.0 19e18e4
• Bump color-shorthand-hex-to-six-digit from 2.10.53 to 2.10.55 567f55f
• Update FUNDING.yml 5cf30f0
• Update FUNDING.yml 1750962
• Bump eslint-plugin-node from 10.0.0 to 11.0.0 30ca5f6
• Bump postcss-nested from 4.1.2 to 4.2.1 fc0fe52
• Bump postcss from 7.0.25 to 7.0.26 5bfcd3e
• Bump eslint from 6.7.2 to 6.8.0 769feb8
• Update dependencies. 49a2faa

v0.6.4...v0.7.0

v0.6.4

This is a hotfix release, it fixes using Tailwind CSS in a template through posthtml-content.

• Pass env config in posthtml-content transformer. 78f9b2c

v0.6.3...v0.6.4