[{"data":1,"prerenderedAt":1999},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/transformers/inline-css":270,"docs-bottom-nav":1926},{"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":114,"body":272,"description":1919,"extension":1920,"meta":1921,"navigation":1812,"path":115,"seo":1922,"sitemap":1923,"stem":1924,"__hash__":1925},"docs/docs/transformers/inline-css.md",{"type":273,"value":274,"toc":1900},"minimark",[275,279,288,291,297,304,309,320,384,393,397,407,412,425,428,431,503,506,588,591,668,671,736,740,750,753,760,764,773,783,793,846,850,860,866,936,940,948,957,964,1016,1020,1028,1033,1097,1101,1110,1113,1116,1119,1181,1187,1191,1200,1203,1217,1289,1293,1301,1311,1320,1373,1377,1385,1392,1402,1411,1463,1467,1475,1483,1486,1491,1543,1559,1562,1566,1569,1584,1646,1650,1663,1719,1722,1741,1749,1752,1758,1772,1782,1897],[276,277,114],"h1",{"id":278},"inline-css",[280,281,282,283,287],"p",{},"Automatically inline CSS from ",[284,285,286],"code",{},"\u003Cstyle>"," tags in your HTML emails.",[280,289,290],{},"CSS inlining is still important in HTML email, mainly because of Outlook on Windows, which doesn't support multiple classes on elements.",[280,292,293,294,296],{},"It can also help preserve a decent layout in email clients that do not support embedded CSS (in ",[284,295,286],{}," tags), or when an email is forwarded.",[280,298,299,300,303],{},"The utility-first approach in Tailwind CSS works great with CSS inlining: utility classes are not 'global', so you won't end up with a ",[284,301,302],{},"font-family"," inlined on every element (unless you really, really want to).",[305,306,308],"h2",{"id":307},"usage","Usage",[280,310,311,312,315,316,319],{},"To enable CSS inlining, simply set ",[284,313,314],{},"css.inline"," to ",[284,317,318],{},"true"," in your config:",[321,322,328],"pre",{"className":323,"code":324,"filename":325,"language":326,"meta":327,"style":327},"language-js shiki shiki-themes tailwind-css tailwind-css","export default {\n  css: {\n    inline: true,\n  }\n}\n","config.js","js","",[284,329,330,346,358,372,378],{"__ignoreMap":327},[331,332,335,339,342],"span",{"class":333,"line":334},"line",1,[331,336,338],{"class":337},"sizJ4","export",[331,340,341],{"class":337}," default",[331,343,345],{"class":344},"sprQ5"," {\n",[331,347,349,353,356],{"class":333,"line":348},2,[331,350,352],{"class":351},"sfCc6","  css",[331,354,355],{"class":344},":",[331,357,345],{"class":344},[331,359,361,364,366,369],{"class":333,"line":360},3,[331,362,363],{"class":351},"    inline",[331,365,355],{"class":344},[331,367,368],{"class":337}," true",[331,370,371],{"class":344},",\n",[331,373,375],{"class":333,"line":374},4,[331,376,377],{"class":344},"  }\n",[331,379,381],{"class":333,"line":380},5,[331,382,383],{"class":344},"}\n",[385,386,387,388],"alert",{},"\nYou will want to keep CSS inlining off when developing ⚡\n",[389,390,392],"a",{"href":391},"/guides/amp-email","AMP4EMAIL templates",[305,394,396],{"id":395},"customization","Customization",[280,398,399,400,403,404,406],{},"If you need control over how your CSS is inlined, you may pass a configuration object to ",[284,401,402],{},"inlineCSS",". Doing this in your Environment ",[284,405,325],{}," will enable CSS inlining for all Templates when building for that Environment.",[408,409,411],"h3",{"id":410},"styletoattribute","styleToAttribute",[280,413,414,415,418,421,422],{},"Type: ",[284,416,417],{},"Object",[419,420],"br",{},"\nDefault: ",[284,423,424],{},"{}",[280,426,427],{},"Defines which CSS properties should be duplicated as what HTML attributes.",[280,429,430],{},"For example, this property-attribute assignment:",[321,432,434],{"className":323,"code":433,"filename":325,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      styleToAttribute: {\n        'background-color': 'bgcolor',\n      }\n    }\n  }\n}\n",[284,435,436,444,452,460,469,481,487,493,498],{"__ignoreMap":327},[331,437,438,440,442],{"class":333,"line":334},[331,439,338],{"class":337},[331,441,341],{"class":337},[331,443,345],{"class":344},[331,445,446,448,450],{"class":333,"line":348},[331,447,352],{"class":351},[331,449,355],{"class":344},[331,451,345],{"class":344},[331,453,454,456,458],{"class":333,"line":360},[331,455,363],{"class":351},[331,457,355],{"class":344},[331,459,345],{"class":344},[331,461,462,465,467],{"class":333,"line":374},[331,463,464],{"class":351},"      styleToAttribute",[331,466,355],{"class":344},[331,468,345],{"class":344},[331,470,471,474,476,479],{"class":333,"line":380},[331,472,473],{"class":351},"        'background-color'",[331,475,355],{"class":344},[331,477,478],{"class":351}," 'bgcolor'",[331,480,371],{"class":344},[331,482,484],{"class":333,"line":483},6,[331,485,486],{"class":344},"      }\n",[331,488,490],{"class":333,"line":489},7,[331,491,492],{"class":344},"    }\n",[331,494,496],{"class":333,"line":495},8,[331,497,377],{"class":344},[331,499,501],{"class":333,"line":500},9,[331,502,383],{"class":344},[280,504,505],{},"... will transform this:",[321,507,511],{"className":508,"code":509,"language":510,"meta":327,"style":327},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Ctable class=\"bg-slate-300\">\n  \u003Ctr>\n    \u003Ctd>...\u003C/td>\n  \u003C/tr>\n\u003C/table>\n","html",[284,512,513,540,550,571,580],{"__ignoreMap":327},[331,514,515,519,522,526,529,532,535,537],{"class":333,"line":334},[331,516,518],{"class":517},"soJEP","\u003C",[331,520,521],{"class":337},"table",[331,523,525],{"class":524},"sQMLp"," class",[331,527,528],{"class":517},"=",[331,530,531],{"class":524},"\"",[331,533,534],{"class":351},"bg-slate-300",[331,536,531],{"class":524},[331,538,539],{"class":517},">\n",[331,541,542,545,548],{"class":333,"line":348},[331,543,544],{"class":517},"  \u003C",[331,546,547],{"class":337},"tr",[331,549,539],{"class":517},[331,551,552,555,558,561,564,567,569],{"class":333,"line":360},[331,553,554],{"class":517},"    \u003C",[331,556,557],{"class":337},"td",[331,559,560],{"class":517},">",[331,562,563],{"class":351},"...",[331,565,566],{"class":517},"\u003C/",[331,568,557],{"class":337},[331,570,539],{"class":517},[331,572,573,576,578],{"class":333,"line":374},[331,574,575],{"class":517},"  \u003C/",[331,577,547],{"class":337},[331,579,539],{"class":517},[331,581,582,584,586],{"class":333,"line":380},[331,583,566],{"class":517},[331,585,521],{"class":337},[331,587,539],{"class":517},[280,589,590],{},"... into this:",[321,592,594],{"className":508,"code":593,"language":510,"meta":327,"style":327},"\u003Ctable bgcolor=\"#cbd5e1\" style=\"background-color: #cbd5e1\">\n  \u003Ctr>\n    \u003Ctd>...\u003C/td>\n  \u003C/tr>\n\u003C/table>\n",[284,595,596,628,636,652,660],{"__ignoreMap":327},[331,597,598,600,602,605,607,609,612,614,617,619,621,624,626],{"class":333,"line":334},[331,599,518],{"class":517},[331,601,521],{"class":337},[331,603,604],{"class":524}," bgcolor",[331,606,528],{"class":517},[331,608,531],{"class":524},[331,610,611],{"class":351},"#cbd5e1",[331,613,531],{"class":524},[331,615,616],{"class":524}," style",[331,618,528],{"class":517},[331,620,531],{"class":524},[331,622,623],{"class":351},"background-color: #cbd5e1",[331,625,531],{"class":524},[331,627,539],{"class":517},[331,629,630,632,634],{"class":333,"line":348},[331,631,544],{"class":517},[331,633,547],{"class":337},[331,635,539],{"class":517},[331,637,638,640,642,644,646,648,650],{"class":333,"line":360},[331,639,554],{"class":517},[331,641,557],{"class":337},[331,643,560],{"class":517},[331,645,563],{"class":351},[331,647,566],{"class":517},[331,649,557],{"class":337},[331,651,539],{"class":517},[331,653,654,656,658],{"class":333,"line":374},[331,655,575],{"class":517},[331,657,547],{"class":337},[331,659,539],{"class":517},[331,661,662,664,666],{"class":333,"line":380},[331,663,566],{"class":517},[331,665,521],{"class":337},[331,667,539],{"class":517},[280,669,670],{},"The available mappings are:",[521,672,673,685],{},[674,675,676],"thead",{},[547,677,678,682],{},[679,680,681],"th",{},"CSS Property",[679,683,684],{},"HTML Attribute",[686,687,688,700,712,724],"tbody",{},[547,689,690,695],{},[557,691,692],{},[284,693,694],{},"background-color",[557,696,697],{},[284,698,699],{},"bgcolor",[547,701,702,707],{},[557,703,704],{},[284,705,706],{},"background-image",[557,708,709],{},[284,710,711],{},"background",[547,713,714,719],{},[557,715,716],{},[284,717,718],{},"text-align",[557,720,721],{},[284,722,723],{},"align",[547,725,726,731],{},[557,727,728],{},[284,729,730],{},"vertical-align",[557,732,733],{},[284,734,735],{},"valign",[408,737,739],{"id":738},"attributetostyle","attributeToStyle",[280,741,414,742,745,421,747],{},[284,743,744],{},"Boolean|String[]",[419,746],{},[284,748,749],{},"undefined",[280,751,752],{},"Duplicates specified HTML attributes as inline CSS.",[280,754,755,756,759],{},"See the documentation ",[389,757,758],{"href":127},"here",".",[408,761,763],{"id":762},"applywidthattributes","applyWidthAttributes",[280,765,414,766,769,421,771],{},[284,767,768],{},"Boolean",[419,770],{},[284,772,318],{},[280,774,775,776,779,780,759],{},"Whether to use any CSS pixel widths to create ",[284,777,778],{},"width"," attributes on elements set in ",[284,781,782],{},"css.inline.widthElements",[280,784,785,786,789,790,792],{},"Set it to ",[284,787,788],{},"false"," to prevent any ",[284,791,778],{}," attributes from being added based on inline CSS width:",[321,794,796],{"className":323,"code":795,"filename":325,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      applyWidthAttributes: false,\n    }\n  }\n}\n",[284,797,798,806,814,822,834,838,842],{"__ignoreMap":327},[331,799,800,802,804],{"class":333,"line":334},[331,801,338],{"class":337},[331,803,341],{"class":337},[331,805,345],{"class":344},[331,807,808,810,812],{"class":333,"line":348},[331,809,352],{"class":351},[331,811,355],{"class":344},[331,813,345],{"class":344},[331,815,816,818,820],{"class":333,"line":360},[331,817,363],{"class":351},[331,819,355],{"class":344},[331,821,345],{"class":344},[331,823,824,827,829,832],{"class":333,"line":374},[331,825,826],{"class":351},"      applyWidthAttributes",[331,828,355],{"class":344},[331,830,831],{"class":337}," false",[331,833,371],{"class":344},[331,835,836],{"class":333,"line":380},[331,837,492],{"class":344},[331,839,840],{"class":333,"line":483},[331,841,377],{"class":344},[331,843,844],{"class":333,"line":489},[331,845,383],{"class":344},[408,847,849],{"id":848},"widthelements","widthElements",[280,851,414,852,855,421,857],{},[284,853,854],{},"String[]",[419,856],{},[284,858,859],{},"['img', 'video']",[280,861,862,863,865],{},"Array of HTML elements that can receive ",[284,864,778],{}," attributes based on inline CSS width.",[321,867,869],{"className":323,"code":868,"filename":325,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      widthElements: ['table', 'td', 'th'],\n    }\n  }\n}\n",[284,870,871,879,887,895,924,928,932],{"__ignoreMap":327},[331,872,873,875,877],{"class":333,"line":334},[331,874,338],{"class":337},[331,876,341],{"class":337},[331,878,345],{"class":344},[331,880,881,883,885],{"class":333,"line":348},[331,882,352],{"class":351},[331,884,355],{"class":344},[331,886,345],{"class":344},[331,888,889,891,893],{"class":333,"line":360},[331,890,363],{"class":351},[331,892,355],{"class":344},[331,894,345],{"class":344},[331,896,897,900,902,905,908,911,914,916,919,922],{"class":333,"line":374},[331,898,899],{"class":351},"      widthElements",[331,901,355],{"class":344},[331,903,904],{"class":351}," [",[331,906,907],{"class":351},"'table'",[331,909,910],{"class":344},",",[331,912,913],{"class":351}," 'td'",[331,915,910],{"class":344},[331,917,918],{"class":351}," 'th'",[331,920,921],{"class":351},"]",[331,923,371],{"class":344},[331,925,926],{"class":333,"line":380},[331,927,492],{"class":344},[331,929,930],{"class":333,"line":483},[331,931,377],{"class":344},[331,933,934],{"class":333,"line":489},[331,935,383],{"class":344},[408,937,939],{"id":938},"applyheightattributes","applyHeightAttributes",[280,941,414,942,944,421,946],{},[284,943,768],{},[419,945],{},[284,947,318],{},[280,949,950,951,779,954,759],{},"Whether to use any CSS pixel heights to create ",[284,952,953],{},"height",[284,955,956],{},"css.inline.heightElements",[280,958,785,959,789,961,963],{},[284,960,788],{},[284,962,953],{}," attributes from being added based on inline CSS height:",[321,965,967],{"className":323,"code":966,"filename":325,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      applyHeightAttributes: false,\n    }\n  }\n}\n",[284,968,969,977,985,993,1004,1008,1012],{"__ignoreMap":327},[331,970,971,973,975],{"class":333,"line":334},[331,972,338],{"class":337},[331,974,341],{"class":337},[331,976,345],{"class":344},[331,978,979,981,983],{"class":333,"line":348},[331,980,352],{"class":351},[331,982,355],{"class":344},[331,984,345],{"class":344},[331,986,987,989,991],{"class":333,"line":360},[331,988,363],{"class":351},[331,990,355],{"class":344},[331,992,345],{"class":344},[331,994,995,998,1000,1002],{"class":333,"line":374},[331,996,997],{"class":351},"      applyHeightAttributes",[331,999,355],{"class":344},[331,1001,831],{"class":337},[331,1003,371],{"class":344},[331,1005,1006],{"class":333,"line":380},[331,1007,492],{"class":344},[331,1009,1010],{"class":333,"line":483},[331,1011,377],{"class":344},[331,1013,1014],{"class":333,"line":489},[331,1015,383],{"class":344},[408,1017,1019],{"id":1018},"heightelements","heightElements",[280,1021,414,1022,1024,421,1026],{},[284,1023,854],{},[419,1025],{},[284,1027,859],{},[280,1029,862,1030,1032],{},[284,1031,953],{}," attributes based on inline CSS height.",[321,1034,1036],{"className":323,"code":1035,"filename":325,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      heightElements: ['table', 'td', 'th'],\n    }\n  }\n}\n",[284,1037,1038,1046,1054,1062,1085,1089,1093],{"__ignoreMap":327},[331,1039,1040,1042,1044],{"class":333,"line":334},[331,1041,338],{"class":337},[331,1043,341],{"class":337},[331,1045,345],{"class":344},[331,1047,1048,1050,1052],{"class":333,"line":348},[331,1049,352],{"class":351},[331,1051,355],{"class":344},[331,1053,345],{"class":344},[331,1055,1056,1058,1060],{"class":333,"line":360},[331,1057,363],{"class":351},[331,1059,355],{"class":344},[331,1061,345],{"class":344},[331,1063,1064,1067,1069,1071,1073,1075,1077,1079,1081,1083],{"class":333,"line":374},[331,1065,1066],{"class":351},"      heightElements",[331,1068,355],{"class":344},[331,1070,904],{"class":351},[331,1072,907],{"class":351},[331,1074,910],{"class":344},[331,1076,913],{"class":351},[331,1078,910],{"class":344},[331,1080,918],{"class":351},[331,1082,921],{"class":351},[331,1084,371],{"class":344},[331,1086,1087],{"class":333,"line":380},[331,1088,492],{"class":344},[331,1090,1091],{"class":333,"line":483},[331,1092,377],{"class":344},[331,1094,1095],{"class":333,"line":489},[331,1096,383],{"class":344},[408,1098,1100],{"id":1099},"excludedproperties","excludedProperties",[280,1102,414,1103,1105,421,1107],{},[284,1104,854],{},[419,1106],{},[284,1108,1109],{},"[]",[280,1111,1112],{},"Array of CSS property names that should be excluded from the CSS inlining process.",[280,1114,1115],{},"Names are considered unique, so you will need to specify each one you'd like to exclude.",[280,1117,1118],{},"For example:",[321,1120,1122],{"className":323,"code":1121,"filename":325,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      excludedProperties: ['padding', 'padding-left'],\n    }\n  }\n}\n",[284,1123,1124,1132,1140,1148,1169,1173,1177],{"__ignoreMap":327},[331,1125,1126,1128,1130],{"class":333,"line":334},[331,1127,338],{"class":337},[331,1129,341],{"class":337},[331,1131,345],{"class":344},[331,1133,1134,1136,1138],{"class":333,"line":348},[331,1135,352],{"class":351},[331,1137,355],{"class":344},[331,1139,345],{"class":344},[331,1141,1142,1144,1146],{"class":333,"line":360},[331,1143,363],{"class":351},[331,1145,355],{"class":344},[331,1147,345],{"class":344},[331,1149,1150,1153,1155,1157,1160,1162,1165,1167],{"class":333,"line":374},[331,1151,1152],{"class":351},"      excludedProperties",[331,1154,355],{"class":344},[331,1156,904],{"class":351},[331,1158,1159],{"class":351},"'padding'",[331,1161,910],{"class":344},[331,1163,1164],{"class":351}," 'padding-left'",[331,1166,921],{"class":351},[331,1168,371],{"class":344},[331,1170,1171],{"class":333,"line":380},[331,1172,492],{"class":344},[331,1174,1175],{"class":333,"line":483},[331,1176,377],{"class":344},[331,1178,1179],{"class":333,"line":489},[331,1180,383],{"class":344},[385,1182,1183,1186],{},[284,1184,1185],{},"--tw-shadow","\n is automatically excluded from the properties that can be inlined.\n",[408,1188,1190],{"id":1189},"codeblocks","codeBlocks",[280,1192,414,1193,1195,421,1197],{},[284,1194,417],{},[419,1196],{},[284,1198,1199],{},"{ EJS: {}, HBS: {} }",[280,1201,1202],{},"An object where each value has a start and end to specify fenced code blocks that should be ignored during CSS inlining.",[280,1204,1205,1206,1211,1212,1216],{},"By default, ",[1207,1208,1210],"abbr",{"title":1209},"Embedded JavaScript Templates","EJS"," and ",[1207,1213,1215],{"title":1214},"Handlebars","HBS"," code blocks are ignored:",[321,1218,1220],{"className":323,"code":1219,"language":326,"meta":327,"style":327},"{\n  EJS: { start: '\u003C%', end: '%>' },\n  HBS: { start: '{{', end: '}}' },\n}\n",[284,1221,1222,1227,1258,1285],{"__ignoreMap":327},[331,1223,1224],{"class":333,"line":334},[331,1225,1226],{"class":344},"{\n",[331,1228,1229,1232,1234,1237,1240,1242,1245,1247,1250,1252,1255],{"class":333,"line":348},[331,1230,1231],{"class":337},"  EJS",[331,1233,355],{"class":344},[331,1235,1236],{"class":344}," {",[331,1238,1239],{"class":337}," start",[331,1241,355],{"class":344},[331,1243,1244],{"class":351}," '\u003C%'",[331,1246,910],{"class":344},[331,1248,1249],{"class":337}," end",[331,1251,355],{"class":344},[331,1253,1254],{"class":351}," '%>'",[331,1256,1257],{"class":344}," },\n",[331,1259,1260,1263,1265,1267,1269,1271,1274,1276,1278,1280,1283],{"class":333,"line":360},[331,1261,1262],{"class":337},"  HBS",[331,1264,355],{"class":344},[331,1266,1236],{"class":344},[331,1268,1239],{"class":337},[331,1270,355],{"class":344},[331,1272,1273],{"class":351}," '{{'",[331,1275,910],{"class":344},[331,1277,1249],{"class":337},[331,1279,355],{"class":344},[331,1281,1282],{"class":351}," '}}'",[331,1284,1257],{"class":344},[331,1286,1287],{"class":333,"line":374},[331,1288,383],{"class":344},[408,1290,1292],{"id":1291},"removeinlinedselectors","removeInlinedSelectors",[280,1294,414,1295,1297,421,1299],{},[284,1296,768],{},[419,1298],{},[284,1300,318],{},[280,1302,1303,1304,1306,1307,1310],{},"When ",[284,1305,314],{}," is enabled, classes will be removed from the ",[284,1308,1309],{},"class"," attribute of a tag after they have been successfully inlined.",[280,1312,1313,1314,1316,1317,1319],{},"Set this option to ",[284,1315,788],{}," to preserve the classes in the ",[284,1318,1309],{}," attribute.",[321,1321,1324],{"className":323,"code":1322,"filename":1323,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      removeInlinedSelectors: false,\n    }\n  }\n}\n","config.production.js",[284,1325,1326,1334,1342,1350,1361,1365,1369],{"__ignoreMap":327},[331,1327,1328,1330,1332],{"class":333,"line":334},[331,1329,338],{"class":337},[331,1331,341],{"class":337},[331,1333,345],{"class":344},[331,1335,1336,1338,1340],{"class":333,"line":348},[331,1337,352],{"class":351},[331,1339,355],{"class":344},[331,1341,345],{"class":344},[331,1343,1344,1346,1348],{"class":333,"line":360},[331,1345,363],{"class":351},[331,1347,355],{"class":344},[331,1349,345],{"class":344},[331,1351,1352,1355,1357,1359],{"class":333,"line":374},[331,1353,1354],{"class":351},"      removeInlinedSelectors",[331,1356,355],{"class":344},[331,1358,831],{"class":337},[331,1360,371],{"class":344},[331,1362,1363],{"class":333,"line":380},[331,1364,492],{"class":344},[331,1366,1367],{"class":333,"line":483},[331,1368,377],{"class":344},[331,1370,1371],{"class":333,"line":489},[331,1372,383],{"class":344},[408,1374,1376],{"id":1375},"preferunitlessvalues","preferUnitlessValues",[280,1378,414,1379,1381,421,1383],{},[284,1380,768],{},[419,1382],{},[284,1384,318],{},[280,1386,1387,1388,1391],{},"When inlining CSS, ",[284,1389,1390],{},"0"," values will be inlined without units.",[280,1393,1394,1395,1398,1399,759],{},"For example, ",[284,1396,1397],{},"margin: 0px"," will be inlined as ",[284,1400,1401],{},"margin: 0",[280,1403,1404,1405,1407,1408,1410],{},"Set this to ",[284,1406,788],{}," to keep units on ",[284,1409,1390],{}," values.",[321,1412,1414],{"className":323,"code":1413,"filename":325,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      preferUnitlessValues: false,\n    }\n  }\n}\n",[284,1415,1416,1424,1432,1440,1451,1455,1459],{"__ignoreMap":327},[331,1417,1418,1420,1422],{"class":333,"line":334},[331,1419,338],{"class":337},[331,1421,341],{"class":337},[331,1423,345],{"class":344},[331,1425,1426,1428,1430],{"class":333,"line":348},[331,1427,352],{"class":351},[331,1429,355],{"class":344},[331,1431,345],{"class":344},[331,1433,1434,1436,1438],{"class":333,"line":360},[331,1435,363],{"class":351},[331,1437,355],{"class":344},[331,1439,345],{"class":344},[331,1441,1442,1445,1447,1449],{"class":333,"line":374},[331,1443,1444],{"class":351},"      preferUnitlessValues",[331,1446,355],{"class":344},[331,1448,831],{"class":337},[331,1450,371],{"class":344},[331,1452,1453],{"class":333,"line":380},[331,1454,492],{"class":344},[331,1456,1457],{"class":333,"line":483},[331,1458,377],{"class":344},[331,1460,1461],{"class":333,"line":489},[331,1462,383],{"class":344},[408,1464,1466],{"id":1465},"useattributesizes","useAttributeSizes",[280,1468,414,1469,1471,421,1473],{},[284,1470,768],{},[419,1472],{},[284,1474,749],{},[280,1476,1477,1478,1211,1480,1482],{},"Prefer HTML ",[284,1479,778],{},[284,1481,953],{}," attributes over inline CSS.",[280,1484,1485],{},"Useful for retina images in Outlook on Windows, which doesn't respect CSS sizes and will render the image in its natural size.",[280,1487,1404,1488,1490],{},[284,1489,318],{}," to use HTML attributes for sizes instead of inline CSS:",[321,1492,1494],{"className":323,"code":1493,"filename":325,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      useAttributeSizes: true,\n    }\n  }\n}\n",[284,1495,1496,1504,1512,1520,1531,1535,1539],{"__ignoreMap":327},[331,1497,1498,1500,1502],{"class":333,"line":334},[331,1499,338],{"class":337},[331,1501,341],{"class":337},[331,1503,345],{"class":344},[331,1505,1506,1508,1510],{"class":333,"line":348},[331,1507,352],{"class":351},[331,1509,355],{"class":344},[331,1511,345],{"class":344},[331,1513,1514,1516,1518],{"class":333,"line":360},[331,1515,363],{"class":351},[331,1517,355],{"class":344},[331,1519,345],{"class":344},[331,1521,1522,1525,1527,1529],{"class":333,"line":374},[331,1523,1524],{"class":351},"      useAttributeSizes",[331,1526,355],{"class":344},[331,1528,368],{"class":337},[331,1530,371],{"class":344},[331,1532,1533],{"class":333,"line":380},[331,1534,492],{"class":344},[331,1536,1537],{"class":333,"line":483},[331,1538,377],{"class":344},[331,1540,1541],{"class":333,"line":489},[331,1542,383],{"class":344},[385,1544,1545,1547,1548,1553,1554],{},[284,1546,1466],{},"\n will apply to all elements defined in \n",[389,1549,1551],{"href":1550},"/docs/transformers/inline-css#widthelements",[284,1552,849],{},"\n and \n",[389,1555,1557],{"href":1556},"/docs/transformers/inline-css#heightelements",[284,1558,1019],{},[408,1560,1561],{"id":1561},"safelist",[280,1563,414,1564],{},[284,1565,854],{},[280,1567,1568],{},"An array of strings representing CSS selectors that should not be removed after inlining.",[280,1570,1571,1572,1575,1576,1579,1580,1583],{},"These can be substring matches, so you can use ",[284,1573,1574],{},"text-red"," to preserve ",[284,1577,1578],{},".text-red",", ",[284,1581,1582],{},".text-red-500",", etc.",[321,1585,1587],{"className":323,"code":1586,"filename":325,"language":326,"meta":327,"style":327},"export default {\n  css: {\n    inline: {\n      safelist: ['text-red', '.bg-blue-500'],\n    }\n  }\n}\n",[284,1588,1589,1597,1605,1613,1634,1638,1642],{"__ignoreMap":327},[331,1590,1591,1593,1595],{"class":333,"line":334},[331,1592,338],{"class":337},[331,1594,341],{"class":337},[331,1596,345],{"class":344},[331,1598,1599,1601,1603],{"class":333,"line":348},[331,1600,352],{"class":351},[331,1602,355],{"class":344},[331,1604,345],{"class":344},[331,1606,1607,1609,1611],{"class":333,"line":360},[331,1608,363],{"class":351},[331,1610,355],{"class":344},[331,1612,345],{"class":344},[331,1614,1615,1618,1620,1622,1625,1627,1630,1632],{"class":333,"line":374},[331,1616,1617],{"class":351},"      safelist",[331,1619,355],{"class":344},[331,1621,904],{"class":351},[331,1623,1624],{"class":351},"'text-red'",[331,1626,910],{"class":344},[331,1628,1629],{"class":351}," '.bg-blue-500'",[331,1631,921],{"class":351},[331,1633,371],{"class":344},[331,1635,1636],{"class":333,"line":380},[331,1637,492],{"class":344},[331,1639,1640],{"class":333,"line":483},[331,1641,377],{"class":344},[331,1643,1644],{"class":333,"line":489},[331,1645,383],{"class":344},[305,1647,1649],{"id":1648},"prevent-inlining","Prevent inlining",[280,1651,1652,1653,1655,1656,1662],{},"You may add an attribute on a ",[284,1654,286],{}," tag to prevent Juice from inlining the CSS inside it. Useful for writing email client CSS hacks, or for preserving CSS comments when using the ",[389,1657,1659],{"href":1658},"/docs/transformers/purge-css#removecsscomments",[284,1660,1661],{},"removeCSSComments: false"," Cleanup option.",[321,1664,1666],{"className":508,"code":1665,"language":510,"meta":327,"style":327},"\u003Cstyle data-embed>\n  /* This CSS will not be inlined */\n  .text-red { color: red; }\n\u003C/style>\n",[284,1667,1668,1680,1686,1711],{"__ignoreMap":327},[331,1669,1670,1672,1675,1678],{"class":333,"line":334},[331,1671,518],{"class":517},[331,1673,1674],{"class":337},"style",[331,1676,1677],{"class":524}," data-embed",[331,1679,539],{"class":517},[331,1681,1682],{"class":333,"line":348},[331,1683,1685],{"class":1684},"smVoC","  /* This CSS will not be inlined */\n",[331,1687,1688,1691,1694,1698,1702,1706,1709],{"class":333,"line":360},[331,1689,1690],{"class":337},"  .text-red",[331,1692,1236],{"class":1693},"shy1k",[331,1695,1697],{"class":1696},"sO1gY"," color",[331,1699,1701],{"class":1700},"sO3Gh",": ",[331,1703,1705],{"class":1704},"snKqK","red",[331,1707,1708],{"class":1700},"; ",[331,1710,383],{"class":1693},[331,1712,1713,1715,1717],{"class":333,"line":374},[331,1714,566],{"class":517},[331,1716,1674],{"class":337},[331,1718,539],{"class":517},[280,1720,1721],{},"Maizzle supports the following attributes for this purpose:",[1723,1724,1725,1731,1736],"ul",{},[1726,1727,1728],"li",{},[284,1729,1730],{},"data-embed",[1726,1732,1733],{},[284,1734,1735],{},"no-inline",[1726,1737,1738],{},[284,1739,1740],{},"embed",[385,1742,1743,1744,1748],{},"\nCSS selectors that don't appear in your markup will still need to be \n",[389,1745,1747],{"href":1746},"/docs/transformers/purge-css#whitelist","whitelisted for purging","\n.\n",[305,1750,102],{"id":1751},"api",[280,1753,1754,1755,1757],{},"You can use the ",[284,1756,402],{}," function to inline CSS in a string of HTML.",[280,1759,1760,1761,1763,1764,1767,1768,1771],{},"Your HTML string will need to have at least one ",[284,1762,286],{}," tag in the ",[284,1765,1766],{},"\u003Chead>",".\nAlternatively, you may pass your own CSS to inline through the ",[284,1769,1770],{},"customCSS"," option.",[280,1773,1774,1775,1781],{},"Additionally, you may configure the ",[389,1776,1780],{"href":1777,"rel":1778},"https://www.npmjs.com/package/juice",[1779],"nofollow","Juice"," library by passing options in the same object.",[321,1783,1786],{"className":323,"code":1784,"filename":1785,"language":326,"meta":327,"style":327},"import { inlineCSS } from '@maizzle/framework'\n\nconst config = {\n  customCSS: 'body { background-color: #f8f9fa; }',\n  excludedProperties: ['padding', 'padding-left'] // Juice option\n}\n\nconst html = await inlineCSS('html string', config)\n","app.js",[284,1787,1788,1808,1814,1827,1839,1860,1864,1868],{"__ignoreMap":327},[331,1789,1790,1794,1796,1799,1802,1805],{"class":333,"line":334},[331,1791,1793],{"class":1792},"s8qYB","import",[331,1795,1236],{"class":344},[331,1797,1798],{"class":1696}," inlineCSS",[331,1800,1801],{"class":344}," }",[331,1803,1804],{"class":344}," from",[331,1806,1807],{"class":1792}," '@maizzle/framework'\n",[331,1809,1810],{"class":333,"line":348},[331,1811,1813],{"emptyLinePlaceholder":1812},true,"\n",[331,1815,1816,1819,1822,1825],{"class":333,"line":360},[331,1817,1818],{"class":1792},"const",[331,1820,1821],{"class":351}," config ",[331,1823,528],{"class":1824},"sVevU",[331,1826,345],{"class":344},[331,1828,1829,1832,1834,1837],{"class":333,"line":374},[331,1830,1831],{"class":351},"  customCSS",[331,1833,355],{"class":344},[331,1835,1836],{"class":351}," 'body { background-color: #f8f9fa; }'",[331,1838,371],{"class":344},[331,1840,1841,1844,1846,1848,1850,1852,1854,1857],{"class":333,"line":380},[331,1842,1843],{"class":351},"  excludedProperties",[331,1845,355],{"class":344},[331,1847,904],{"class":351},[331,1849,1159],{"class":351},[331,1851,910],{"class":344},[331,1853,1164],{"class":351},[331,1855,1856],{"class":351},"] ",[331,1858,1859],{"class":1684},"// Juice option\n",[331,1861,1862],{"class":333,"line":483},[331,1863,383],{"class":344},[331,1865,1866],{"class":333,"line":489},[331,1867,1813],{"emptyLinePlaceholder":1812},[331,1869,1870,1872,1875,1877,1880,1883,1886,1889,1891,1894],{"class":333,"line":495},[331,1871,1818],{"class":1792},[331,1873,1874],{"class":351}," html ",[331,1876,528],{"class":1824},[331,1878,1879],{"class":337}," await",[331,1881,1798],{"class":1882},"s2ImL",[331,1884,1885],{"class":351},"(",[331,1887,1888],{"class":351},"'html string'",[331,1890,910],{"class":344},[331,1892,1893],{"class":1792}," config",[331,1895,1896],{"class":351},")\n",[1674,1898,1899],{},"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 .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}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 .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}html pre.shiki code .snKqK, html code.shiki .snKqK{--shiki-light:#324258;--shiki-dark:#324258}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}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}",{"title":327,"searchDepth":348,"depth":348,"links":1901},[1902,1903,1917,1918],{"id":307,"depth":348,"text":308},{"id":395,"depth":348,"text":396,"children":1904},[1905,1906,1907,1908,1909,1910,1911,1912,1913,1914,1915,1916],{"id":410,"depth":360,"text":411},{"id":738,"depth":360,"text":739},{"id":762,"depth":360,"text":763},{"id":848,"depth":360,"text":849},{"id":938,"depth":360,"text":939},{"id":1018,"depth":360,"text":1019},{"id":1099,"depth":360,"text":1100},{"id":1189,"depth":360,"text":1190},{"id":1291,"depth":360,"text":1292},{"id":1375,"depth":360,"text":1376},{"id":1465,"depth":360,"text":1466},{"id":1561,"depth":360,"text":1561},{"id":1648,"depth":348,"text":1649},{"id":1751,"depth":348,"text":102},"Inline CSS in your HTML emails for better email client compatibility.","md",{},{"title":114,"description":1919},{"loc":115},"docs/transformers/inline-css","XHKp9ZFUuMO184UI6j800J-WBC0IxO5EjnX4oz3i2wU",{"id":4,"extension":5,"items":1927,"meta":1998,"stem":195,"__hash__":196},[1928,1938,1943,1952,1965,1983,1989],{"name":8,"items":1929},[1930,1931,1932,1933,1934,1935,1936,1937],{"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":1939},[1940,1941,1942],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":1944},[1945,1946,1947,1948,1949,1950,1951],{"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":1953},[1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964],{"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":1966},[1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982],{"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":1984},[1985,1986,1987,1988],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":1990},[1991,1992,1993,1994,1995,1996,1997],{"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},{},1780318595276]