[{"data":1,"prerenderedAt":810},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/build-process":270,"docs-bottom-nav":737},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":272,"body":273,"description":729,"extension":730,"meta":731,"navigation":732,"path":45,"seo":733,"sitemap":734,"stem":735,"__hash__":736},"docs/docs/build-process.md","Build process",{"type":274,"value":275,"toc":715},"minimark",[276,280,289,292,297,304,317,330,334,343,347,354,359,363,366,479,482,487,490,650,654,661,664,675,679,690,694,704,708],[277,278,272],"h1",{"id":279},"build-process",[281,282,283,284,288],"p",{},"When you run ",[285,286,287],"code",{},"maizzle build",", your Templates go through a series of events that compile them to plain HTML and apply various, email-specific transformations.",[281,290,291],{},"To get a better understanding of how Maizzle builds your emails, here's a step-by-step guide of what's going on under the hood.",[293,294,296],"h2",{"id":295},"environment-config","Environment config",[281,298,299,300,303],{},"First, a global configuration object is computed by merging your Environment config on top of the base ",[285,301,302],{},"config.js",".",[281,305,306,307,310,311,314,315,303],{},"For example, running ",[285,308,309],{},"maizzle build production"," will tell Maizzle to look for the ",[285,312,313],{},"config.production.js"," file at your current location, and merge it on top of ",[285,316,302],{},[281,318,319,320,322,323,326,327,329],{},"When running ",[285,321,287],{}," or ",[285,324,325],{},"maizzle serve",", only the base ",[285,328,302],{}," will be used.",[293,331,333],{"id":332},"beforecreate","beforeCreate()",[281,335,336,337,342],{},"The ",[338,339,341],"a",{"href":340},"/docs/events#beforecreate","beforeCreate"," event (CLI-only) is triggered, giving you access to the config before Maizzle loops over your Templates to compile them.",[293,344,346],{"id":345},"clean-destination","Clean destination",[281,348,349,350,353],{},"The destination directories that you have defined under ",[285,351,352],{},"build.output.path"," in your environment config are deleted.",[355,356,358],"alert",{"type":357},"warning","\nBe careful when customizing this path, so you don't end up deleting important directories and files on your machine.\n",[293,360,362],{"id":361},"compile-templates","Compile templates",[281,364,365],{},"Each Template file is parsed and compiled:",[367,368,369,373,376,385,392,473],"ol",{},[370,371,372],"li",{},"Maizzle reads the Template file",[370,374,375],{},"It extracts its Front Matter",[370,377,378,379,382,383],{},"A unique Template ",[285,380,381],{},"config"," is computed by merging the Template's Front Matter keys with the Environment ",[285,384,381],{},[370,386,387,391],{},[338,388,390],{"href":389},"/docs/events#beforerender","beforeRender()"," event is triggered",[370,393,394,395,398,400,401,403,404,407,408,411,412,414,416,417],{},"The HTML is rendered with PostHTML\n",[396,397],"br",{},[396,399],{},"\nYour Environment name and all ",[285,402,381],{}," options (including any you defined in Front Matter) are exposed under the ",[285,405,406],{},"page"," object, which you can access through ",[338,409,410],{"href":82},"expressions",".\n",[396,413],{},[396,415],{},"\nPostHTML plugins that are used as part of the rendering process:\n",[418,419,420,430,436,449,452,462],"ul",{},[370,421,422,423,429],{},"envTags - core plugin that enables ",[338,424,426],{"href":425},"/docs/tags#env",[285,427,428],{},"\u003Cenv:?>"," tags",[370,431,432,433],{},"envAttributes - core plugin that enables attributes like ",[285,434,435],{},"src-{env}",[370,437,438,439,445,446,429],{},"expandLinkTags - core plugin that expands local ",[338,440,442,429],{"href":441},"/docs/layouts#link-tag",[285,443,444],{},"\u003Clink>"," into ",[285,447,448],{},"\u003Cstyle>",[370,450,451],{},"postcssPlugin - this is where the Tailwind CSS magic happens",[370,453,454,455,461],{},"fetchPlugin - enables the ",[338,456,458],{"href":457},"/docs/tags#fetch",[285,459,460],{},"\u003Cfetch>"," tag",[370,463,464,472],{},[338,465,469],{"href":466,"rel":467},"https://github.com/posthtml/posthtml-components",[468],"nofollow",[285,470,471],{},"posthtml-component"," - the PostHTML plugin that powers Maizzle's components",[370,474,475,391],{},[338,476,478],{"href":477},"/docs/events#afterrender","afterRender()",[293,480,105],{"id":481},"transformers",[281,483,484,485,303],{},"The compiled HTML is now passed on to a series of Transformers. Most of them are enabled by default, but some need to be explicitly enabled in your ",[285,486,302],{},[281,488,489],{},"The order in which they're executed is exactly as follows:",[367,491,492,505,519,525,531,541,548,554,560,571,577,583,589,602,613,622,632,638,644],{},[370,493,494,495,498,499,502,503,429],{},"coreTransformers - remove ",[285,496,497],{},"\u003Cplaintext>"," tags when developing locally, enable ",[285,500,501],{},"no-inline"," attribute for ",[285,504,448],{},[370,506,507,510,511,514,515,518],{},[338,508,509],{"href":118},"safeClassNames"," - escaped characters in ",[285,512,513],{},"\u003Chead>"," and ",[285,516,517],{},"\u003Cbody>"," CSS classes are replaced with email-safe alternatives",[370,520,521,524],{},[338,522,523],{"href":112},"filters"," - Liquid-like filters are applied to the HTML",[370,526,527,530],{},[338,528,529],{"href":97},"markdown"," is compiled",[370,532,533,536,537,540],{},[338,534,535],{"href":139},"widowWords"," - widow words are prevented in tags with the ",[285,538,539],{},"prevent-widows"," attribute",[370,542,543,547],{},[338,544,546],{"href":545},"/docs/transformers/inline-css#attributetostyle","attributeToStyle"," - translates HTML attributes to inline CSS",[370,549,550,553],{},[338,551,552],{"href":115},"inlineCSS"," - CSS is inlined",[370,555,556,559],{},[338,557,558],{"href":130},"removeAttributes"," - HTML attribute removal based on your config",[370,561,562,566,567,570],{},[563,564,565],"span",{},"shorthandCSS"," - longhand CSS in ",[285,568,569],{},"style"," attributes is converted to shorthand-form",[370,572,573,576],{},[338,574,575],{"href":133},"addAttributes"," - user-configured attributes are added to tags",[370,578,579,582],{},[338,580,581],{"href":145},"baseURL"," - a base URL is prepended to configured attribute values",[370,584,585,588],{},[338,586,587],{"href":142},"urlParameters"," - configured parameters are added to URLs",[370,590,591,594,595,514,598,601],{},[338,592,593],{"href":148},"sixHex"," - ensures six digit HEX color codes are used in ",[285,596,597],{},"bgcolor",[285,599,600],{},"color"," attributes",[370,603,604,608,609,612],{},[338,605,607],{"href":606},"/docs/tags#outlook","posthtmlMSO"," - ",[285,610,611],{},"\u003Coutlook>"," tags are replaced with the correct MSO comments",[370,614,615,618,619,621],{},[338,616,617],{"href":121},"purgeCSS"," - unused CSS is removed from ",[285,620,448],{}," tags and HTML attributes",[370,623,624,608,628,631],{},[338,625,627],{"href":626},"/docs/tags#template","templateTag",[285,629,630],{},"\u003Ctemplate>"," tags are replaced with their content",[370,633,634,637],{},[338,635,636],{"href":136},"replaceStrings"," - strings are replaced based on your config",[370,639,640,643],{},[338,641,642],{"href":151},"prettify"," - HTML is prettified",[370,645,646,649],{},[338,647,648],{"href":154},"minify"," - HTML is minified",[293,651,653],{"id":652},"aftertransformers","afterTransformers()",[281,655,336,656,660],{},[338,657,659],{"href":658},"/docs/events#aftertransformers","afterTransformers"," event is triggered.",[293,662,99],{"id":663},"plaintext",[281,665,666,667,671,672,674],{},"A plaintext version is created at the ",[338,668,670],{"href":669},"/docs/plaintext#custom-path","configured location",", if ",[285,673,663],{}," was enabled.",[293,676,678],{"id":677},"write-to-disk","Write to disk",[281,680,681,682,685,686,303],{},"The compiled HTML is saved at the ",[338,683,670],{"href":684},"/docs/configuration/build#path",", with the ",[338,687,689],{"href":688},"/docs/configuration/build#extension","configured extension",[293,691,693],{"id":692},"copy-static-files","Copy static files",[281,695,696,697,700,701,303],{},"All files and folders in ",[285,698,699],{},"build.static.source"," are copied to ",[285,702,703],{},"build.static.destination",[293,705,707],{"id":706},"afterbuild","afterBuild()",[281,709,336,710,714],{},[338,711,713],{"href":712},"/docs/events#afterbuild","afterBuild"," event is triggered (CLI-only).",{"title":716,"searchDepth":717,"depth":717,"links":718},"",2,[719,720,721,722,723,724,725,726,727,728],{"id":295,"depth":717,"text":296},{"id":332,"depth":717,"text":333},{"id":345,"depth":717,"text":346},{"id":361,"depth":717,"text":362},{"id":481,"depth":717,"text":105},{"id":652,"depth":717,"text":653},{"id":663,"depth":717,"text":99},{"id":677,"depth":717,"text":678},{"id":692,"depth":717,"text":693},{"id":706,"depth":717,"text":707},"See how the build process works and how Maizzle builds your emails.","md",{},true,{"title":272,"description":729},{"loc":45},"docs/build-process","IGH2f3FVU5BFbcw4myH_fb9jmKx2BdPnUkcrSRMUmGc",{"id":4,"extension":5,"items":738,"meta":809,"stem":195,"__hash__":196},[739,749,754,763,776,794,800],{"name":8,"items":740},[741,742,743,744,745,746,747,748],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":750},[751,752,753],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":755},[756,757,758,759,760,761,762],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":764},[765,766,767,768,769,770,771,772,773,774,775],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":777},[778,779,780,781,782,783,784,785,786,787,788,789,790,791,792,793],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":795},[796,797,798,799],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":801},[802,803,804,805,806,807,808],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318590601]