@maizzle/framework 4.0.0-alpha.7 → 4.0.0

package/.github/media/logo-dark.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path d="M322.869 65.213c0-13.843-11.222-25.065-25.065-25.065-13.844 0-25.066 11.222-25.066 25.065v133.683c0 13.843 11.222 25.065 25.066 25.065 13.843 0 25.065-11.222 25.065-25.065V65.213Z" stroke="url(#a)" stroke-width="5" stroke-miterlimit="10"/><path d="M218.012 65.213c0-13.843-11.222-25.065-25.066-25.065-13.843 0-25.065 11.222-25.065 25.065v133.683c0 13.843 11.222 25.065 25.065 25.065 13.844 0 25.066-11.222 25.066-25.065V65.213Z" stroke="url(#b)" stroke-width="5" stroke-miterlimit="10"/><path d="M317.555 80.632c8.53-10.903 6.607-26.656-4.296-35.186-10.903-8.53-26.656-6.608-35.187 4.295L173.403 183.519c-8.531 10.903-6.607 26.657 4.295 35.187 10.903 8.53 26.657 6.607 35.187-4.295l104.67-133.779Z" stroke="url(#c)" stroke-width="5" stroke-miterlimit="10"/><path d="M212.597 80.636c8.53-10.902 6.607-26.656-4.295-35.186-10.903-8.53-26.657-6.608-35.187 4.295L68.445 183.523c-8.53 10.903-6.607 26.657 4.296 35.187 10.902 8.53 26.656 6.607 35.186-4.295l104.67-133.779Z" stroke="url(#d)" stroke-width="5" stroke-miterlimit="10"/><rect x="168" y="234" width="158" height="36" rx="18" fill="#4F46E5"/><path d="M199.116 259v-13.091h7.849v1.406h-6.264v4.424h5.676v1.406h-5.676V259h-1.585Zm10.254 0v-9.818h1.457v1.483h.103c.179-.486.502-.88.971-1.183a2.865 2.865 0 0 1 1.585-.454c.111 0 .25.003.416.007.166.004.292.01.377.019v1.534a4.15 4.15 0 0 0-.352-.057 3.432 3.432 0 0 0-.568-.045c-.478 0-.904.1-1.279.3a2.264 2.264 0 0 0-.882.818 2.21 2.21 0 0 0-.32 1.183V259h-1.508Zm9.586.23a3.991 3.991 0 0 1-1.693-.351 2.909 2.909 0 0 1-1.209-1.03c-.298-.451-.447-.997-.447-1.636 0-.562.111-1.018.332-1.368.222-.354.518-.631.889-.831.371-.2.78-.349 1.227-.447.452-.103.906-.183 1.362-.243.596-.077 1.08-.134 1.451-.173.375-.042.647-.113.818-.211.175-.098.262-.268.262-.511v-.051c0-.631-.173-1.121-.518-1.47-.341-.35-.859-.524-1.553-.524-.72 0-1.285.157-1.694.473-.409.315-.697.652-.863 1.009l-1.432-.511c.256-.596.597-1.061 1.023-1.393.43-.337.899-.571 1.406-.703a5.815 5.815 0 0 1 1.509-.205c.315 0 .677.038 1.086.115.414.072.812.224 1.196.454.387.23.709.577.965 1.042.256.464.383 1.086.383 1.866V259h-1.508v-1.33h-.077c-.102.214-.273.442-.511.684-.239.243-.556.45-.953.62-.396.171-.88.256-1.451.256Zm.231-1.355c.596 0 1.099-.117 1.508-.352a2.39 2.39 0 0 0 1.253-2.077v-1.381c-.064.077-.205.147-.422.211-.213.06-.46.113-.741.16a31.625 31.625 0 0 1-1.445.192 5.737 5.737 0 0 0-1.099.249c-.337.111-.61.279-.819.505-.204.222-.306.524-.306.908 0 .524.193.92.581 1.189.392.264.889.396 1.49.396ZM226.21 259v-9.818h1.457v1.534h.128c.205-.524.535-.931.991-1.221.456-.294 1.003-.441 1.643-.441.647 0 1.186.147 1.617.441.434.29.773.697 1.016 1.221h.102c.252-.507.629-.91 1.132-1.208.503-.303 1.106-.454 1.809-.454.878 0 1.596.275 2.154.825.558.545.837 1.395.837 2.55V259h-1.508v-6.571c0-.724-.199-1.242-.595-1.553a2.2 2.2 0 0 0-1.4-.467c-.69 0-1.225.209-1.604.627-.379.413-.569.937-.569 1.572V259h-1.534v-6.724c0-.559-.181-1.008-.543-1.349-.363-.345-.829-.518-1.4-.518-.392 0-.759.104-1.1.313a2.373 2.373 0 0 0-.818.87c-.204.366-.307.79-.307 1.272V259h-1.508Zm19.761.205c-.946 0-1.762-.209-2.448-.627a4.207 4.207 0 0 1-1.579-1.764c-.367-.759-.55-1.641-.55-2.646 0-1.006.183-1.892.55-2.659.371-.772.886-1.373 1.547-1.803.664-.435 1.44-.652 2.326-.652.512 0 1.017.085 1.515.256.499.17.953.447 1.362.831.409.379.735.882.978 1.508.243.627.364 1.398.364 2.314v.639h-7.568v-1.304h6.034c0-.554-.111-1.048-.332-1.483a2.517 2.517 0 0 0-.934-1.029c-.4-.251-.873-.377-1.419-.377-.6 0-1.12.149-1.559.448a2.945 2.945 0 0 0-1.004 1.15c-.234.473-.351.98-.351 1.521v.87c0 .741.127 1.37.383 1.885.26.512.62.902 1.08 1.17.461.264.995.396 1.605.396.396 0 .754-.055 1.074-.166a2.29 2.29 0 0 0 .837-.511 2.33 2.33 0 0 0 .543-.857l1.458.409a3.226 3.226 0 0 1-.774 1.304 3.764 3.764 0 0 1-1.342.87c-.533.204-1.131.307-1.796.307Zm8.584-.205-2.991-9.818h1.585l2.122 7.517h.102l2.097-7.517h1.611l2.071 7.491h.102l2.122-7.491h1.586L261.97 259h-1.483l-2.148-7.543h-.153L256.038 259h-1.483Zm16.056.205c-.887 0-1.665-.211-2.334-.633-.664-.422-1.184-1.012-1.559-1.771-.371-.758-.556-1.645-.556-2.659 0-1.023.185-1.915.556-2.678.375-.763.895-1.355 1.559-1.777.669-.422 1.447-.633 2.334-.633.886 0 1.661.211 2.326.633.669.422 1.189 1.014 1.56 1.777.375.763.562 1.655.562 2.678 0 1.014-.187 1.901-.562 2.659-.371.759-.891 1.349-1.56 1.771-.665.422-1.44.633-2.326.633Zm0-1.356c.673 0 1.227-.172 1.661-.517a3.05 3.05 0 0 0 .966-1.362 5.23 5.23 0 0 0 .313-1.828 5.28 5.28 0 0 0-.313-1.834 3.096 3.096 0 0 0-.966-1.375c-.434-.349-.988-.524-1.661-.524-.674 0-1.228.175-1.662.524-.435.35-.757.808-.966 1.375a5.28 5.28 0 0 0-.313 1.834c0 .656.105 1.266.313 1.828a3.05 3.05 0 0 0 .966 1.362c.434.345.988.517 1.662.517Zm6.751 1.151v-9.818h1.458v1.483h.102c.179-.486.503-.88.971-1.183a2.868 2.868 0 0 1 1.586-.454c.11 0 .249.003.415.007.166.004.292.01.377.019v1.534a4.176 4.176 0 0 0-.351-.057 3.445 3.445 0 0 0-.569-.045c-.478 0-.904.1-1.279.3-.37.196-.664.469-.882.818a2.21 2.21 0 0 0-.319 1.183V259h-1.509Zm8.104-3.58-.026-1.866h.307l4.295-4.372h1.867l-4.577 4.628h-.128l-1.738 1.61Zm-1.407 3.58v-13.091h1.509V259h-1.509Zm6.239 0-3.835-4.858 1.074-1.048 4.679 5.906h-1.918Z" fill="#fff"/><defs><linearGradient id="a" x1="297.804" y1="40.148" x2="297.804" y2="223.961" gradientUnits="userSpaceOnUse"><stop stop-color="#4F46E5"/><stop offset="1" stop-color="#9C96FF"/></linearGradient><linearGradient id="b" x1="192.946" y1="40.148" x2="192.946" y2="223.961" gradientUnits="userSpaceOnUse"><stop stop-color="#4F46E5"/><stop offset="1" stop-color="#9C96FF"/></linearGradient><linearGradient id="c" x1="313.259" y1="45.446" x2="177.698" y2="218.706" gradientUnits="userSpaceOnUse"><stop stop-color="#4F46E5"/><stop offset="1" stop-color="#9C96FF"/></linearGradient><linearGradient id="d" x1="208.302" y1="45.45" x2="72.741" y2="218.71" gradientUnits="userSpaceOnUse"><stop stop-color="#4F46E5"/><stop offset="1" stop-color="#9C96FF"/></linearGradient></defs></svg>

package/.github/media/logo-light.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path d="M322.869 65.213c0-13.843-11.222-25.065-25.065-25.065-13.844 0-25.066 11.222-25.066 25.065v133.683c0 13.843 11.222 25.065 25.066 25.065 13.843 0 25.065-11.222 25.065-25.065V65.213ZM218.012 65.213c0-13.843-11.222-25.065-25.066-25.065-13.843 0-25.065 11.222-25.065 25.065v133.683c0 13.843 11.222 25.065 25.065 25.065 13.844 0 25.066-11.222 25.066-25.065V65.213Z" stroke="#4F46E5" stroke-width="5" stroke-miterlimit="10"/><path d="M317.555 80.632c8.53-10.903 6.607-26.656-4.296-35.186-10.903-8.53-26.656-6.608-35.187 4.295L173.403 183.519c-8.531 10.903-6.607 26.657 4.295 35.187 10.903 8.53 26.657 6.607 35.187-4.295l104.67-133.779ZM212.597 80.636c8.53-10.902 6.607-26.656-4.295-35.186-10.903-8.53-26.657-6.608-35.187 4.295L68.445 183.523c-8.53 10.903-6.607 26.657 4.296 35.187 10.902 8.53 26.656 6.607 35.186-4.295l104.67-133.779Z" stroke="#4F46E5" stroke-width="5" stroke-miterlimit="10"/><rect x="165" y="234" width="158" height="36" rx="18" fill="#4F46E5"/><path d="M197.116 259v-13.091h7.849v1.406h-6.264v4.424h5.676v1.406h-5.676V259h-1.585Zm10.254 0v-9.818h1.457v1.483h.103c.179-.486.502-.88.971-1.183a2.865 2.865 0 0 1 1.585-.454c.111 0 .25.003.416.007.166.004.292.01.377.019v1.534a4.15 4.15 0 0 0-.352-.057 3.432 3.432 0 0 0-.568-.045c-.478 0-.904.1-1.279.3a2.264 2.264 0 0 0-.882.818 2.21 2.21 0 0 0-.32 1.183V259h-1.508Zm9.586.23a3.991 3.991 0 0 1-1.693-.351 2.909 2.909 0 0 1-1.209-1.03c-.298-.451-.447-.997-.447-1.636 0-.562.111-1.018.332-1.368.222-.354.518-.631.889-.831.371-.2.78-.349 1.227-.447.452-.103.906-.183 1.362-.243.596-.077 1.08-.134 1.451-.173.375-.042.647-.113.818-.211.175-.098.262-.268.262-.511v-.051c0-.631-.173-1.121-.518-1.47-.341-.35-.859-.524-1.553-.524-.72 0-1.285.157-1.694.473-.409.315-.697.652-.863 1.009l-1.432-.511c.256-.596.597-1.061 1.023-1.393.43-.337.899-.571 1.406-.703a5.815 5.815 0 0 1 1.509-.205c.315 0 .677.038 1.086.115.414.072.812.224 1.196.454.387.23.709.577.965 1.042.256.464.383 1.086.383 1.866V259h-1.508v-1.33h-.077c-.102.214-.273.442-.511.684-.239.243-.556.45-.953.62-.396.171-.88.256-1.451.256Zm.231-1.355c.596 0 1.099-.117 1.508-.352a2.39 2.39 0 0 0 1.253-2.077v-1.381c-.064.077-.205.147-.422.211-.213.06-.46.113-.741.16a31.625 31.625 0 0 1-1.445.192 5.737 5.737 0 0 0-1.099.249c-.337.111-.61.279-.819.505-.204.222-.306.524-.306.908 0 .524.193.92.581 1.189.392.264.889.396 1.49.396ZM224.21 259v-9.818h1.457v1.534h.128c.205-.524.535-.931.991-1.221.456-.294 1.003-.441 1.643-.441.647 0 1.186.147 1.617.441.434.29.773.697 1.016 1.221h.102c.252-.507.629-.91 1.132-1.208.503-.303 1.106-.454 1.809-.454.878 0 1.596.275 2.154.825.558.545.837 1.395.837 2.55V259h-1.508v-6.571c0-.724-.199-1.242-.595-1.553a2.2 2.2 0 0 0-1.4-.467c-.69 0-1.225.209-1.604.627-.379.413-.569.937-.569 1.572V259h-1.534v-6.724c0-.559-.181-1.008-.543-1.349-.363-.345-.829-.518-1.4-.518-.392 0-.759.104-1.1.313a2.373 2.373 0 0 0-.818.87c-.204.366-.307.79-.307 1.272V259h-1.508Zm19.761.205c-.946 0-1.762-.209-2.448-.627a4.207 4.207 0 0 1-1.579-1.764c-.367-.759-.55-1.641-.55-2.646 0-1.006.183-1.892.55-2.659.371-.772.886-1.373 1.547-1.803.664-.435 1.44-.652 2.326-.652.512 0 1.017.085 1.515.256.499.17.953.447 1.362.831.409.379.735.882.978 1.508.243.627.364 1.398.364 2.314v.639h-7.568v-1.304h6.034c0-.554-.111-1.048-.332-1.483a2.517 2.517 0 0 0-.934-1.029c-.4-.251-.873-.377-1.419-.377-.6 0-1.12.149-1.559.448a2.945 2.945 0 0 0-1.004 1.15c-.234.473-.351.98-.351 1.521v.87c0 .741.127 1.37.383 1.885.26.512.62.902 1.08 1.17.461.264.995.396 1.605.396.396 0 .754-.055 1.074-.166a2.29 2.29 0 0 0 .837-.511 2.33 2.33 0 0 0 .543-.857l1.458.409a3.226 3.226 0 0 1-.774 1.304 3.764 3.764 0 0 1-1.342.87c-.533.204-1.131.307-1.796.307Zm8.584-.205-2.991-9.818h1.585l2.122 7.517h.102l2.097-7.517h1.611l2.071 7.491h.102l2.122-7.491h1.586L259.97 259h-1.483l-2.148-7.543h-.153L254.038 259h-1.483Zm16.056.205c-.887 0-1.665-.211-2.334-.633-.664-.422-1.184-1.012-1.559-1.771-.371-.758-.556-1.645-.556-2.659 0-1.023.185-1.915.556-2.678.375-.763.895-1.355 1.559-1.777.669-.422 1.447-.633 2.334-.633.886 0 1.661.211 2.326.633.669.422 1.189 1.014 1.56 1.777.375.763.562 1.655.562 2.678 0 1.014-.187 1.901-.562 2.659-.371.759-.891 1.349-1.56 1.771-.665.422-1.44.633-2.326.633Zm0-1.356c.673 0 1.227-.172 1.661-.517a3.05 3.05 0 0 0 .966-1.362 5.23 5.23 0 0 0 .313-1.828 5.28 5.28 0 0 0-.313-1.834 3.096 3.096 0 0 0-.966-1.375c-.434-.349-.988-.524-1.661-.524-.674 0-1.228.175-1.662.524-.435.35-.757.808-.966 1.375a5.28 5.28 0 0 0-.313 1.834c0 .656.105 1.266.313 1.828a3.05 3.05 0 0 0 .966 1.362c.434.345.988.517 1.662.517Zm6.751 1.151v-9.818h1.458v1.483h.102c.179-.486.503-.88.971-1.183a2.868 2.868 0 0 1 1.586-.454c.11 0 .249.003.415.007.166.004.292.01.377.019v1.534a4.176 4.176 0 0 0-.351-.057 3.445 3.445 0 0 0-.569-.045c-.478 0-.904.1-1.279.3-.37.196-.664.469-.882.818a2.21 2.21 0 0 0-.319 1.183V259h-1.509Zm8.104-3.58-.026-1.866h.307l4.295-4.372h1.867l-4.577 4.628h-.128l-1.738 1.61Zm-1.407 3.58v-13.091h1.509V259h-1.509Zm6.239 0-3.835-4.858 1.074-1.048 4.679 5.906h-1.918Z" fill="#fff"/></svg>

package/.github/workflows/nodejs.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12, 14, 16]
+        node-version: [14, 16, 18]
 
     steps:
       - uses: actions/checkout@v2

package/README.md

@@ -1,35 +1,42 @@
-<div align="center">
-  <p><a href="https://maizzle.com" target="_blank"><img src="https://res.cloudinary.com/maizzle/image/upload/v1553710263/maizzle.svg" width="200" alt="Maizzle"></a></p>
-  <p>HTML email development framework</p>
-  <div>
-
-  [![Version][npm-version-shield]][npm]
-  [![Build][github-ci-shield]][github-ci]
-  [![Downloads][npm-stats-shield]][npm-stats]
-  [![License][license-shield]][license]
-
-  </div>
-</div>
-
-## About
-
-> **Note:** This repository contains the core code of the Maizzle framework. If you want to build HTML emails using Maizzle, visit the [starter repository](https://github.com/maizzle/maizzle).
-
-Maizzle is a framework that helps you quickly build HTML emails with [Tailwind CSS](https://tailwindcss.com/).
-
-## Documentation
-
-Maizzle documentation is available at https://maizzle.com
-
-## License
-
-The Maizzle framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
-
-[npm]: https://www.npmjs.com/package/@maizzle/framework
-[npm-stats]: https://npm-stat.com/charts.html?package=%40maizzle%2Fframework&from=2019-03-27
-[npm-version-shield]: https://img.shields.io/npm/v/@maizzle/framework.svg?style=flat-square
-[npm-stats-shield]: https://img.shields.io/npm/dt/@maizzle/framework.svg?style=flat-square&color=6875f5
-[github-ci]: https://github.com/maizzle/framework/actions
-[github-ci-shield]: https://img.shields.io/github/workflow/status/maizzle/framework/Node.js%20CI?style=flat-square
-[license]: ./LICENSE
-[license-shield]: https://img.shields.io/npm/l/@maizzle/framework.svg?style=flat-square&color=0e9f6e
+<div align="center">
+  <p>
+    <a href="https://maizzle.com/#gh-light-mode-only" target="_blank">
+      <img src="./.github/media/logo-light.svg" alt="Maizzle" width="300">
+    </a>
+    <a href="https://maizzle.com/#gh-dark-mode-only" target="_blank">
+      <img src="./.github/media/logo-dark.svg" alt="Maizzle" width="300">
+    </a>
+  </p>
+  <p>Quickly build HTML emails with utility-first CSS</p>
+  <div>
+
+  [![Version][npm-version-shield]][npm]
+  [![Build][github-ci-shield]][github-ci]
+  [![Downloads][npm-stats-shield]][npm-stats]
+  [![License][license-shield]][license]
+
+  </div>
+</div>
+
+## About
+
+> **Note:** This repository contains the core code of the Maizzle framework. If you want to build HTML emails using Maizzle, visit the [Starter repository](https://github.com/maizzle/maizzle).
+
+Maizzle is a framework that helps you quickly build HTML emails with [Tailwind CSS](https://tailwindcss.com/).
+
+## Documentation
+
+Maizzle documentation is available at https://maizzle.com
+
+## License
+
+The Maizzle framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
+
+[npm]: https://www.npmjs.com/package/@maizzle/framework
+[npm-stats]: https://npm-stat.com/charts.html?package=%40maizzle%2Fframework&from=2019-03-27
+[npm-version-shield]: https://img.shields.io/npm/v/@maizzle/framework.svg?style=flat-square
+[npm-stats-shield]: https://img.shields.io/npm/dt/@maizzle/framework.svg?style=flat-square&color=4f46e5
+[github-ci]: https://github.com/maizzle/framework/actions
+[github-ci-shield]: https://img.shields.io/github/workflow/status/maizzle/framework/Node.js%20CI?style=flat-square
+[license]: ./LICENSE
+[license-shield]: https://img.shields.io/npm/l/@maizzle/framework.svg?style=flat-square&color=0e9f6e

package/bin/maizzle

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('@maizzle/cli')

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
+  "bin": {
+    "maizzle": "bin/maizzle"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/maizzle/framework.git"
@@ -33,10 +36,11 @@
     "release": "np"
   },
   "dependencies": {
+    "@maizzle/cli": "^1.5.0",
     "autoprefixer": "^10.4.0",
     "browser-sync": "^2.26.13",
     "color-shorthand-hex-to-six-digit": "^3.0.2",
-    "email-comb": "^5.0.0",
+    "email-comb": "^5.2.0",
     "front-matter": "^4.0.0",
     "fs-extra": "^10.0.0",
     "glob-promise": "^4.1.0",
@@ -51,17 +55,18 @@
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^0.1.1",
     "posthtml-base-url": "^1.0.1",
-    "posthtml-content": "^0.0.3",
+    "posthtml-content": "^0.1.0",
     "posthtml-expressions": "^1.8.1",
     "posthtml-extend": "^0.6.0",
     "posthtml-extra-attributes": "^1.0.0",
-    "posthtml-fetch": "^2.0.0",
+    "posthtml-fetch": "^2.2.0",
     "posthtml-markdownit": "^1.3.0",
-    "posthtml-modules": "^0.8.1",
+    "posthtml-match-helper": "^1.0.3",
+    "posthtml-modules": "^0.9.0",
     "posthtml-mso": "^1.0.4",
     "posthtml-postcss-merge-longhand": "^1.0.2",
     "posthtml-remove-attributes": "^1.0.0",
-    "posthtml-safe-class-names": "^1.0.4",
+    "posthtml-safe-class-names": "^1.0.8",
     "posthtml-url-parameters": "^1.0.4",
     "pretty": "^2.0.0",
     "prevent-widows": "^1.0.2",
@@ -76,7 +81,7 @@
     "xo": "0.39.1"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.0.0"
   },
   "ava": {
     "files": [

package/src/commands/serve.js

@@ -41,13 +41,27 @@ const serve = async (env = 'local', config = {}) => {
     const globalPaths = [
       'src/**',
       get(config, 'build.tailwind.config', 'tailwind.config.js'),
-      [...new Set(get(config, 'build.browsersync.watch', []))]
+      ...new Set(get(config, 'build.browsersync.watch', []))
     ]
 
     // Watch for Template file changes
     browsersync()
       .watch(templatePaths)
       .on('change', async file => {
+        if (config.events && typeof config.events.beforeCreate === 'function') {
+          await config.events.beforeCreate(config)
+        }
+
+        // Don't render if file type is not configured
+        // eslint-disable-next-line
+        const filetypes = templates.reduce((acc, template) => {
+          return [...acc, ...get(template, 'filetypes', ['html'])]
+        }, [])
+
+        if (!filetypes.includes(path.extname(file).slice(1))) {
+          return
+        }
+
         if (get(config, 'build.console.clear')) {
           clearConsole()
         }
@@ -58,10 +72,6 @@ const serve = async (env = 'local', config = {}) => {
 
         file = file.replace(/\\/g, '/')
 
-        if (config.events && typeof config.events.beforeCreate === 'function') {
-          await config.events.beforeCreate(config)
-        }
-
         const renderOptions = {
           maizzle: config,
           ...config.events
@@ -121,19 +131,22 @@ const serve = async (env = 'local', config = {}) => {
 
     // Initialize Browsersync
     browsersync()
-      .init({
-        notify: false,
-        open: false,
-        port: 3000,
-        server: {
-          baseDir,
-          directory: true
-        },
-        tunnel: false,
-        ui: {port: 3001},
-        logFileChanges: false,
-        ...get(config, 'build.browsersync', {})
-      }, () => {})
+      .init(
+        merge(
+          {
+            notify: false,
+            open: false,
+            port: 3000,
+            server: {
+              baseDir,
+              directory: true
+            },
+            tunnel: false,
+            ui: {port: 3001},
+            logFileChanges: false
+          },
+          get(config, 'build.browsersync', {})
+        ), () => {})
   } catch (error) {
     spinner.fail(error)
     throw error

package/src/generators/output/to-string.js

@@ -22,13 +22,9 @@ module.exports = async (html, options) => {
   let config = merge(fileConfig, get(options, 'maizzle', {}))
 
   const tailwindConfig = get(options, 'tailwind.config', {})
-  const cssString = get(options, 'tailwind.css', '@tailwind components; @tailwind utilities;')
+  const cssString = get(options, 'tailwind.css', '')
 
-  let {frontmatter} = fm(html)
-
-  if (frontmatter) {
-    frontmatter = await posthtml(frontmatter, config)
-  }
+  const {frontmatter} = fm(html)
 
   html = `---\n${frontmatter}\n---\n\n${fm(html).body}`
 

package/src/generators/postcss.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const {get} = require('lodash')
+const postcss = require('postcss')
+const postcssImport = require('postcss-import')
+const postcssNested = require('tailwindcss/nesting')
+const mergeLonghand = require('postcss-merge-longhand')
+
+module.exports = {
+  process: async (css = '', maizzleConfig = {}, spinner = null) => {
+    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
+
+    return postcss([
+      postcssImport({path: path.dirname(userFilePath)}),
+      postcssNested(),
+      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
+      ...get(maizzleConfig, 'build.postcss.plugins', [])
+    ])
+      .process(css, {from: undefined})
+      .then(result => result.css)
+      .catch(error => {
+        console.error(error)
+        if (spinner) {
+          spinner.stop()
+        }
+
+        throw new Error(`PostCSS processing failed`)
+      })
+  }
+}

package/src/generators/posthtml.js

@@ -1,61 +1,66 @@
-const fm = require('front-matter')
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const fetch = require('posthtml-fetch')
-const layouts = require('posthtml-extend')
-const modules = require('posthtml-modules')
-const expressions = require('posthtml-expressions')
-
-module.exports = async (html, config) => {
-  const layoutsOptions = get(config, 'build.layouts', {})
-
-  const fetchOptions = get(config, 'build.posthtml.fetch', {})
-  const fetchPlugin = fetch({...fetchOptions})
-
-  const modulesOptions = get(config, 'build.components', {})
-  // Fake `from` option so we can reference modules relatively
-  const modulesRoot = modulesOptions.root || './'
-  const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
-
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
-
-  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
-
-  const locals = merge(
-    get(expressionsOptions, 'locals', {}),
-    get(config, 'locals', {}),
-    {page: config}
-  )
-
-  return posthtml([
-    fetchPlugin,
-    layouts(
-      merge(
-        {
-          strict: false,
-          plugins: [
-            expressions({...expressionsOptions, locals})
-          ]
-        },
-        layoutsOptions
-      )
-    ),
-    modules({
-      parser: posthtmlOptions,
-      attributeAsLocals: true,
-      from: modulesFrom,
-      root: modulesRoot,
-      tag: 'component',
-      attribute: 'src',
-      plugins: [
-        fetchPlugin
-      ],
-      locals,
-      ...modulesOptions
-    }),
-    ...posthtmlPlugins
-  ])
-    .process(html, {...posthtmlOptions})
-    .then(result => fm(result.html).body)
-}
+const fm = require('front-matter')
+const posthtml = require('posthtml')
+const {get, merge} = require('lodash')
+const fetch = require('posthtml-fetch')
+const layouts = require('posthtml-extend')
+const modules = require('posthtml-modules')
+const expressions = require('posthtml-expressions')
+
+module.exports = async (html, config) => {
+  const layoutsOptions = get(config, 'build.layouts', {})
+
+  const modulesOptions = get(config, 'build.components', {})
+  // Fake `from` option so we can reference modules relatively
+  const modulesRoot = modulesOptions.root || './'
+  const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
+
+  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
+
+  const locals = merge(
+    get(expressionsOptions, 'locals', {}),
+    get(config, 'locals', {}),
+    {page: config}
+  )
+
+  const fetchPlugin = fetch(
+    merge(
+      {
+        expressions: merge({...expressionsOptions, locals})
+      },
+      get(config, 'build.posthtml.fetch', {})
+    )
+  )
+
+  return posthtml([
+    fetchPlugin,
+    expressions({...expressionsOptions, locals}),
+    layouts(
+      merge(
+        {
+          strict: false,
+          expressions: merge({...expressionsOptions, locals})
+        },
+        layoutsOptions
+      )
+    ),
+    modules({
+      parser: posthtmlOptions,
+      attributeAsLocals: true,
+      from: modulesFrom,
+      root: modulesRoot,
+      tag: 'component',
+      attribute: 'src',
+      plugins: [
+        fetchPlugin
+      ],
+      locals,
+      ...modulesOptions
+    }),
+    ...posthtmlPlugins
+  ])
+    .process(html, {...posthtmlOptions})
+    .then(result => fm(result.html).body)
+}

package/src/generators/tailwindcss.js

@@ -92,7 +92,7 @@ module.exports = {
     if (userFileExists) {
       css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
     } else {
-      css = '@import "tailwindcss/components"; @import "tailwindcss/utilities";' + css
+      css = `@import "tailwindcss/components"; @import "tailwindcss/utilities"; ${css}`
     }
 
     return postcss([

package/src/index.js

@@ -1,13 +1,17 @@
-const serve = require('./commands/serve')
-const toFile = require('./commands/build')
-const transformers = require('./transformers')
-const toString = require('./functions/render')
-const toPlaintext = require('./functions/plaintext')
-
-module.exports = {
-  serve,
-  build: toFile,
-  ...transformers,
-  render: toString,
-  plaintext: toPlaintext
-}
+const serve = require('./commands/serve')
+const toFile = require('./commands/build')
+const transformers = require('./transformers')
+const toString = require('./functions/render')
+const PostCSS = require('./generators/postcss')
+const toPlaintext = require('./functions/plaintext')
+const TailwindCSS = require('./generators/tailwindcss')
+
+module.exports = {
+  serve,
+  build: toFile,
+  ...transformers,
+  render: toString,
+  postcss: PostCSS,
+  plaintext: toPlaintext,
+  tailwindcss: TailwindCSS
+}

package/src/transformers/baseUrl.js

@@ -3,17 +3,41 @@ const isUrl = require('is-url-superb')
 const baseUrl = require('posthtml-base-url')
 const {get, isObject, isEmpty} = require('lodash')
 
-// VML backgrounds need regex because they're inside HTML comments :(
+/**
+ * VML backgrounds must be handled with regex because
+ * they're inside HTML comments.
+ */
 const rewriteVMLs = (html, url) => {
-  const vImageMatch = html.match(/(<v:image.+)(src=['"]([^'"]+)['"])/)
-  const vFillMatch = html.match(/(<v:fill.+)(src=['"]([^'"]+)['"])/)
+  // Handle <v:image>
+  const vImageMatches = html.match(/<v:image[^>]+src="?([^"\s]+)"/g)
 
-  if (vImageMatch && !isUrl(vImageMatch[3])) {
-    html = html.replace(vImageMatch[0], `${vImageMatch[1]}src="${url}${vImageMatch[3]}"`)
+  if (vImageMatches) {
+    vImageMatches.forEach(match => {
+      const vImage = match.match(/<v:image[^>]+src="?([^"\s]+)"/)
+      const vImageSrc = vImage[1]
+
+      if (!isUrl(vImageSrc)) {
+        const vImageSrcUrl = url + vImageSrc
+        const vImageReplace = vImage[0].replace(vImageSrc, vImageSrcUrl)
+        html = html.replace(vImage[0], vImageReplace)
+      }
+    })
   }
 
-  if (vFillMatch && !isUrl(vFillMatch[3])) {
-    html = html.replace(vFillMatch[0], `${vFillMatch[1]}src="${url}${vFillMatch[3]}"`)
+  // Handle <v:fill>
+  const vFillMatches = html.match(/<v:fill[^>]+src="?([^"\s]+)"/g)
+
+  if (vFillMatches) {
+    vFillMatches.forEach(match => {
+      const vFill = match.match(/<v:fill[^>]+src="?([^"\s]+)"/)
+      const vFillSrc = vFill[1]
+
+      if (!isUrl(vFillSrc)) {
+        const vFillSrcUrl = url + vFillSrc
+        const vFillReplace = vFill[0].replace(vFillSrc, vFillSrcUrl)
+        html = html.replace(vFill[0], vFillReplace)
+      }
+    })
   }
 
   return html
@@ -23,7 +47,7 @@ module.exports = async (html, config = {}, direct = false) => {
   const url = direct ? config : get(config, 'baseURL')
   const posthtmlOptions = get(config, 'build.posthtml.options', {})
 
-  // `baseUrl` as a string
+  // Handle `baseUrl` as a string
   if (typeof url === 'string' && url.length > 0) {
     html = rewriteVMLs(html, url)
 
@@ -34,7 +58,7 @@ module.exports = async (html, config = {}, direct = false) => {
       .then(result => result.html)
   }
 
-  // `baseUrl: {}`
+  // Handle `baseUrl` as an object
   if (isObject(url) && !isEmpty(url)) {
     html = rewriteVMLs(html, url.url)