[{"data":1,"prerenderedAt":614},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/transformers":270,"docs-bottom-nav":541},{"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":105,"body":272,"description":533,"extension":534,"meta":535,"navigation":536,"path":109,"seo":537,"sitemap":538,"stem":539,"__hash__":540},"docs/docs/transformers.md",{"type":273,"value":274,"toc":527},"minimark",[275,279,283,291,294,299,302,384,391,438,442,452,503,507,515,518,521,524],[276,277,108],"h1",{"id":278},"what-are-transformers",[280,281,282],"p",{},"Transformers in Maizzle are functions that basically take a string of HTML, do something with it, and then return it for further processing.",[280,284,285,286,290],{},"They run after your Template has been compiled and allow you to manipulate the HTML in various ways, like prepending a base URL to all ",[287,288,289],"code",{},"\u003Cimg>"," tags or preventing widow words.",[280,292,293],{},"Some of the Transformers help you automate tedious tasks that are required when developing HTML emails, like inlining CSS, automatically adding attributes for better accessibility, or generating plaintext versions of your emails.",[295,296,298],"h2",{"id":297},"transformers-list","Transformers list",[280,300,301],{},"Most Transformers are enabled by default:",[303,304,305,313,318,323,329,342,353,359,366,373],"ul",{},[306,307,308,312],"li",{},[309,310,311],"a",{"href":118},"Safe Class Names"," - rewrites Tailwind CSS class names to email-safe alternatives",[306,314,315,317],{},[309,316,111],{"href":112}," - Liquid-like filters as HTML attributes",[306,319,320,322],{},[309,321,96],{"href":97}," - converts Markdown to HTML",[306,324,325,328],{},[309,326,327],{"href":139},"Prevent Widows"," - enables an HTML attribute that prevents widow words",[306,330,331,333,334,337,338,341],{},[309,332,132],{"href":133}," - improves accessibility by adding ",[287,335,336],{},"alt"," and ",[287,339,340],{},"role"," attributes",[306,343,344,346,347,337,350,341],{},[309,345,129],{"href":130}," - removes empty ",[287,348,349],{},"style",[287,351,352],{},"class",[306,354,355,358],{},[309,356,357],{"href":148},"Six-digit HEX"," - converts 3-digit HEX colors to 6-digit",[306,360,361,365],{},[309,362,364],{"href":363},"/docs/tags#outlook","Outlook Tags"," - simplifies writing MSO conditionals for Outlook",[306,367,368,372],{},[309,369,371],{"href":370},"/docs/configuration/css#resolveprops","resolveProps"," - resolves CSS variables to their static values",[306,374,375,379,380,383],{},[309,376,378],{"href":377},"/docs/configuration/css#resolvecalc","resolveCalc"," - resolves CSS ",[287,381,382],{},"calc()"," functions to their static values",[280,385,386,387,390],{},"However, some are opt-in and need to be explicitly enabled in your ",[287,388,389],{},"config.js",":",[303,392,393,398,404,411,416,422,428,433],{},[306,394,395,397],{},[309,396,114],{"href":115}," - inlines CSS styles into the HTML",[306,399,400,403],{},[309,401,402],{"href":121},"Purge CSS"," - removes unused CSS classes from your HTML",[306,405,406,408,409,341],{},[309,407,123],{"href":124}," - converts long-hand CSS to shorthand in ",[287,410,349],{},[306,412,413,415],{},[309,414,144],{"href":145}," - prepends a string to configured attributes in HTML",[306,417,418,421],{},[309,419,420],{"href":142},"URL parameters"," - adds URL parameters to configured HTML tags",[306,423,424,427],{},[309,425,426],{"href":136},"Replace strings"," - replaces strings through regular expressions",[306,429,430,432],{},[309,431,150],{"href":151}," - pretty-prints the HTML",[306,434,435,437],{},[309,436,153],{"href":154}," - minifies the HTML",[295,439,441],{"id":440},"disabling","Disabling",[280,443,444,445,448,449,390],{},"You may disable all Transformers by setting ",[287,446,447],{},"useTransformers"," to ",[287,450,451],{},"false",[453,454,461],"pre",{"className":455,"code":456,"filename":389,"highlights":457,"language":459,"meta":460,"style":460},"language-js shiki shiki-themes tailwind-css tailwind-css has-diff","export default {\n  useTransformers: false, // [!code ++]\n}\n",[458],2,"js","",[287,462,463,479,497],{"__ignoreMap":460},[464,465,468,472,475],"span",{"class":466,"line":467},"line",1,[464,469,471],{"class":470},"sizJ4","export",[464,473,474],{"class":470}," default",[464,476,478],{"class":477},"sprQ5"," {\n",[464,480,485,489,491,494],{"class":481,"line":458},[466,482,483,484],"highlight","diff","add",[464,486,488],{"class":487},"sfCc6","  useTransformers",[464,490,390],{"class":477},[464,492,493],{"class":470}," false",[464,495,496],{"class":477},",",[464,498,500],{"class":466,"line":499},3,[464,501,502],{"class":477},"}\n",[295,504,506],{"id":505},"execution-order","Execution order",[280,508,509,510,514],{},"Transformers in Maizzle need to run in a specific order, see it on the ",[309,511,513],{"href":512},"/docs/build-process#compile-templates","build process"," page.",[295,516,102],{"id":517},"api",[280,519,520],{},"Maizzle Transformers can also be used programmatically in your application. You can inline some CSS or minify HTML even without using Maizzle to build your emails.",[280,522,523],{},"See the documentation of each Transformer for usage examples.",[349,525,526],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":460,"searchDepth":458,"depth":458,"links":528},[529,530,531,532],{"id":297,"depth":458,"text":298},{"id":440,"depth":458,"text":441},{"id":505,"depth":458,"text":506},{"id":517,"depth":458,"text":102},"What are Maizzle Transformers and how to use them to transform your HTML emails.","md",{},true,{"title":105,"description":533},{"loc":109},"docs/transformers","PB8b-vrU3wSW_0QzZNx3HU4GJxvPPrOlnqZNT-qfUvE",{"id":4,"extension":5,"items":542,"meta":613,"stem":195,"__hash__":196},[543,553,558,567,580,598,604],{"name":8,"items":544},[545,546,547,548,549,550,551,552],{"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":554},[555,556,557],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":559},[560,561,562,563,564,565,566],{"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":568},[569,570,571,572,573,574,575,576,577,578,579],{"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":581},[582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,597],{"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":599},[600,601,602,603],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":605},[606,607,608,609,610,611,612],{"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},{},1780318596716]