Skip to content

v1.0.0
Compare
Choose a tag to compare
@cossssmin cossssmin released this 28 Apr 16:30
· 1616 commits to master since this release
v1.0.0
1edeeed

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 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:

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:

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 instead.

If you did customize it, continue reading.

HTML must be explicitly escaped

You can do that with triple backticks:

+ <!DOCTYPE {{{ page.doctype || 'html' }}}>
- <!DOCTYPE {{ page.doctype or 'html' }}>

JavaScript || is used instead of Nunjucks' or

+ <meta charset="{{ page.charset || 'utf-8' }}">
- <meta charset="{{ page.charset or 'utf-8' }}">

if/else uses tag syntax

+ <if condition="page.title">
+   <title>{{ page.title }}</title>
+ </if>
- {% if page.title %}<title>{{ page.title }}</title>{% endif %}

Due to a current bug in posthtml-expressions, you can't use comments after an <if> tag. A workaround is to use a real element and keep the comment inside it.

That's how we do it with the Outlook conditional in the Layout's <head>:

<if condition="page.title">
  <title>{{ page.title }}</title>
</if>
- <!--[if mso]>
+ <outlook>
  <xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
  <style>
    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
  </style>
+ </outlook>
- <![endif]-->

Compiled CSS is now inside page.css

The compiled Tailwind CSS is now available in page.css, and it must be explicitly escaped (with triple backticks):

+ <if condition="page.css">
+   <style>{{{ page.css }}}</style>
+ </if>
- {% if css %}<style>{{ css }}</style>{% endif %}

New Blocks Syntax

Pulling in Blocks now requires using PostHTML synax. See the Layout docs for more info.

+ <block name="head"></block>
- {% block head %}{% endblock %}

Update Templates

You can check out the new templates here.

New Extends Syntax

Extending a Layout now requires PostHTML syntax:

- {% extends "src/layouts/default.njk" %}
-
- {% block template %}
+ <extends src="src/layouts/master.html">
+   <block name="template"></block>
+ </extends>

New Component Syntax

- {% component "src/components/vmlbg.njk", {width: 600, height: 400, src: page.image} %}
- {% endcomponent %}
+ <component src="src/components/vmlbg.html" locals='{"width": 600, "height": 400, "src": "https..."}'>
+ </component>

Read the Components docs to see how you can use data off of the page object.

Replace Includes with Components

Includes are no longer available, you can use a Component instead:

- {% include "src/partials/footer-links.njk" %}
+ <component src="src/partials/footer-links.html"></component>
Assets 2