[{"data":1,"prerenderedAt":964},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/transformers/safe-class-names":270,"docs-bottom-nav":891},{"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":884,"extension":885,"meta":886,"navigation":774,"path":118,"seo":887,"sitemap":888,"stem":889,"__hash__":890},"docs/docs/transformers/safe-class-names.md","Safe class names",{"type":274,"value":275,"toc":878},"minimark",[276,280,293,303,313,318,321,562,566,573,665,682,686,692,732,735,742,830,833,874],[277,278,272],"h1",{"id":279},"safe-class-names",[281,282,283,284,288,289,292],"p",{},"Some email clients don't support class names with escaped characters. Gmail in particular will discard the entire rule of such a class, so you can't safely use CSS class names like ",[285,286,287],"code",{},"w-1/2"," or ",[285,290,291],{},"sm:block",".",[281,294,295,296,288,299,302],{},"Maizzle normalizes escaped character class names like ",[285,297,298],{},"\\:",[285,300,301],{},"\\/"," by replacing them with email-safe alternatives, so you can keep using those fancy Tailwind CSS class names and not have to worry about it.",[281,304,305,306,309,310,292],{},"By default, it runs only when not developing locally. This means that it's disabled when you run ",[285,307,308],{},"maizzle serve",", but it's enabled when running ",[285,311,312],{},"maizzle build production",[314,315,317],"h2",{"id":316},"replacements","Replacements",[281,319,320],{},"This is the default replacement strategy:",[322,323,324,337],"table",{},[325,326,327],"thead",{},[328,329,330,334],"tr",{},[331,332,333],"th",{},"Character",[331,335,336],{},"Replacement",[338,339,340,349,356,364,371,378,385,393,400,407,414,421,428,436,444,452,460,468,476,484,492,499,506,513,520,527,534,541,548,555],"tbody",{},[328,341,342,346],{},[343,344,345],"td",{},":",[343,347,348],{},"-",[328,350,351,354],{},[343,352,353],{},"/",[343,355,348],{},[328,357,358,361],{},[343,359,360],{},"%",[343,362,363],{},"pc",[328,365,366,368],{},[343,367,292],{},[343,369,370],{},"_",[328,372,373,376],{},[343,374,375],{},",",[343,377,370],{},[328,379,380,383],{},[343,381,382],{},"#",[343,384,370],{},[328,386,387,390],{},[343,388,389],{},"[",[343,391,392],{},"(removed)",[328,394,395,398],{},[343,396,397],{},"]",[343,399,392],{},[328,401,402,405],{},[343,403,404],{},"(",[343,406,392],{},[328,408,409,412],{},[343,410,411],{},")",[343,413,392],{},[328,415,416,419],{},[343,417,418],{},"{",[343,420,418],{},[328,422,423,426],{},[343,424,425],{},"}",[343,427,425],{},[328,429,430,433],{},[343,431,432],{},"!",[343,434,435],{},"important-",[328,437,438,441],{},[343,439,440],{},"&",[343,442,443],{},"and-",[328,445,446,449],{},[343,447,448],{},"\u003C",[343,450,451],{},"lt-",[328,453,454,457],{},[343,455,456],{},"=",[343,458,459],{},"eq-",[328,461,462,465],{},[343,463,464],{},">",[343,466,467],{},"gt-",[328,469,470,473],{},[343,471,472],{},"|",[343,474,475],{},"or-",[328,477,478,481],{},[343,479,480],{},"@",[343,482,483],{},"at-",[328,485,486,489],{},[343,487,488],{},"?",[343,490,491],{},"q-",[328,493,494,497],{},[343,495,496],{},"\\",[343,498,348],{},[328,500,501,504],{},[343,502,503],{},"\"",[343,505,348],{},[328,507,508,511],{},[343,509,510],{},"$",[343,512,348],{},[328,514,515,518],{},[343,516,517],{},"'",[343,519,348],{},[328,521,522,525],{},[343,523,524],{},"*",[343,526,348],{},[328,528,529,532],{},[343,530,531],{},"+",[343,533,348],{},[328,535,536,539],{},[343,537,538],{},";",[343,540,348],{},[328,542,543,546],{},[343,544,545],{},"^",[343,547,348],{},[328,549,550,553],{},[343,551,552],{},"`",[343,554,348],{},[328,556,557,560],{},[343,558,559],{},"~",[343,561,348],{},[314,563,565],{"id":564},"customization","Customization",[281,567,568,569,572],{},"You may define new replacement mappings (or overwrite existing ones) by adding a ",[285,570,571],{},"css.safe"," key to your config:",[574,575,581],"pre",{"className":576,"code":577,"filename":578,"language":579,"meta":580,"style":580},"language-js shiki shiki-themes tailwind-css tailwind-css","export default {\n  css: {\n    safe: {\n      ':': '__',\n      '!': 'i-',\n    }\n  }\n}\n","config.js","js","",[285,582,583,599,610,620,634,647,653,659],{"__ignoreMap":580},[584,585,588,592,595],"span",{"class":586,"line":587},"line",1,[584,589,591],{"class":590},"sizJ4","export",[584,593,594],{"class":590}," default",[584,596,598],{"class":597},"sprQ5"," {\n",[584,600,602,606,608],{"class":586,"line":601},2,[584,603,605],{"class":604},"sfCc6","  css",[584,607,345],{"class":597},[584,609,598],{"class":597},[584,611,613,616,618],{"class":586,"line":612},3,[584,614,615],{"class":604},"    safe",[584,617,345],{"class":597},[584,619,598],{"class":597},[584,621,623,626,628,631],{"class":586,"line":622},4,[584,624,625],{"class":604},"      ':'",[584,627,345],{"class":597},[584,629,630],{"class":604}," '__'",[584,632,633],{"class":597},",\n",[584,635,637,640,642,645],{"class":586,"line":636},5,[584,638,639],{"class":604},"      '!'",[584,641,345],{"class":597},[584,643,644],{"class":604}," 'i-'",[584,646,633],{"class":597},[584,648,650],{"class":586,"line":649},6,[584,651,652],{"class":597},"    }\n",[584,654,656],{"class":586,"line":655},7,[584,657,658],{"class":597},"  }\n",[584,660,662],{"class":586,"line":661},8,[584,663,664],{"class":597},"}\n",[281,666,667,668,671,672,675,676,671,679,292],{},"That would turn ",[285,669,670],{},"sm:w-full"," into ",[285,673,674],{},"sm__w-full"," and ",[285,677,678],{},"sm:!text-xl",[285,680,681],{},"sm__i-text-xl",[314,683,685],{"id":684},"disabling","Disabling",[281,687,688,689,345],{},"You can prevent Maizzle from rewriting your class names with safe characters, by setting this option to ",[285,690,691],{},"false",[574,693,695],{"className":576,"code":694,"filename":578,"language":579,"meta":580,"style":580},"export default {\n  css: {\n    safe: false,\n  }\n}\n",[285,696,697,705,713,724,728],{"__ignoreMap":580},[584,698,699,701,703],{"class":586,"line":587},[584,700,591],{"class":590},[584,702,594],{"class":590},[584,704,598],{"class":597},[584,706,707,709,711],{"class":586,"line":601},[584,708,605],{"class":604},[584,710,345],{"class":597},[584,712,598],{"class":597},[584,714,715,717,719,722],{"class":586,"line":612},[584,716,615],{"class":604},[584,718,345],{"class":597},[584,720,721],{"class":590}," false",[584,723,633],{"class":597},[584,725,726],{"class":586,"line":622},[584,727,658],{"class":597},[584,729,730],{"class":586,"line":636},[584,731,664],{"class":597},[314,733,102],{"id":734},"api",[281,736,737,738,741],{},"You may use the ",[285,739,740],{},"safeClassNames"," Transformer in your application.",[574,743,746],{"className":576,"code":744,"filename":745,"language":579,"meta":580,"style":580},"import { safeClassNames } from '@maizzle/framework'\n\nconst html = await safeClassNames(\n  '\u003Cdiv class=\"sm:text-left w-1.5\">foo\u003C/div>', // html string\n  {'.': 'dot'} // replacements object\n)\n","app.js",[285,747,748,770,776,796,807,825],{"__ignoreMap":580},[584,749,750,754,757,761,764,767],{"class":586,"line":587},[584,751,753],{"class":752},"s8qYB","import",[584,755,756],{"class":597}," {",[584,758,760],{"class":759},"sO1gY"," safeClassNames",[584,762,763],{"class":597}," }",[584,765,766],{"class":597}," from",[584,768,769],{"class":752}," '@maizzle/framework'\n",[584,771,772],{"class":586,"line":601},[584,773,775],{"emptyLinePlaceholder":774},true,"\n",[584,777,778,781,784,787,790,793],{"class":586,"line":612},[584,779,780],{"class":752},"const",[584,782,783],{"class":604}," html ",[584,785,456],{"class":786},"sVevU",[584,788,789],{"class":590}," await",[584,791,760],{"class":792},"s2ImL",[584,794,795],{"class":604},"(\n",[584,797,798,801,803],{"class":586,"line":622},[584,799,800],{"class":604},"  '\u003Cdiv class=\"sm:text-left w-1.5\">foo\u003C/div>'",[584,802,375],{"class":597},[584,804,806],{"class":805},"smVoC"," // html string\n",[584,808,809,812,815,817,820,822],{"class":586,"line":636},[584,810,811],{"class":597},"  {",[584,813,814],{"class":604},"'.'",[584,816,345],{"class":597},[584,818,819],{"class":604}," 'dot'",[584,821,425],{"class":597},[584,823,824],{"class":805}," // replacements object\n",[584,826,827],{"class":586,"line":649},[584,828,829],{"class":604},")\n",[281,831,832],{},"Result:",[574,834,838],{"className":835,"code":836,"language":837,"meta":580,"style":580},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cdiv class=\"sm-text-left w-1dot5\">foo\u003C/div>\n","html",[285,839,840],{"__ignoreMap":580},[584,841,842,845,848,852,854,856,859,861,863,866,869,871],{"class":586,"line":587},[584,843,448],{"class":844},"soJEP",[584,846,847],{"class":590},"div",[584,849,851],{"class":850},"sQMLp"," class",[584,853,456],{"class":844},[584,855,503],{"class":850},[584,857,858],{"class":604},"sm-text-left w-1dot5",[584,860,503],{"class":850},[584,862,464],{"class":844},[584,864,865],{"class":604},"foo",[584,867,868],{"class":844},"\u003C/",[584,870,847],{"class":590},[584,872,873],{"class":844},">\n",[875,876,877],"style",{},"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);}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}",{"title":580,"searchDepth":601,"depth":601,"links":879},[880,881,882,883],{"id":316,"depth":601,"text":317},{"id":564,"depth":601,"text":565},{"id":684,"depth":601,"text":685},{"id":734,"depth":601,"text":102},"Replace escaped characters in class names and CSS selectors for better email client compatibility.","md",{},{"title":272,"description":884},{"loc":118},"docs/transformers/safe-class-names","0nmtmNYTl6A2oPlteX108amXuyMBruNXPY4LasDiGEE",{"id":4,"extension":5,"items":892,"meta":963,"stem":195,"__hash__":196},[893,903,908,917,930,948,954],{"name":8,"items":894},[895,896,897,898,899,900,901,902],{"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":904},[905,906,907],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":909},[910,911,912,913,914,915,916],{"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":918},[919,920,921,922,923,924,925,926,927,928,929],{"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":931},[932,933,934,935,936,937,938,939,940,941,942,943,944,945,946,947],{"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":949},[950,951,952,953],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":955},[956,957,958,959,960,961,962],{"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},{},1780318596395]