@samva/markup 0.16.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/AGENTS.md +42 -40
  2. package/CHANGELOG.md +72 -0
  3. package/README.md +10 -9
  4. package/dist/{brand-jFV6YtSV.d.ts → assets-CS5Xa_mr.d.ts} +41 -3
  5. package/dist/{brand-Ci05p37c.js → brand-CIiEqkU7.js} +64 -3
  6. package/dist/{brand-plugin-CHhcei-j.d.ts → brand-plugin-Dj9SMpfS.d.ts} +3 -1
  7. package/dist/brand.d.ts +2 -3
  8. package/dist/brand.js +3 -4
  9. package/dist/compatibility.d.ts +76 -0
  10. package/dist/compatibility.js +807 -0
  11. package/dist/compiled-template-Bc4Dq9zy.d.ts +268 -0
  12. package/dist/compiler.d.ts +59 -193
  13. package/dist/compiler.js +473 -775
  14. package/dist/{components-3XHjYD3i.js → components-C5850-Qg.js} +37 -29
  15. package/dist/css-B_aVKrDo.js +436 -0
  16. package/dist/css-color-DLM12Osu.js +315 -0
  17. package/dist/{diagnostic-codes-8XDLR9ef.js → diagnostic-codes-DZKb0Xcg.js} +40 -1
  18. package/dist/{diagnostics-CUYlQ_6x.d.ts → diagnostics-D4vSLQrO.d.ts} +1 -10
  19. package/dist/diagnostics.d.ts +6 -2
  20. package/dist/diagnostics.js +3 -4
  21. package/dist/edit.d.ts +10 -9
  22. package/dist/edit.js +12 -11
  23. package/dist/email/jsx-dev-runtime.d.ts +1 -1
  24. package/dist/email/jsx-dev-runtime.js +1 -1
  25. package/dist/email/jsx-runtime.d.ts +2 -2
  26. package/dist/email/jsx-runtime.js +2 -2
  27. package/dist/email.d.ts +1 -1
  28. package/dist/email.js +1 -1
  29. package/dist/html-DJUK2YJF.js +483 -0
  30. package/dist/index.d.ts +1 -1
  31. package/dist/{jsx-runtime-DC7xG0aA.d.ts → jsx-runtime-DL8NVF1f.d.ts} +12 -6
  32. package/dist/{jsx-runtime-CBlexoeR.js → jsx-runtime-qL19u3Fy.js} +17 -10
  33. package/dist/preview-rNoJBEIY.d.ts +104 -0
  34. package/dist/{profile-BsY4dkan.js → profile-JTvgCD6X.js} +714 -29
  35. package/dist/{html-BvRFepeO.js → render-template-DwPDm3Hq.js} +155 -572
  36. package/dist/render.d.ts +40 -28
  37. package/dist/render.js +3 -47
  38. package/dist/selectors-CYWCoxZr.js +157 -0
  39. package/dist/sms.d.ts +1 -1
  40. package/dist/sms.js +1 -1
  41. package/dist/{template-B-UDXK8a.d.ts → template-DmNcoH4Q.d.ts} +2 -9
  42. package/dist/{theme-css-s9QwD5Ko.js → theme-css-P9F5S7Ic.js} +3 -316
  43. package/dist/whatsapp.d.ts +1 -1
  44. package/dist/whatsapp.js +1 -1
  45. package/generated/contract.json +7 -2
  46. package/generated/reference.md +3 -2
  47. package/package.json +5 -5
  48. package/skills/sml/SKILL.md +2 -2
  49. package/dist/assets-BSpgZOSR.js +0 -61
  50. package/dist/assets-BSuNT9gr.d.ts +0 -39
  51. package/dist/brand-footer-ClRtWnIc.d.ts +0 -40
  52. package/dist/brand-footer-DXVGsKE5.js +0 -746
  53. package/dist/brand-sample.d.ts +0 -4
  54. package/dist/brand-sample.js +0 -2
  55. package/dist/cascade-DoLWZ66g.js +0 -701
  56. package/dist/diagnostic-model-DJtqbETd.js +0 -36
  57. package/dist/ir-KJLFW08u.js +0 -5
  58. package/dist/render-CVnXZMyK.js +0 -258
  59. package/dist/render-CuZej25A.d.ts +0 -564
  60. package/dist/theme-imports-u_P0ygvQ.js +0 -102
package/dist/compiler.js CHANGED
@@ -1,777 +1,260 @@
1
+ import { n as isObject } from "./guards-eV1qLbf2.js";
1
2
  import { n as TEMPLATE_NAME_PATTERN } from "./template-zLUjcwfF.js";
2
- import { D as samvaBrandPlugin, T as parseBrandSpecifier, _ as renderIr, w as brandSpecifierPattern } from "./html-BvRFepeO.js";
3
- import { d as downlevelColors, f as formatColor, l as parseBrandCss, p as parseColor, u as printBrandCss } from "./theme-css-s9QwD5Ko.js";
4
- import { a as finalizeValue, c as resolveVariables, i as downlevelMediaQuery, l as classListOf, n as applyStylesheet, o as foldCalc, s as renderHeadCss, u as matchesSelector } from "./cascade-DoLWZ66g.js";
5
- import { a as discoverClassCandidates, c as parseStylesheet, i as compileTailwind, n as renderBrandSample, o as TAILWIND_VERSION, r as BASE_STYLESHEET_CSS, s as compileSelector, t as renderBrandFooter } from "./brand-footer-DXVGsKE5.js";
6
- import { i as lineColumn, t as buildLineMap } from "./diagnostic-model-DJtqbETd.js";
7
- import { n as resolveFromDirectory, r as resolveThemeImports, t as projectDirectory } from "./theme-imports-u_P0ygvQ.js";
8
- import { a as isAssetPath, i as checkAssetBase, n as assetEntry, r as assetUrl } from "./assets-BSpgZOSR.js";
9
- import { t as BRAND_COMPONENT_CLASSES } from "./brand-Ci05p37c.js";
10
- import { t as EmailCompileError } from "./diagnostics-C0Tr8-eQ.js";
11
- import { a as lowerProject, i as completed, l as Findings, n as introducedProfileErrors, r as loadProject, t as checkStaticProfile } from "./profile-BsY4dkan.js";
12
- import { caniemail, parseHtml, rawData } from "caniemail";
13
- import { generate, parse, walk } from "css-tree";
14
- //#region src/email/compatibility-assessment.ts
15
- const VERIFIED_VALUES = /^(?:left|right|center|justify)$/i;
16
- const SIMPLE_COLOR = /^(?:#[\da-f]{3,8}|rgba?\([^()]+\)|transparent|white|black)$/i;
3
+ import { o as serializeEmailHtml } from "./html-DJUK2YJF.js";
4
+ import { f as samvaBrandPlugin, l as brandSpecifierPattern, n as render, s as emailElement, t as RenderError, u as parseBrandSpecifier } from "./render-template-DwPDm3Hq.js";
5
+ import { r as collectEmailDiagnostics } from "./jsx-runtime-qL19u3Fy.js";
6
+ import { m as PRIMITIVE_CSS } from "./components-C5850-Qg.js";
7
+ import { c as checkAssetBase, l as isAssetPath, n as brandComponents, o as assetEntry, s as assetUrl, t as BRAND_COMPONENT_CLASSES } from "./brand-CIiEqkU7.js";
8
+ import { r as hasBlockingDiagnostic, t as EmailCompileError } from "./diagnostics-C0Tr8-eQ.js";
9
+ import { i as buildLineMap, s as lineColumn } from "./diagnostic-codes-DZKb0Xcg.js";
10
+ import { r as isDarkSchemeQuery, t as DARK_SCHEME_MEDIA } from "./dark-scheme-CbCwGDWH.js";
11
+ import { c as foregroundDefaults, l as parseBrandCss, n as DEFAULT_THEME_CSS, u as printBrandCss } from "./theme-css-P9F5S7Ic.js";
12
+ import { t as parseStylesheet } from "./css-B_aVKrDo.js";
13
+ import { a as lowerProject, d as Findings, f as projectDirectory, i as completed, m as resolveThemeImports, n as introducedErrors, o as applyStylesheet, p as resolveFromDirectory, r as loadProject, s as renderDarkRules, t as checkTemplate } from "./profile-JTvgCD6X.js";
14
+ import { parse } from "css-tree";
15
+ import { parse as parse$1 } from "@babel/parser";
16
+ import { compile } from "tailwindcss";
17
+ //#region src/email/tailwind-stylesheets.gen.ts
18
+ /** The exact Tailwind release the compiler runs, recorded in every build manifest. */
19
+ const TAILWIND_VERSION = "4.3.3";
20
+ //#endregion
21
+ //#region src/email/tailwind.ts
22
+ const STYLESHEETS = {
23
+ tailwindcss: `@layer theme, base, components, utilities;\n@import "tailwindcss/theme.css" layer(theme);\n@import "tailwindcss/utilities.css" layer(utilities);`,
24
+ "tailwindcss/theme.css": "@theme default {\n --font-sans:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial,\n sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;\n --font-mono:\n ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',\n monospace;\n\n --color-red-50: oklch(97.1% 0.013 17.38);\n --color-red-100: oklch(93.6% 0.032 17.717);\n --color-red-200: oklch(88.5% 0.062 18.334);\n --color-red-300: oklch(80.8% 0.114 19.571);\n --color-red-400: oklch(70.4% 0.191 22.216);\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-red-600: oklch(57.7% 0.245 27.325);\n --color-red-700: oklch(50.5% 0.213 27.518);\n --color-red-800: oklch(44.4% 0.177 26.899);\n --color-red-900: oklch(39.6% 0.141 25.723);\n --color-red-950: oklch(25.8% 0.092 26.042);\n\n --color-orange-50: oklch(98% 0.016 73.684);\n --color-orange-100: oklch(95.4% 0.038 75.164);\n --color-orange-200: oklch(90.1% 0.076 70.697);\n --color-orange-300: oklch(83.7% 0.128 66.29);\n --color-orange-400: oklch(75% 0.183 55.934);\n --color-orange-500: oklch(70.5% 0.213 47.604);\n --color-orange-600: oklch(64.6% 0.222 41.116);\n --color-orange-700: oklch(55.3% 0.195 38.402);\n --color-orange-800: oklch(47% 0.157 37.304);\n --color-orange-900: oklch(40.8% 0.123 38.172);\n --color-orange-950: oklch(26.6% 0.079 36.259);\n\n --color-amber-50: oklch(98.7% 0.022 95.277);\n --color-amber-100: oklch(96.2% 0.059 95.617);\n --color-amber-200: oklch(92.4% 0.12 95.746);\n --color-amber-300: oklch(87.9% 0.169 91.605);\n --color-amber-400: oklch(82.8% 0.189 84.429);\n --color-amber-500: oklch(76.9% 0.188 70.08);\n --color-amber-600: oklch(66.6% 0.179 58.318);\n --color-amber-700: oklch(55.5% 0.163 48.998);\n --color-amber-800: oklch(47.3% 0.137 46.201);\n --color-amber-900: oklch(41.4% 0.112 45.904);\n --color-amber-950: oklch(27.9% 0.077 45.635);\n\n --color-yellow-50: oklch(98.7% 0.026 102.212);\n --color-yellow-100: oklch(97.3% 0.071 103.193);\n --color-yellow-200: oklch(94.5% 0.129 101.54);\n --color-yellow-300: oklch(90.5% 0.182 98.111);\n --color-yellow-400: oklch(85.2% 0.199 91.936);\n --color-yellow-500: oklch(79.5% 0.184 86.047);\n --color-yellow-600: oklch(68.1% 0.162 75.834);\n --color-yellow-700: oklch(55.4% 0.135 66.442);\n --color-yellow-800: oklch(47.6% 0.114 61.907);\n --color-yellow-900: oklch(42.1% 0.095 57.708);\n --color-yellow-950: oklch(28.6% 0.066 53.813);\n\n --color-lime-50: oklch(98.6% 0.031 120.757);\n --color-lime-100: oklch(96.7% 0.067 122.328);\n --color-lime-200: oklch(93.8% 0.127 124.321);\n --color-lime-300: oklch(89.7% 0.196 126.665);\n --color-lime-400: oklch(84.1% 0.238 128.85);\n --color-lime-500: oklch(76.8% 0.233 130.85);\n --color-lime-600: oklch(64.8% 0.2 131.684);\n --color-lime-700: oklch(53.2% 0.157 131.589);\n --color-lime-800: oklch(45.3% 0.124 130.933);\n --color-lime-900: oklch(40.5% 0.101 131.063);\n --color-lime-950: oklch(27.4% 0.072 132.109);\n\n --color-green-50: oklch(98.2% 0.018 155.826);\n --color-green-100: oklch(96.2% 0.044 156.743);\n --color-green-200: oklch(92.5% 0.084 155.995);\n --color-green-300: oklch(87.1% 0.15 154.449);\n --color-green-400: oklch(79.2% 0.209 151.711);\n --color-green-500: oklch(72.3% 0.219 149.579);\n --color-green-600: oklch(62.7% 0.194 149.214);\n --color-green-700: oklch(52.7% 0.154 150.069);\n --color-green-800: oklch(44.8% 0.119 151.328);\n --color-green-900: oklch(39.3% 0.095 152.535);\n --color-green-950: oklch(26.6% 0.065 152.934);\n\n --color-emerald-50: oklch(97.9% 0.021 166.113);\n --color-emerald-100: oklch(95% 0.052 163.051);\n --color-emerald-200: oklch(90.5% 0.093 164.15);\n --color-emerald-300: oklch(84.5% 0.143 164.978);\n --color-emerald-400: oklch(76.5% 0.177 163.223);\n --color-emerald-500: oklch(69.6% 0.17 162.48);\n --color-emerald-600: oklch(59.6% 0.145 163.225);\n --color-emerald-700: oklch(50.8% 0.118 165.612);\n --color-emerald-800: oklch(43.2% 0.095 166.913);\n --color-emerald-900: oklch(37.8% 0.077 168.94);\n --color-emerald-950: oklch(26.2% 0.051 172.552);\n\n --color-teal-50: oklch(98.4% 0.014 180.72);\n --color-teal-100: oklch(95.3% 0.051 180.801);\n --color-teal-200: oklch(91% 0.096 180.426);\n --color-teal-300: oklch(85.5% 0.138 181.071);\n --color-teal-400: oklch(77.7% 0.152 181.912);\n --color-teal-500: oklch(70.4% 0.14 182.503);\n --color-teal-600: oklch(60% 0.118 184.704);\n --color-teal-700: oklch(51.1% 0.096 186.391);\n --color-teal-800: oklch(43.7% 0.078 188.216);\n --color-teal-900: oklch(38.6% 0.063 188.416);\n --color-teal-950: oklch(27.7% 0.046 192.524);\n\n --color-cyan-50: oklch(98.4% 0.019 200.873);\n --color-cyan-100: oklch(95.6% 0.045 203.388);\n --color-cyan-200: oklch(91.7% 0.08 205.041);\n --color-cyan-300: oklch(86.5% 0.127 207.078);\n --color-cyan-400: oklch(78.9% 0.154 211.53);\n --color-cyan-500: oklch(71.5% 0.143 215.221);\n --color-cyan-600: oklch(60.9% 0.126 221.723);\n --color-cyan-700: oklch(52% 0.105 223.128);\n --color-cyan-800: oklch(45% 0.085 224.283);\n --color-cyan-900: oklch(39.8% 0.07 227.392);\n --color-cyan-950: oklch(30.2% 0.056 229.695);\n\n --color-sky-50: oklch(97.7% 0.013 236.62);\n --color-sky-100: oklch(95.1% 0.026 236.824);\n --color-sky-200: oklch(90.1% 0.058 230.902);\n --color-sky-300: oklch(82.8% 0.111 230.318);\n --color-sky-400: oklch(74.6% 0.16 232.661);\n --color-sky-500: oklch(68.5% 0.169 237.323);\n --color-sky-600: oklch(58.8% 0.158 241.966);\n --color-sky-700: oklch(50% 0.134 242.749);\n --color-sky-800: oklch(44.3% 0.11 240.79);\n --color-sky-900: oklch(39.1% 0.09 240.876);\n --color-sky-950: oklch(29.3% 0.066 243.157);\n\n --color-blue-50: oklch(97% 0.014 254.604);\n --color-blue-100: oklch(93.2% 0.032 255.585);\n --color-blue-200: oklch(88.2% 0.059 254.128);\n --color-blue-300: oklch(80.9% 0.105 251.813);\n --color-blue-400: oklch(70.7% 0.165 254.624);\n --color-blue-500: oklch(62.3% 0.214 259.815);\n --color-blue-600: oklch(54.6% 0.245 262.881);\n --color-blue-700: oklch(48.8% 0.243 264.376);\n --color-blue-800: oklch(42.4% 0.199 265.638);\n --color-blue-900: oklch(37.9% 0.146 265.522);\n --color-blue-950: oklch(28.2% 0.091 267.935);\n\n --color-indigo-50: oklch(96.2% 0.018 272.314);\n --color-indigo-100: oklch(93% 0.034 272.788);\n --color-indigo-200: oklch(87% 0.065 274.039);\n --color-indigo-300: oklch(78.5% 0.115 274.713);\n --color-indigo-400: oklch(67.3% 0.182 276.935);\n --color-indigo-500: oklch(58.5% 0.233 277.117);\n --color-indigo-600: oklch(51.1% 0.262 276.966);\n --color-indigo-700: oklch(45.7% 0.24 277.023);\n --color-indigo-800: oklch(39.8% 0.195 277.366);\n --color-indigo-900: oklch(35.9% 0.144 278.697);\n --color-indigo-950: oklch(25.7% 0.09 281.288);\n\n --color-violet-50: oklch(96.9% 0.016 293.756);\n --color-violet-100: oklch(94.3% 0.029 294.588);\n --color-violet-200: oklch(89.4% 0.057 293.283);\n --color-violet-300: oklch(81.1% 0.111 293.571);\n --color-violet-400: oklch(70.2% 0.183 293.541);\n --color-violet-500: oklch(60.6% 0.25 292.717);\n --color-violet-600: oklch(54.1% 0.281 293.009);\n --color-violet-700: oklch(49.1% 0.27 292.581);\n --color-violet-800: oklch(43.2% 0.232 292.759);\n --color-violet-900: oklch(38% 0.189 293.745);\n --color-violet-950: oklch(28.3% 0.141 291.089);\n\n --color-purple-50: oklch(97.7% 0.014 308.299);\n --color-purple-100: oklch(94.6% 0.033 307.174);\n --color-purple-200: oklch(90.2% 0.063 306.703);\n --color-purple-300: oklch(82.7% 0.119 306.383);\n --color-purple-400: oklch(71.4% 0.203 305.504);\n --color-purple-500: oklch(62.7% 0.265 303.9);\n --color-purple-600: oklch(55.8% 0.288 302.321);\n --color-purple-700: oklch(49.6% 0.265 301.924);\n --color-purple-800: oklch(43.8% 0.218 303.724);\n --color-purple-900: oklch(38.1% 0.176 304.987);\n --color-purple-950: oklch(29.1% 0.149 302.717);\n\n --color-fuchsia-50: oklch(97.7% 0.017 320.058);\n --color-fuchsia-100: oklch(95.2% 0.037 318.852);\n --color-fuchsia-200: oklch(90.3% 0.076 319.62);\n --color-fuchsia-300: oklch(83.3% 0.145 321.434);\n --color-fuchsia-400: oklch(74% 0.238 322.16);\n --color-fuchsia-500: oklch(66.7% 0.295 322.15);\n --color-fuchsia-600: oklch(59.1% 0.293 322.896);\n --color-fuchsia-700: oklch(51.8% 0.253 323.949);\n --color-fuchsia-800: oklch(45.2% 0.211 324.591);\n --color-fuchsia-900: oklch(40.1% 0.17 325.612);\n --color-fuchsia-950: oklch(29.3% 0.136 325.661);\n\n --color-pink-50: oklch(97.1% 0.014 343.198);\n --color-pink-100: oklch(94.8% 0.028 342.258);\n --color-pink-200: oklch(89.9% 0.061 343.231);\n --color-pink-300: oklch(82.3% 0.12 346.018);\n --color-pink-400: oklch(71.8% 0.202 349.761);\n --color-pink-500: oklch(65.6% 0.241 354.308);\n --color-pink-600: oklch(59.2% 0.249 0.584);\n --color-pink-700: oklch(52.5% 0.223 3.958);\n --color-pink-800: oklch(45.9% 0.187 3.815);\n --color-pink-900: oklch(40.8% 0.153 2.432);\n --color-pink-950: oklch(28.4% 0.109 3.907);\n\n --color-rose-50: oklch(96.9% 0.015 12.422);\n --color-rose-100: oklch(94.1% 0.03 12.58);\n --color-rose-200: oklch(89.2% 0.058 10.001);\n --color-rose-300: oklch(81% 0.117 11.638);\n --color-rose-400: oklch(71.2% 0.194 13.428);\n --color-rose-500: oklch(64.5% 0.246 16.439);\n --color-rose-600: oklch(58.6% 0.253 17.585);\n --color-rose-700: oklch(51.4% 0.222 16.935);\n --color-rose-800: oklch(45.5% 0.188 13.697);\n --color-rose-900: oklch(41% 0.159 10.272);\n --color-rose-950: oklch(27.1% 0.105 12.094);\n\n --color-slate-50: oklch(98.4% 0.003 247.858);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-slate-200: oklch(92.9% 0.013 255.508);\n --color-slate-300: oklch(86.9% 0.022 252.894);\n --color-slate-400: oklch(70.4% 0.04 256.788);\n --color-slate-500: oklch(55.4% 0.046 257.417);\n --color-slate-600: oklch(44.6% 0.043 257.281);\n --color-slate-700: oklch(37.2% 0.044 257.287);\n --color-slate-800: oklch(27.9% 0.041 260.031);\n --color-slate-900: oklch(20.8% 0.042 265.755);\n --color-slate-950: oklch(12.9% 0.042 264.695);\n\n --color-gray-50: oklch(98.5% 0.002 247.839);\n --color-gray-100: oklch(96.7% 0.003 264.542);\n --color-gray-200: oklch(92.8% 0.006 264.531);\n --color-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-gray-600: oklch(44.6% 0.03 256.802);\n --color-gray-700: oklch(37.3% 0.034 259.733);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-gray-900: oklch(21% 0.034 264.665);\n --color-gray-950: oklch(13% 0.028 261.692);\n\n --color-zinc-50: oklch(98.5% 0 none);\n --color-zinc-100: oklch(96.7% 0.001 286.375);\n --color-zinc-200: oklch(92% 0.004 286.32);\n --color-zinc-300: oklch(87.1% 0.006 286.286);\n --color-zinc-400: oklch(70.5% 0.015 286.067);\n --color-zinc-500: oklch(55.2% 0.016 285.938);\n --color-zinc-600: oklch(44.2% 0.017 285.786);\n --color-zinc-700: oklch(37% 0.013 285.805);\n --color-zinc-800: oklch(27.4% 0.006 286.033);\n --color-zinc-900: oklch(21% 0.006 285.885);\n --color-zinc-950: oklch(14.1% 0.005 285.823);\n\n --color-neutral-50: oklch(98.5% 0 none);\n --color-neutral-100: oklch(97% 0 none);\n --color-neutral-200: oklch(92.2% 0 none);\n --color-neutral-300: oklch(87% 0 none);\n --color-neutral-400: oklch(70.8% 0 none);\n --color-neutral-500: oklch(55.6% 0 none);\n --color-neutral-600: oklch(43.9% 0 none);\n --color-neutral-700: oklch(37.1% 0 none);\n --color-neutral-800: oklch(26.9% 0 none);\n --color-neutral-900: oklch(20.5% 0 none);\n --color-neutral-950: oklch(14.5% 0 none);\n\n --color-stone-50: oklch(98.5% 0.001 106.423);\n --color-stone-100: oklch(97% 0.001 106.424);\n --color-stone-200: oklch(92.3% 0.003 48.717);\n --color-stone-300: oklch(86.9% 0.005 56.366);\n --color-stone-400: oklch(70.9% 0.01 56.259);\n --color-stone-500: oklch(55.3% 0.013 58.071);\n --color-stone-600: oklch(44.4% 0.011 73.639);\n --color-stone-700: oklch(37.4% 0.01 67.558);\n --color-stone-800: oklch(26.8% 0.007 34.298);\n --color-stone-900: oklch(21.6% 0.006 56.043);\n --color-stone-950: oklch(14.7% 0.004 49.25);\n\n --color-mauve-50: oklch(98.5% 0 none);\n --color-mauve-100: oklch(96% 0.003 325.6);\n --color-mauve-200: oklch(92.2% 0.005 325.62);\n --color-mauve-300: oklch(86.5% 0.012 325.68);\n --color-mauve-400: oklch(71.1% 0.019 323.02);\n --color-mauve-500: oklch(54.2% 0.034 322.5);\n --color-mauve-600: oklch(43.5% 0.029 321.78);\n --color-mauve-700: oklch(36.4% 0.029 323.89);\n --color-mauve-800: oklch(26.3% 0.024 320.12);\n --color-mauve-900: oklch(21.2% 0.019 322.12);\n --color-mauve-950: oklch(14.5% 0.008 326);\n\n --color-olive-50: oklch(98.8% 0.003 106.5);\n --color-olive-100: oklch(96.6% 0.005 106.5);\n --color-olive-200: oklch(93% 0.007 106.5);\n --color-olive-300: oklch(88% 0.011 106.6);\n --color-olive-400: oklch(73.7% 0.021 106.9);\n --color-olive-500: oklch(58% 0.031 107.3);\n --color-olive-600: oklch(46.6% 0.025 107.3);\n --color-olive-700: oklch(39.4% 0.023 107.4);\n --color-olive-800: oklch(28.6% 0.016 107.4);\n --color-olive-900: oklch(22.8% 0.013 107.4);\n --color-olive-950: oklch(15.3% 0.006 107.1);\n\n --color-mist-50: oklch(98.7% 0.002 197.1);\n --color-mist-100: oklch(96.3% 0.002 197.1);\n --color-mist-200: oklch(92.5% 0.005 214.3);\n --color-mist-300: oklch(87.2% 0.007 219.6);\n --color-mist-400: oklch(72.3% 0.014 214.4);\n --color-mist-500: oklch(56% 0.021 213.5);\n --color-mist-600: oklch(45% 0.017 213.2);\n --color-mist-700: oklch(37.8% 0.015 216);\n --color-mist-800: oklch(27.5% 0.011 216.9);\n --color-mist-900: oklch(21.8% 0.008 223.9);\n --color-mist-950: oklch(14.8% 0.004 228.8);\n\n --color-taupe-50: oklch(98.6% 0.002 67.8);\n --color-taupe-100: oklch(96% 0.002 17.2);\n --color-taupe-200: oklch(92.2% 0.005 34.3);\n --color-taupe-300: oklch(86.8% 0.007 39.5);\n --color-taupe-400: oklch(71.4% 0.014 41.2);\n --color-taupe-500: oklch(54.7% 0.021 43.1);\n --color-taupe-600: oklch(43.8% 0.017 39.3);\n --color-taupe-700: oklch(36.7% 0.016 35.7);\n --color-taupe-800: oklch(26.8% 0.011 36.5);\n --color-taupe-900: oklch(21.4% 0.009 43.1);\n --color-taupe-950: oklch(14.7% 0.004 49.3);\n\n --color-black: #000;\n --color-white: #fff;\n\n --spacing: 0.25rem;\n\n --breakpoint-sm: 40rem;\n --breakpoint-md: 48rem;\n --breakpoint-lg: 64rem;\n --breakpoint-xl: 80rem;\n --breakpoint-2xl: 96rem;\n\n --container-3xs: 16rem;\n --container-2xs: 18rem;\n --container-xs: 20rem;\n --container-sm: 24rem;\n --container-md: 28rem;\n --container-lg: 32rem;\n --container-xl: 36rem;\n --container-2xl: 42rem;\n --container-3xl: 48rem;\n --container-4xl: 56rem;\n --container-5xl: 64rem;\n --container-6xl: 72rem;\n --container-7xl: 80rem;\n\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --text-6xl: 3.75rem;\n --text-6xl--line-height: 1;\n --text-7xl: 4.5rem;\n --text-7xl--line-height: 1;\n --text-8xl: 6rem;\n --text-8xl--line-height: 1;\n --text-9xl: 8rem;\n --text-9xl--line-height: 1;\n\n --font-weight-thin: 100;\n --font-weight-extralight: 200;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n --font-weight-black: 900;\n\n --tracking-tighter: -0.05em;\n --tracking-tight: -0.025em;\n --tracking-normal: 0em;\n --tracking-wide: 0.025em;\n --tracking-wider: 0.05em;\n --tracking-widest: 0.1em;\n\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n --leading-loose: 2;\n\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-4xl: 2rem;\n\n --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);\n --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);\n --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);\n\n --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);\n --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);\n --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);\n --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);\n --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);\n --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);\n\n --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);\n --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);\n --text-shadow-sm:\n 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);\n --text-shadow-md:\n 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);\n --text-shadow-lg:\n 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);\n\n --ease-in: cubic-bezier(0.4, 0, 1, 1);\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n\n --animate-spin: spin 1s linear infinite;\n --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --animate-bounce: bounce 1s infinite;\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes ping {\n 75%,\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n\n @keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n }\n\n @keyframes bounce {\n 0%,\n 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n }\n\n --blur-xs: 4px;\n --blur-sm: 8px;\n --blur-md: 12px;\n --blur-lg: 16px;\n --blur-xl: 24px;\n --blur-2xl: 40px;\n --blur-3xl: 64px;\n\n --perspective-dramatic: 100px;\n --perspective-near: 300px;\n --perspective-normal: 500px;\n --perspective-midrange: 800px;\n --perspective-distant: 1200px;\n\n --aspect-video: 16 / 9;\n\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: --theme(--font-sans, initial);\n --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial);\n --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial);\n --default-mono-font-family: --theme(--font-mono, initial);\n --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial);\n --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial);\n}\n\n/* Deprecated */\n@theme default inline reference {\n --blur: 8px;\n --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);\n --radius: 0.25rem;\n --max-width-prose: 65ch;\n}\n",
25
+ "tailwindcss/utilities.css": "@tailwind utilities;\n",
26
+ "tailwindcss/preflight.css": "/*\n 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n 2. Remove default margins and padding\n 3. Reset all borders.\n*/\n\n*,\n::after,\n::before,\n::backdrop,\n::file-selector-button {\n box-sizing: border-box; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 2 */\n border: 0 solid; /* 3 */\n}\n\n/*\n 1. Use a consistent sensible line-height in all browsers.\n 2. Prevent adjustments of font size after orientation changes in iOS.\n 3. Use a more readable tab size.\n 4. Use the user's configured `sans` font-family by default.\n 5. Use the user's configured `sans` font-feature-settings by default.\n 6. Use the user's configured `sans` font-variation-settings by default.\n 7. Disable tap highlights on iOS.\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n tab-size: 4; /* 3 */\n font-family: --theme(\n --default-font-family,\n -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n 'Helvetica Neue',\n 'Noto Sans',\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol',\n 'Noto Color Emoji'\n ); /* 4 */\n font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */\n font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n 1. Add the correct height in Firefox.\n 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n 3. Reset the default border style to a 1px solid border.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\n Add the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\n Remove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\n Reset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n}\n\n/*\n Add the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n 1. Use the user's configured `mono` font-family by default.\n 2. Use the user's configured `mono` font-feature-settings by default.\n 3. Use the user's configured `mono` font-variation-settings by default.\n 4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: --theme(\n --default-mono-font-family,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n 'Liberation Mono',\n 'Courier New',\n monospace\n ); /* 1 */\n font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */\n font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\n Add the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\n Prevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n 3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n Use the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring:where(:not(iframe)) {\n outline: auto;\n}\n\n/*\n Add the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\n Add the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\n Make lists unstyled by default.\n*/\n\nol,\nul,\nmenu {\n list-style: none;\n}\n\n/*\n 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\n Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/*\n 1. Inherit font styles in all browsers.\n 2. Remove border radius in all browsers.\n 3. Remove background color in all browsers.\n 4. Ensure consistent opacity for disabled states in all browsers.\n*/\n\nbutton,\ninput,\nselect,\noptgroup,\ntextarea,\n::file-selector-button {\n font: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n border-radius: 0; /* 2 */\n background-color: transparent; /* 3 */\n opacity: 1; /* 4 */\n}\n\n/*\n Restore default font weight.\n*/\n\n:where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n}\n\n/*\n Restore indentation.\n*/\n\n:where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n}\n\n/*\n Restore space after button.\n*/\n\n::file-selector-button {\n margin-inline-end: 4px;\n}\n\n/*\n Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n*/\n\n::placeholder {\n opacity: 1;\n}\n\n/*\n Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not\n crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)\n*/\n\n@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or\n (contain-intrinsic-size: 1px) /* Safari 17+ */ {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n}\n\n/*\n Prevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n Remove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n 1. Ensure date/time inputs have the same height when empty in iOS Safari.\n 2. Ensure text alignment can be changed on date/time inputs in iOS Safari.\n*/\n\n::-webkit-date-and-time-value {\n min-height: 1lh; /* 1 */\n text-align: inherit; /* 2 */\n}\n\n/*\n Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.\n*/\n\n::-webkit-datetime-edit {\n display: inline-flex;\n}\n\n/*\n Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.\n*/\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n}\n\n::-webkit-datetime-edit,\n::-webkit-datetime-edit-year-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-minute-field,\n::-webkit-datetime-edit-second-field,\n::-webkit-datetime-edit-millisecond-field,\n::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n}\n\n/*\n Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)\n*/\n\n::-webkit-calendar-picker-indicator {\n line-height: 1;\n}\n\n/*\n Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\n Correct the inability to style the border radius in iOS Safari.\n*/\n\nbutton,\ninput:where([type='button'], [type='reset'], [type='submit']),\n::file-selector-button {\n appearance: button;\n}\n\n/*\n Correct the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n Make elements with the HTML hidden attribute stay hidden by default.\n*/\n\n[hidden]:where(:not([hidden='until-found'])) {\n display: none !important;\n}\n"
27
+ };
17
28
  /**
18
- * A feature matrix establishes support, not the effect on a particular message.
19
- * These rules interpret the pinned caniemail@2.0.2 limitations using emitted
20
- * values. Unresolved layout, fallback and client-account behavior stays unverified.
29
+ * Lower one theme stylesheet for Tailwind and the email cascade.
30
+ *
31
+ * Every `@theme` becomes `static`. Tailwind emits a theme variable only when a
32
+ * utility it generated reads it, but a project's own stylesheets read theme
33
+ * variables too (`color: var(--color-primary)`), and Tailwind never sees those
34
+ * rules. A later layer that redefines a variable replaces its options, so every
35
+ * layer has to carry `static` for the value the cascade settles on to reach the
36
+ * inliner.
37
+ *
38
+ * A dark-mode block, `@media (prefers-color-scheme: dark) { @theme { … } }`,
39
+ * becomes a `:root` rule in that query, which the cascade reads as the dark
40
+ * values of those variables (Tailwind would hoist a nested `@theme` into the
41
+ * light theme). A stylesheet owns each color it sets in both modes: a color its
42
+ * light `@theme` sets and its dark-mode block does not keeps that value in dark
43
+ * mode too, rather than a dark value from a layer beneath it. A fill it sets
44
+ * without a text color gets `foregroundDefaults`.
21
45
  */
22
- const assessCompatibility = (title, client, support, context, blocking) => {
23
- const result = (assessment, heading, explanation) => ({
24
- assessment,
25
- title: heading,
26
- explanation
46
+ const lowerThemeCss = (css) => {
47
+ const ast = parse(css, {
48
+ positions: true,
49
+ parseValue: false,
50
+ parseRulePrelude: false,
51
+ parseCustomProperty: false
27
52
  });
28
- if (client === "outlook.windows" && support === "partial" && (title === "display" || title === "display:none") && context.hiddenContentOffsets.length > 0) return result("risk", "Hidden content becomes visible in classic Outlook", "Classic Outlook ignores display:none on images and does not inherit it onto nested tables. The emitted inline styles contain hidden content without a resolved hiding fallback. Add a supported hiding fallback before publishing.");
29
- if (blocking) return result("risk", `${title} is unavailable in a target client`, "This construct is required for message content, structure or navigation. Replace it with a supported construct before publishing.");
30
- const explained = context.explanation(title, client, support);
31
- if (explained !== void 0) return result(title.startsWith("system-ui,") ? "degradation" : "not-applicable", title.startsWith("system-ui,") ? "A fallback font will be used" : `${title}: limitation avoided`, explained);
32
- const declarations = (property) => context.declarations(property);
33
- const every = (property, predicate) => {
34
- const values = declarations(property);
35
- return context.complete && values.length > 0 && values.every(({ value }) => predicate(value));
36
- };
37
- const attributesAvoid = (attribute, unsupportedElement) => {
38
- const values = context.attributes(attribute);
39
- return values.length > 0 && values.every(({ element }) => element !== unsupportedElement);
53
+ const edits = [];
54
+ const light = {};
55
+ const dark = {};
56
+ const declarations = (node, visit) => {
57
+ if (node.type !== "Atrule" || node.block === null) return;
58
+ for (const child of node.block.children) if (child.type === "Declaration" && child.loc != null && child.value.loc != null) visit(child.property, css.slice(child.value.loc.start.offset, child.value.loc.end.offset));
40
59
  };
41
- if (title === "font-size" && support === "partial" && ["outlook.windows", "yahoo.desktop-webmail"].includes(client) && declarations("font-size").some(({ value }) => /\d(?:\.\d+)?rem\b/i.test(value))) return result("risk", "Text sizes use unsupported rem units", "These clients cannot apply the emitted rem font sizes. Use pixel sizes to preserve the intended text size.");
42
- if (title === "target attribute" && context.attributes("target").some(({ value }) => value !== "_blank")) return result("risk", "Links cannot keep the requested window target", "These clients open links in a new window regardless of the requested target. Use a new-window target or remove the dependency on another browsing context.");
43
- if (title.startsWith("system-ui,") && declarations("font-family").some(({ value }) => !/(?:^|,)\s*(?:sans-serif|serif|monospace)\s*$/i.test(value))) return result("risk", "An unsupported font stack has no generic fallback", "Declare a generic fallback so the client has an explicit font choice when the requested system font is unavailable.");
44
- if (title === "border-radius" && support !== "partial") return result("degradation", "Corners may appear square", "CSS corner rounding is unavailable in this client. Uncovered elements appear square; a separate VML shape can retain rounding. This finding does not establish a content or navigation failure.");
45
- if (title === "border-radius" && client === "yahoo.desktop-webmail" && support === "partial") return result("degradation", "Corner shapes may differ", "This client does not support elliptical slash syntax. Review the recorded values if that corner shape is part of the intended design.");
46
- if (title === "background") {
47
- const values = [...declarations("background"), ...declarations("background-color")];
48
- if (context.complete && values.length > 0 && values.every(({ value }) => SIMPLE_COLOR.test(value)) && declarations("background-image").every(({ value }) => value.toLowerCase() === "none")) return result("not-applicable", "Backgrounds use supported color values", "The emitted backgrounds use simple colors. The cited multiple-background and background-size shorthand limitations do not apply.");
49
- }
50
- if (title === "dir attribute" && client === "outlook.windows" && attributesAvoid("dir", "a")) return result("not-applicable", "Direction is set outside links", "The cited direction bug affects anchor elements. No emitted anchor carries a dir attribute.");
51
- if (title === "lang attribute" && client === "yahoo.desktop-webmail" && attributesAvoid("lang", "td")) return result("not-applicable", "Language is set outside table cells", "The cited language-attribute limitation affects table cells. No emitted td carries a lang attribute.");
52
- if (title === "role attribute" && client === "yahoo.desktop-webmail" && context.attributes("role").length > 0 && context.attributes("role").every(({ element }) => element === "table")) return result("not-applicable", "Roles are applied to supported tables", "Every emitted role attribute is on a table, matching this client's supported element scope.");
53
- if (title === "text-align" && support === "partial" && every("text-align", (value) => VERIFIED_VALUES.test(value))) return result("not-applicable", "Text uses supported alignment values", "The emitted alignment values do not use match-parent or flow-relative start/end values.");
54
- if (title === "font-weight" && support === "partial") {
55
- const pattern = client === "outlook.windows" ? /^(?:normal|bold|400|700)$/i : /^(?:normal|bold|[1-9]00)$/i;
56
- if (every("font-weight", (value) => pattern.test(value))) return result("not-applicable", "Font weights avoid the numeric limitation", "The emitted weights use values preserved by this client's pinned numeric-weight rule.");
57
- return result("degradation", "Font weight may be approximated", "This client may substitute a supported weight. Text remains present, but its emphasis can look different.");
58
- }
59
- if (title === "outline" && every("outline", (value) => value === "none" || value === "0")) return result("unverified", "Image outlines need a client check", "The emitted styles remove outlines. The matrix cannot establish whether this client adds its own link or image outline.");
60
- if (title === "width attribute" && client === "outlook.windows" && context.attributes(title.split(" ")[0]).some(({ value, element }) => element === "img" && value.includes("%"))) return result("risk", "Percentage image dimensions use the wrong reference size", "Classic Outlook sizes percentage image attributes against the image file rather than its parent. Use fixed image dimensions with an appropriate responsive fallback.");
61
- if (title === "overflow" && declarations("overflow").some(({ value }) => /^(?:auto|scroll)$/i.test(value))) return result("risk", "Scrollable content may be inaccessible", "These clients cannot reliably expose content hidden behind a scrolling container. Keep required email content visible without scrolling inside an element.");
62
- return result("unverified", {
63
- "<body> element": "Body styling needs a client check",
64
- border: "Borders need an Outlook check",
65
- "color-scheme meta tag": "Dark appearance needs a client check",
66
- display: "Display behavior needs a client check",
67
- "display:none": "Hidden content needs an Outlook check",
68
- "height attribute": "Image sizing needs a high-DPI Outlook check",
69
- "height property": "Element heights need a client check",
70
- "line-height": "Line spacing needs an Outlook check",
71
- margin: "Outer spacing needs a client check",
72
- "max-height property": "Height limits need an Outlook check",
73
- "max-width": "Width limits need a client check",
74
- "@media": "Conditional styles need a client check",
75
- opacity: "Transparent content needs an Outlook check",
76
- overflow: "Clipped content needs a client check",
77
- "overflow-wrap": "Long text wrapping needs a client check",
78
- padding: "Cell spacing needs an Outlook check",
79
- "<style> element": "Retained styles need a client check",
80
- "text-decoration": "Link decoration needs a client check",
81
- "width attribute": "Image sizing needs a high-DPI Outlook check",
82
- "width property": "Element widths need an Outlook check",
83
- "word-break": "Word breaking needs a client check"
84
- }[title] ?? `${title} needs a client check`, "The feature matrix identifies a support difference but does not establish its effect on this message. Check the affected fixtures in the listed clients before relying on this behavior; no automatic source change is justified by this observation alone.");
85
- };
86
- //#endregion
87
- //#region src/email/compatibility-context.ts
88
- const NON_HIDING_VALUES = {
89
- "mso-hide": /^none$/,
90
- visibility: /^visible$/,
91
- opacity: /^(?:1(?:\.0+)?|100(?:\.0+)?%)$/,
92
- overflow: /^visible$/,
93
- "overflow-y": /^visible$/,
94
- "overflow-x": /^visible$/,
95
- clip: /^auto$/,
96
- "clip-path": /^none$/
97
- };
98
- const POSITIVE_FIXED_HEIGHT = /^(?:\d+(?:\.\d+)?|\.\d+)(?:px|pt|pc|in|cm|mm)$/;
99
- /** Evidence from actual declarations and elements, never a text match in email content. */
100
- const compatibilityContext = (html, css) => {
101
- const declarations = /* @__PURE__ */ new Map();
102
- const attributes = /* @__PURE__ */ new Map();
103
- const elements = /* @__PURE__ */ new Map();
104
- let complete = true;
105
- let unresolvedStyles = false;
106
- const hiddenContentOffsets = [];
107
- const addCss = (source, context, offset, element) => {
108
- const inline = /* @__PURE__ */ new Map();
109
- if (context === "stylesheet" && source.trim() !== "") unresolvedStyles = true;
110
- try {
111
- const ast = parse(source, { context });
112
- walk(ast, (node) => {
113
- if (node.type === "Raw") complete = false;
114
- if (node.type !== "Declaration") return;
115
- const property = node.property.toLowerCase();
116
- const entries = declarations.get(property) ?? [];
117
- const value = generate(node.value);
118
- entries.push({
119
- value,
120
- offset,
121
- element
122
- });
123
- if (!inline.get(property)?.important || node.important) inline.set(property, {
124
- value: value.toLowerCase(),
125
- important: Boolean(node.important)
126
- });
127
- declarations.set(property, entries);
60
+ const preludeOf = (node) => node.type !== "Atrule" || node.prelude === null || node.prelude.loc == null ? "" : css.slice(node.prelude.loc.start.offset, node.prelude.loc.end.offset);
61
+ const isTheme = (node) => node.type === "Atrule" && node.name.toLowerCase() === "theme" && node.loc != null;
62
+ if (ast.type === "StyleSheet") for (const node of ast.children) {
63
+ if (isTheme(node)) {
64
+ if (!/(?:^|\s)static(?:\s|$)/i.test(preludeOf(node))) edits.push({
65
+ start: node.loc.start.offset + 6,
66
+ end: node.loc.start.offset + 6,
67
+ text: " static"
128
68
  });
129
- } catch {
130
- complete = false;
131
- }
132
- return inline;
133
- };
134
- const { document } = parseHtml(html);
135
- const visit = (node, ancestors = []) => {
136
- let descendants = ancestors;
137
- if (node.type === "comment" && /\[if\b/i.test(node.data)) unresolvedStyles = true;
138
- if ("attribs" in node) {
139
- const offset = node.startIndex ?? void 0;
140
- if (offset !== void 0) {
141
- const entries = elements.get(node.name) ?? [];
142
- entries.push(offset);
143
- elements.set(node.name, entries);
144
- }
145
- for (const [name, value] of Object.entries(node.attribs)) {
146
- const entries = attributes.get(name) ?? [];
147
- entries.push({
148
- value,
149
- offset,
150
- element: node.name
151
- });
152
- attributes.set(name, entries);
153
- }
154
- const styles = node.attribs.style === void 0 ? /* @__PURE__ */ new Map() : addCss(node.attribs.style, "declarationList", offset, node.name);
155
- descendants = [...ancestors, {
156
- offset,
157
- styles
158
- }];
159
- const fallback = descendants.some(({ styles: candidate }) => {
160
- const candidateDisplay = candidate.get("display")?.value;
161
- return candidateDisplay !== void 0 && !/^(?:none|block|inline|inline-block|table|table-row|table-cell|table-row-group)$/i.test(candidateDisplay) || candidate.has("all") || Object.entries(NON_HIDING_VALUES).some(([property, neutral]) => {
162
- const value = candidate.get(property)?.value;
163
- return value !== void 0 && !neutral.test(value);
164
- }) || ["height", "max-height"].some((property) => {
165
- const value = candidate.get(property)?.value;
166
- return value !== void 0 && value !== (property === "height" ? "auto" : "none") && !(POSITIVE_FIXED_HEIGHT.test(value) && Number.parseFloat(value) > 0);
167
- });
69
+ declarations(node, (property, value) => {
70
+ if (property.startsWith("--color-")) light[property] = value.trim();
168
71
  });
169
- const hiddenAncestor = ancestors.find(({ styles: candidate }) => candidate.get("display")?.value === "none");
170
- const display = styles.get("display")?.value;
171
- if (!fallback && node.name === "img" && display === "none" && hiddenAncestor === void 0 && offset !== void 0) hiddenContentOffsets.push(offset);
172
- if (!fallback && node.name === "table" && hiddenAncestor !== void 0 && display === void 0 && hiddenAncestor.offset !== void 0) hiddenContentOffsets.push(hiddenAncestor.offset);
173
- if (node.name === "style") {
174
- for (const child of node.children) if (child.type === "text") addCss(child.data, "stylesheet");
175
- }
72
+ continue;
176
73
  }
177
- if ("children" in node) for (const child of node.children) visit(child, descendants);
178
- };
179
- for (const child of document.children) visit(child);
180
- if (css !== void 0) addCss(css, "stylesheet");
181
- const everyValue = (property, predicate) => {
182
- const entries = declarations.get(property);
183
- return complete && entries !== void 0 && entries.length > 0 && entries.every(({ value }) => predicate(value));
184
- };
185
- return {
186
- /** Known hidden-content failures; unresolved cascade or fallback evidence cannot block. */
187
- get hiddenContentOffsets() {
188
- return complete && !unresolvedStyles ? [...new Set(hiddenContentOffsets)] : [];
189
- },
190
- /** Incomplete CSS cannot prove that every occurrence avoids a limitation. */
191
- get complete() {
192
- return complete;
193
- },
194
- declarations(property) {
195
- return declarations.get(property) ?? [];
196
- },
197
- attributes(name) {
198
- return attributes.get(name) ?? [];
199
- },
200
- /** Bounded exceptions to caniemail@2.0.2's feature-wide matrix, tied to its client rules. */
201
- explanation(title, client, support) {
202
- if (title === "font-size" && support === "partial" && ["outlook.windows", "yahoo.desktop-webmail"].includes(client) && everyValue("font-size", (value) => /^(?:0|(?:\d+(?:\.\d+)?|\.\d+)px)$/i.test(value))) return "All font sizes use pixels; this client's rem-unit limitation does not apply.";
203
- if (title === "border-radius" && support === "partial" && client === "yahoo.desktop-webmail" && everyValue("border-radius", (value) => /^(?:0|(?:\d+(?:\.\d+)?|\.\d+)(?:px|%))(?:\s+(?:0|(?:\d+(?:\.\d+)?|\.\d+)(?:px|%))){0,3}$/i.test(value))) return "These corner radii do not use the unsupported elliptical slash syntax.";
204
- if (title === "target attribute" && [
205
- "gmail.desktop-webmail",
206
- "gmail.ios",
207
- "gmail.android",
208
- "outlook.outlook-com",
209
- "yahoo.desktop-webmail",
210
- "outlook.windows",
211
- "apple-mail.macos",
212
- "apple-mail.ios"
213
- ].includes(client) && attributes.has("target") && attributes.get("target").every(({ value }) => value === "_blank")) return "Links already request a new window, matching the client's enforced behavior.";
214
- if (title === "system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace" && everyValue("font-family", (value) => /(?:^|,)\s*(?:sans-serif|serif|monospace)\s*$/i.test(value))) return "Every font stack ends with a generic fallback. Font appearance can differ in this client.";
215
- },
216
- offsets(title) {
217
- const element = /^<([a-z0-9]+)> element$/i.exec(title);
218
- if (element !== null) return elements.get(element[1]) ?? [];
219
- const attribute = /^([a-z-]+) attribute$/i.exec(title);
220
- const entries = attribute !== null ? attributes.get(attribute[1]) : declarations.get(title.startsWith("system-ui,") ? "font-family" : title.replace(/ property$/, ""));
221
- return [...new Set(entries?.flatMap(({ offset }) => offset === void 0 ? [] : [offset]) ?? [])];
74
+ if (node.type !== "Atrule" || node.name.toLowerCase() !== "media" || node.block === null || !isDarkSchemeQuery(preludeOf(node))) continue;
75
+ for (const child of node.block.children) {
76
+ if (!isTheme(child) || child.type !== "Atrule" || child.block?.loc == null) continue;
77
+ edits.push({
78
+ start: child.loc.start.offset,
79
+ end: child.block.loc.start.offset,
80
+ text: ":root"
81
+ });
82
+ declarations(child, (property, value) => {
83
+ dark[property] = value.trim();
84
+ });
222
85
  }
223
- };
224
- };
225
- //#endregion
226
- //#region src/email/contrast.ts
227
- const CANVAS = {
228
- light: {
229
- r: 1,
230
- g: 1,
231
- b: 1,
232
- a: 1
233
- },
234
- dark: {
235
- r: 18 / 255,
236
- g: 18 / 255,
237
- b: 18 / 255,
238
- a: 1
239
86
  }
87
+ const defaults = foregroundDefaults(light, dark);
88
+ const lightAdded = Object.entries(defaults.light);
89
+ const owned = {
90
+ ...light,
91
+ ...defaults.light
92
+ };
93
+ const darkAdded = [...Object.entries(defaults.dark), ...Object.entries(owned).filter(([property]) => !(property in dark) && !(property in defaults.dark))];
94
+ let output = css;
95
+ for (const edit of edits.sort((left, right) => right.start - left.start)) output = `${output.slice(0, edit.start)}${edit.text}${output.slice(edit.end)}`;
96
+ const block = (entries) => entries.map(([property, value]) => ` ${property}: ${value};`).join("\n");
97
+ return [
98
+ output,
99
+ ...lightAdded.length === 0 ? [] : [`@theme static {\n${block(lightAdded)}\n}`],
100
+ ...darkAdded.length === 0 ? [] : [`${DARK_SCHEME_MEDIA} {\n :root {\n${block(darkAdded)}\n }\n}`]
101
+ ].join("\n");
240
102
  };
241
- /** The ratios `email-contrast` holds a message to, and what counts as large text. */
242
- const CONTRAST_THRESHOLDS = {
243
- /** Text below this is an error at any size. */
244
- textError: 3,
245
- /** Normal-size text below this is a warning (WCAG AA). */
246
- textWarning: 4.5,
247
- /** Text at least this many pixels is large, as is bold text at `largeBoldPx`. */
248
- largePx: 24,
249
- largeBoldPx: 18.5,
250
- /** A filled button below this against its surroundings is an error. */
251
- shapeError: 1.5,
252
- /** A filled button below this is a warning (WCAG 1.4.11). */
253
- shapeWarning: 3,
254
- /** A button border at least this against the surroundings keeps the shape. */
255
- border: 3
256
- };
257
- const TEXT_ERROR = CONTRAST_THRESHOLDS.textError;
258
- const TEXT_WARNING = CONTRAST_THRESHOLDS.textWarning;
259
- const LARGE_PX = CONTRAST_THRESHOLDS.largePx;
260
- const LARGE_BOLD_PX = CONTRAST_THRESHOLDS.largeBoldPx;
261
- const SHAPE_ERROR = CONTRAST_THRESHOLDS.shapeError;
262
- const SHAPE_WARNING = CONTRAST_THRESHOLDS.shapeWarning;
263
- const INSET_BORDER = CONTRAST_THRESHOLDS.border;
264
- const SKIPPED_TAGS = /* @__PURE__ */ new Set([
265
- "head",
266
- "style",
267
- "title",
268
- "script"
269
- ]);
270
- const INVISIBLE = /[\s\u200b-\u200f\ufeff\u00a0\u00ad]|\u034f/g;
271
- const DARK_QUERY = /^@media\b[^{]*\(\s*prefers-color-scheme\s*:\s*dark\s*\)/i;
272
- const clamp = (value) => value < 0 ? 0 : value > 1 ? 1 : value;
273
- const channel = (value) => {
274
- const v = clamp(value);
275
- return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
276
- };
277
- const luminance = (color) => .2126 * channel(color.r) + .7152 * channel(color.g) + .0722 * channel(color.b);
278
- const ratioOf = (left, right) => {
279
- const a = luminance(left);
280
- const b = luminance(right);
281
- return (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
282
- };
283
- const hex = (color) => `#${[
284
- color.r,
285
- color.g,
286
- color.b
287
- ].map((value) => Math.round(clamp(value) * 255).toString(16).padStart(2, "0")).join("")}`;
288
- const over = (top, below) => ({
289
- r: top.r * top.a + below.r * (1 - top.a),
290
- g: top.g * top.a + below.g * (1 - top.a),
291
- b: top.b * top.a + below.b * (1 - top.a),
292
- a: 1
293
- });
294
- const declarationsOf = (source) => {
295
- const found = [];
296
- try {
297
- walk(parse(source, {
298
- context: "declarationList",
299
- positions: false
300
- }), (node) => {
301
- if (node.type === "Declaration") found.push({
302
- property: node.property.toLowerCase(),
303
- value: generate(node.value).trim()
103
+ /** The default theme, lowered once: the first layer of every project's theme. */
104
+ const DEFAULT_THEME_TAILWIND_CSS = lowerThemeCss(DEFAULT_THEME_CSS);
105
+ /**
106
+ * What every project compiles beneath its own CSS, for a build that compiles no
107
+ * Tailwind: the default theme and the primitives' rules, in Tailwind's layers.
108
+ */
109
+ const BASE_STYLESHEET_CSS = [
110
+ "@layer theme, base, components, utilities;",
111
+ DEFAULT_THEME_TAILWIND_CSS,
112
+ PRIMITIVE_CSS
113
+ ].join("\n");
114
+ /** Compile the discovered class set into CSS with the pinned Tailwind release. */
115
+ const compileTailwind = async (candidates, options = {}, imports = { stylesheets: /* @__PURE__ */ new Map() }) => {
116
+ const entry = [
117
+ "@layer theme, base, components, utilities;",
118
+ "@import \"tailwindcss/theme.css\" layer(theme);",
119
+ ...options.preflight === true ? ["@import \"tailwindcss/preflight.css\" layer(base);"] : [],
120
+ "@import \"tailwindcss/utilities.css\" layer(utilities);",
121
+ DEFAULT_THEME_TAILWIND_CSS,
122
+ PRIMITIVE_CSS,
123
+ lowerThemeCss(options.css ?? "")
124
+ ].join("\n");
125
+ const compiler = await compile(entry, {
126
+ base: projectDirectory(options.cssPath ?? "theme.css"),
127
+ loadStylesheet: (id, base) => {
128
+ const builtIn = STYLESHEETS[id];
129
+ if (builtIn !== void 0) return Promise.resolve({
130
+ path: id,
131
+ base,
132
+ content: builtIn
304
133
  });
305
- });
306
- } catch {
307
- return [];
308
- }
309
- return found;
310
- };
311
- /** Split on whitespace that is not inside parentheses. */
312
- const tokens = (value) => {
313
- const found = [];
314
- let depth = 0;
315
- let current = "";
316
- for (const char of value) {
317
- if (char === "(") depth += 1;
318
- if (char === ")") depth -= 1;
319
- if (/\s/.test(char) && depth === 0) {
320
- if (current !== "") found.push(current);
321
- current = "";
322
- } else current += char;
323
- }
324
- if (current !== "") found.push(current);
325
- return found;
326
- };
327
- const declaredColor = (value) => {
328
- const color = parseColor(value);
329
- return color === void 0 ? "unknown" : color;
330
- };
331
- const pixels = (value) => {
332
- const trimmed = value.trim();
333
- if (/^[+-]?0+(?:\.0+)?$/.test(trimmed)) return 0;
334
- const match = /^(\d+(?:\.\d+)?|\.\d+)px$/i.exec(trimmed);
335
- return match === null ? void 0 : Number(match[1]);
336
- };
337
- const BORDER_STYLES = /^(?:solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden)$/i;
338
- const WIDTH_KEYWORDS = {
339
- thin: 1,
340
- medium: 3,
341
- thick: 5
342
- };
343
- const resolve = (declarations) => {
344
- let background;
345
- let image = false;
346
- let color;
347
- let display;
348
- let fontSize;
349
- let bold;
350
- const border = {
351
- width: void 0,
352
- visible: void 0,
353
- color: void 0
354
- };
355
- for (const { property, value } of declarations) {
356
- const lower = value.toLowerCase();
357
- switch (property) {
358
- case "background":
359
- image = /url\(|gradient\(/.test(lower);
360
- background = tokens(value).filter((part) => !/^(?:url|[\w-]*gradient)\(/i.test(part)).map(parseColor).find((entry) => entry !== void 0) ?? (/var\(|currentcolor|inherit|initial|unset/.test(lower) ? "unknown" : void 0);
361
- break;
362
- case "background-color":
363
- background = declaredColor(value);
364
- break;
365
- case "background-image":
366
- image = lower !== "none";
367
- break;
368
- case "color":
369
- color = declaredColor(value);
370
- break;
371
- case "display":
372
- display = lower.replace(/\s*!important$/, "");
373
- break;
374
- case "font-size":
375
- fontSize = pixels(value);
376
- break;
377
- case "font-weight": {
378
- const weight = Number(lower);
379
- if (lower === "bold" || lower === "bolder") bold = true;
380
- else if (lower === "normal" || lower === "lighter") bold = false;
381
- else if (!Number.isNaN(weight)) bold = weight >= 700;
382
- break;
383
- }
384
- case "border":
385
- case "border-width":
386
- case "border-color":
387
- case "border-style": {
388
- const parts = tokens(value);
389
- if (property === "border") {
390
- border.width = WIDTH_KEYWORDS.medium;
391
- border.visible = false;
392
- border.color = "unknown";
393
- }
394
- const styles = parts.filter((part) => BORDER_STYLES.test(part));
395
- if (styles.length > 0) border.visible = styles.every((part) => !/^(?:none|hidden)$/i.test(part));
396
- const sizes = parts.map((part) => pixels(part) ?? WIDTH_KEYWORDS[part.toLowerCase()]).filter((entry) => entry !== void 0);
397
- if (sizes.length > 0) border.width = Math.min(...sizes);
398
- else if (property === "border-width") border.width = void 0;
399
- const named = parts.filter((part) => pixels(part) === void 0 && WIDTH_KEYWORDS[part.toLowerCase()] === void 0 && !BORDER_STYLES.test(part));
400
- if (property !== "border-width" && property !== "border-style" && named.length > 0) {
401
- const colors = named.map(parseColor);
402
- border.color = colors.every((entry) => entry !== void 0) ? colors[0] : "unknown";
403
- }
404
- break;
134
+ if (parseBrandSpecifier(id, { brandPlugin: imports.brandPlugin }) !== void 0) {
135
+ if (imports.brandCss === void 0) throw new TypeError(`${id} has no brand in this build`);
136
+ return Promise.resolve({
137
+ path: id,
138
+ base,
139
+ content: lowerThemeCss(imports.brandCss)
140
+ });
405
141
  }
142
+ const path = resolveFromDirectory(base, id.replace(/[?#].*$/, ""));
143
+ const content = path === void 0 ? void 0 : imports.stylesheets.get(path);
144
+ if (path === void 0 || content === void 0) throw new TypeError(`@import ${JSON.stringify(id)} names no project stylesheet`);
145
+ return Promise.resolve({
146
+ path,
147
+ base: projectDirectory(path),
148
+ content: lowerThemeCss(content)
149
+ });
406
150
  }
407
- }
151
+ });
152
+ const all = [.../* @__PURE__ */ new Set([...candidates, ...options.safelist ?? []])].sort();
153
+ const limits = options.limits;
154
+ if (limits !== void 0 && all.length > limits.candidates) throw new TypeError(`Tailwind candidate limit exceeded: ${all.length} classes, limit ${limits.candidates}. Reduce the utility classes this project uses, or its declared safelist.`);
155
+ const css = compiler.build(all);
156
+ const bytes = new TextEncoder().encode(css).length;
157
+ if (limits !== void 0 && bytes > limits.cssBytes) throw new TypeError(`Generated CSS limit exceeded: ${bytes} bytes, limit ${limits.cssBytes}. Reduce the utility classes this project uses, or its declared safelist.`);
408
158
  return {
409
- background,
410
- image,
411
- color,
412
- display,
413
- fontSize,
414
- bold,
415
- border
159
+ css,
160
+ version: TAILWIND_VERSION,
161
+ candidates: all
416
162
  };
417
163
  };
418
- /** Properties a declaration list sets, for deciding whether an unimportant dark rule can apply. */
419
- const has = (declarations, property) => declarations.some((entry) => entry.property === property);
420
- const advance = (parent, style, tag) => {
421
- let background = parent.background;
422
- let ownBackground;
423
- if (style.image || style.background === "unknown") background = "unknown";
424
- else if (style.background !== void 0 && style.background.a > 0) {
425
- if (style.background.a >= 1) background = style.background;
426
- else if (parent.background !== "unknown") background = over(style.background, parent.background);
427
- else background = "unknown";
428
- if (background !== "unknown") ownBackground = background;
164
+ const isRecord = (value) => isObject(value) && !Array.isArray(value);
165
+ const isAstNode = (value) => isRecord(value) && typeof value.type === "string" && typeof value.start === "number" && typeof value.end === "number";
166
+ const walk$1 = (value, visit) => {
167
+ if (Array.isArray(value)) {
168
+ for (const item of value) walk$1(item, visit);
169
+ return;
429
170
  }
430
- let color = tag === "a" ? void 0 : parent.color;
431
- if (style.color === "unknown") color = "unknown";
432
- else if (style.color !== void 0) color = style.color;
433
- return {
434
- ownBackground,
435
- state: {
436
- background,
437
- color,
438
- fontSize: style.fontSize ?? parent.fontSize,
439
- bold: style.bold ?? parent.bold,
440
- hidden: parent.hidden || style.display === "none"
441
- }
442
- };
443
- };
444
- const originsAt$1 = (positions, offset) => {
445
- if (offset === void 0) return [];
446
- let best;
447
- for (const position of positions) {
448
- if (offset < position.start || offset >= position.end) continue;
449
- if (best === void 0 || position.end - position.start < best.end - best.start) best = position;
171
+ if (!isRecord(value)) return;
172
+ if (isAstNode(value)) visit(value);
173
+ for (const [key, child] of Object.entries(value)) {
174
+ if (key === "loc" || key === "extra" || key === "comments" || key === "tokens") continue;
175
+ walk$1(child, visit);
450
176
  }
451
- return best?.origins ?? [];
452
177
  };
453
- const compareRules = (left, right) => {
454
- const important = (rule) => rule.declarations.some((d) => d.important) ? 1 : 0;
455
- return important(left) - important(right) || left.specificity[0] - right.specificity[0] || left.specificity[1] - right.specificity[1] || left.specificity[2] - right.specificity[2] || left.order - right.order;
178
+ const CLASS_KEYS = /* @__PURE__ */ new Set(["class", "className"]);
179
+ const nameOf = (node) => {
180
+ if (!isAstNode(node)) return void 0;
181
+ if (node.type === "JSXIdentifier" || node.type === "Identifier") return typeof node.name === "string" ? node.name : void 0;
182
+ if (node.type === "StringLiteral") return typeof node.value === "string" ? node.value : void 0;
456
183
  };
457
- const textOf = (node) => node.children.map((child) => "data" in child ? String(child.data) : "").join("");
458
- const MODE_LABEL = {
459
- light: "Light mode",
460
- dark: "Dark mode"
461
- };
462
- const FIX = "Pair background and text tokens (bg-primary with text-primary-foreground) and give the theme's dark-mode @theme a value for the token, or choose colors that reach";
463
184
  /**
464
- * Check text and filled-control contrast in the emitted document, in light and
465
- * dark presentation.
185
+ * Collect the class names one module states literally, and report the positions
186
+ * where a class is assembled from values the compiler cannot see.
466
187
  */
467
- const checkEmailContrast = (input) => {
468
- const { document } = parseHtml(input.html);
469
- const sheets = input.css === void 0 ? [] : [input.css];
470
- const collect = (nodes) => {
471
- for (const node of nodes) {
472
- if (!("attribs" in node)) continue;
473
- if (node.name === "style") sheets.push(textOf(node));
474
- else collect(node.children);
475
- }
476
- };
477
- collect(document.children);
478
- const darkRules = sheets.flatMap((sheet) => parseStylesheet(sheet).rules).filter((rule) => rule.conditions.length === 1 && DARK_QUERY.test(rule.conditions[0])).toSorted(compareRules);
479
- const findings = /* @__PURE__ */ new Map();
480
- const report = (mode, kind, foreground, background, ratio, required, severity, offset) => {
481
- const origins = originsAt$1(input.positions ?? [], offset);
482
- const measured = ratio.toFixed(2);
483
- const colors = `${hex(foreground)} on ${hex(background)}`;
484
- const message = kind === "text" ? `${MODE_LABEL[mode]}: text ${colors} has a contrast ratio of ${measured}:1; ${required}:1 is required. ${FIX} ${required}:1.` : `${MODE_LABEL[mode]}: the button background ${hex(foreground)} against its surroundings ${hex(background)} has a contrast ratio of ${measured}:1; ${SHAPE_WARNING}:1 is required for the shape to stay visible (below ${SHAPE_ERROR}:1 it disappears). ${FIX} ${SHAPE_WARNING}:1, or give the button a border that does.`;
485
- const key = JSON.stringify([
486
- mode,
487
- kind,
488
- hex(foreground),
489
- hex(background),
490
- measured,
491
- origins
492
- ]);
493
- const existing = findings.get(key);
494
- if (existing !== void 0) {
495
- if (origins.length > 0) existing.occurrences.push(origins);
496
- return;
497
- }
498
- findings.set(key, {
499
- key,
500
- occurrences: origins.length > 0 ? [origins] : [],
501
- diagnostic: {
502
- code: "email-contrast",
503
- severity,
504
- message,
505
- origins,
506
- ...input.fixture === void 0 ? {} : { fixtures: [input.fixture] }
507
- }
188
+ const discoverClassCandidates = (source, fileName) => {
189
+ let parsed;
190
+ try {
191
+ parsed = parse$1(source, {
192
+ plugins: ["typescript", "jsx"],
193
+ sourceType: "module"
508
194
  });
509
- };
510
- const visit = (node, parents, parentAncestry, previous) => {
511
- const inline = declarationsOf(node.attribs.style ?? "");
512
- const attribute = node.attribs.bgcolor === void 0 ? [] : [{
513
- property: "background-color",
514
- value: node.attribs.bgcolor
515
- }];
516
- const shape = {
517
- type: "Element",
518
- tag: node.name,
519
- props: node.attribs,
520
- children: [],
521
- origins: [],
522
- authored: false
523
- };
524
- const ancestry = {
525
- element: shape,
526
- parent: parentAncestry,
527
- previous
528
- };
529
- const base = [...attribute, ...inline];
530
- const dark = [...base];
531
- for (const rule of darkRules) {
532
- if (!matchesSelector(rule.matcher, ancestry)) continue;
533
- for (const declaration of rule.declarations) {
534
- const property = declaration.property.toLowerCase();
535
- if (declaration.important || !has(inline, property)) dark.push({
536
- property,
537
- value: declaration.value.replace(/\s*!important$/i, "")
538
- });
539
- }
540
- }
541
- const styles = {
542
- light: resolve(base),
543
- dark: resolve(dark)
195
+ } catch {
196
+ return {
197
+ candidates: [],
198
+ diagnostics: []
544
199
  };
545
- const direct = node.children.some((child) => child.type === "text" && String(child.data).replace(INVISIBLE, "") !== "");
546
- const states = {
547
- light: parents.light,
548
- dark: parents.dark
200
+ }
201
+ const lineMap = buildLineMap(source);
202
+ const candidates = /* @__PURE__ */ new Set();
203
+ const diagnostics = [];
204
+ const at = (offset) => {
205
+ const position = lineColumn(lineMap, offset);
206
+ return {
207
+ fileName,
208
+ lineNumber: position.line,
209
+ columnNumber: position.column
549
210
  };
550
- for (const mode of ["light", "dark"]) {
551
- const parent = parents[mode];
552
- const style = styles[mode];
553
- const { state, ownBackground } = advance(parent, style, node.name);
554
- states[mode] = state;
555
- if (state.hidden) continue;
556
- if (node.name === "a" && ownBackground !== void 0 && parent.background !== "unknown" && !style.image) {
557
- const ratio = ratioOf(ownBackground, parent.background);
558
- if (ratio < SHAPE_WARNING) {
559
- const { width, visible, color } = style.border;
560
- const bordered = visible === true && width !== void 0 && width > 0 && color !== void 0;
561
- if (!(bordered && color !== "unknown" && ratioOf(over(color, parent.background), parent.background) >= INSET_BORDER) && !(bordered && color === "unknown")) report(mode, "button", ownBackground, parent.background, ratio, SHAPE_WARNING, ratio < SHAPE_ERROR ? "error" : "warning", node.startIndex ?? void 0);
211
+ };
212
+ /** Returns true when every class in the expression is statically known. */
213
+ const readValue = (node) => {
214
+ if (!isAstNode(node)) return false;
215
+ switch (node.type) {
216
+ case "StringLiteral":
217
+ if (typeof node.value !== "string") return false;
218
+ for (const name of node.value.split(/\s+/)) if (name !== "") candidates.add(name);
219
+ return true;
220
+ case "TemplateLiteral": {
221
+ const quasis = Array.isArray(node.quasis) ? node.quasis : [];
222
+ for (const quasi of quasis) {
223
+ const cooked = isAstNode(quasi) && isRecord(quasi.value) ? quasi.value.cooked : void 0;
224
+ if (typeof cooked !== "string") continue;
225
+ for (const name of cooked.split(/\s+/)) if (name !== "") candidates.add(name);
562
226
  }
227
+ return Array.isArray(node.expressions) && node.expressions.length === 0;
563
228
  }
564
- if (direct && state.color !== void 0 && state.color !== "unknown" && state.background !== "unknown") {
565
- const ink = over(state.color, state.background);
566
- const ratio = ratioOf(ink, state.background);
567
- const required = state.fontSize !== void 0 && (state.fontSize >= LARGE_PX || state.bold && state.fontSize >= LARGE_BOLD_PX) ? TEXT_ERROR : TEXT_WARNING;
568
- if (ratio < required) report(mode, "text", ink, state.background, ratio, required, ratio < TEXT_ERROR ? "error" : "warning", node.startIndex ?? void 0);
569
- }
570
- }
571
- if (!SKIPPED_TAGS.has(node.name) && (!states.light.hidden || !states.dark.hidden)) {
572
- let siblings = [];
573
- for (const child of node.children) {
574
- if (!("attribs" in child) || SKIPPED_TAGS.has(child.name)) continue;
575
- const done = visit(child, states, ancestry, siblings);
576
- siblings = [...siblings, done];
577
- }
578
- }
579
- return shape;
580
- };
581
- const root = {
582
- light: {
583
- background: CANVAS.light,
584
- color: void 0,
585
- fontSize: void 0,
586
- bold: false,
587
- hidden: false
588
- },
589
- dark: {
590
- background: CANVAS.dark,
591
- color: void 0,
592
- fontSize: void 0,
593
- bold: false,
594
- hidden: false
229
+ case "JSXExpressionContainer": return readValue(node.expression);
230
+ case "ConditionalExpression": return [node.consequent, node.alternate].every((branch) => readValue(branch));
231
+ case "LogicalExpression": return readValue(node.right);
232
+ case "BinaryExpression": return node.operator === "+" && [node.left, node.right].every((side) => readValue(side));
233
+ case "ArrayExpression": return Array.isArray(node.elements) && node.elements.every((element) => readValue(element));
234
+ default: return false;
595
235
  }
596
236
  };
597
- let siblings = [];
598
- for (const node of document.children) {
599
- if (!("attribs" in node) || SKIPPED_TAGS.has(node.name)) continue;
600
- siblings = [...siblings, visit(node, root, void 0, siblings)];
601
- }
602
- return [...findings.values()].map(({ diagnostic, occurrences }) => ({
603
- ...diagnostic,
604
- ...occurrences.length > 1 ? { occurrences } : {}
605
- }));
606
- };
607
- //#endregion
608
- //#region src/email/compatibility.ts
609
- /**
610
- * The pinned matrix. Every finding is reported per client, and a client absent
611
- * from this list is a client Samva makes no claim about.
612
- */
613
- const EMAIL_CLIENT_MATRIX = [
614
- {
615
- id: "gmail.desktop-webmail",
616
- label: "Gmail web"
617
- },
618
- {
619
- id: "gmail.ios",
620
- label: "Gmail iOS"
621
- },
622
- {
623
- id: "gmail.android",
624
- label: "Gmail Android"
625
- },
626
- {
627
- id: "apple-mail.macos",
628
- label: "Apple Mail macOS"
629
- },
630
- {
631
- id: "apple-mail.ios",
632
- label: "Apple Mail iOS"
633
- },
634
- {
635
- id: "yahoo.desktop-webmail",
636
- label: "Yahoo web"
637
- },
638
- {
639
- id: "outlook.outlook-com",
640
- label: "Outlook web and new Windows"
641
- },
642
- {
643
- id: "outlook.windows",
644
- label: "Outlook classic Windows"
645
- }
646
- ];
647
- const LABELS = new Map(EMAIL_CLIENT_MATRIX.map((target) => [target.id, target.label]));
648
- const COMPATIBILITY_PROVENANCE = {
649
- rules: "caniemail@2.0.2",
650
- apiVersion: rawData.api_version,
651
- lastUpdate: rawData.last_update_date
652
- };
653
- /**
654
- * The constructs whose loss actually breaks a message: the recipient reads
655
- * something different, in a different order, follows a link that does not work,
656
- * or sees a layout that has collapsed. A target client dropping one of these
657
- * blocks publication.
658
- *
659
- * The list is deliberately short and enumerated, because the contract is to
660
- * block *known* failures. Nonessential differences require an assessment of
661
- * emitted values: a concrete risk warns, expected differences and unverified
662
- * behavior remain compatibility observations.
663
- */
664
- const ESSENTIAL_CONSTRUCTS = /* @__PURE__ */ new Set([
665
- "<table> element",
666
- "<div> element",
667
- "<p> element",
668
- "<span> element",
669
- "<ul>, <ol> and <dl>",
670
- "<h1> to <h6> elements",
671
- "HTML5 doctype",
672
- "width attribute",
673
- "height attribute",
674
- "align attribute",
675
- "valign attribute",
676
- "<img> element",
677
- "display",
678
- "mailto: links",
679
- "Local anchors"
680
- ]);
681
- const KNOWN_TITLES = new Set(rawData.data.map((feature) => feature.title));
682
- /** The innermost recorded node containing an offset, so a finding names its element. */
683
- const originsAt = (positions, offset) => {
684
- let best;
685
- for (const position of positions) {
686
- if (offset < position.start || offset >= position.end) continue;
687
- if (best === void 0 || position.end - position.start < best.end - best.start) best = position;
688
- }
689
- return best?.origins ?? [];
690
- };
691
- const slug = (title) => title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
692
- /**
693
- * Check the emitted document against the pinned matrix.
694
- *
695
- * Findings are grouped by construct rather than repeated per client, so one
696
- * unsupported property is one diagnostic naming every client that drops it.
697
- */
698
- const checkEmailCompatibility = (input) => {
699
- const targets = input.clients ?? EMAIL_CLIENT_MATRIX;
700
- const context = compatibilityContext(input.html, input.css);
701
- const targetClients = targets.map((target) => target.id);
702
- const reports = [caniemail({
703
- clients: targetClients,
704
- html: input.html
705
- }), ...input.css === void 0 ? [] : [caniemail({
706
- clients: targetClients,
707
- css: input.css
708
- })]];
709
- const grouped = /* @__PURE__ */ new Map();
710
- for (const bucket of reports.flatMap((report) => [report.issues.errors, report.issues.warnings])) for (const [client, issues] of bucket) {
711
- const label = LABELS.get(client) ?? client;
712
- for (const raw of issues) {
713
- const hiddenContentFailure = client === "outlook.windows" && raw.support === "partial" && (raw.title === "display" || raw.title === "display:none") && context.hiddenContentOffsets.length > 0;
714
- const blocking = hiddenContentFailure || raw.support !== "partial" && ESSENTIAL_CONSTRUCTS.has(raw.title);
715
- const { explanation, ...compatibility } = assessCompatibility(raw.title, client, raw.support, context, blocking);
716
- const key = JSON.stringify([
717
- raw.title,
718
- raw.support,
719
- compatibility,
720
- explanation
721
- ]);
722
- const offsets = hiddenContentFailure ? context.hiddenContentOffsets : context.offsets(raw.title);
723
- const entry = grouped.get(key);
724
- if (entry === void 0) grouped.set(key, {
725
- title: raw.title,
726
- support: raw.support,
727
- clients: /* @__PURE__ */ new Set([label]),
728
- notes: new Set(raw.notes),
729
- explanation,
730
- compatibility,
731
- blocking,
732
- offsets
733
- });
734
- else {
735
- entry.clients.add(label);
736
- for (const note of raw.notes) entry.notes.add(note);
737
- }
738
- }
739
- }
740
- const findings = [];
741
- for (const entry of grouped.values()) {
742
- const severity = entry.blocking ? "error" : entry.compatibility.assessment === "risk" ? "warning" : "info";
743
- const occurrences = entry.offsets.map((offset) => originsAt(input.positions ?? [], offset)).filter((origins) => origins.length > 0);
744
- const clients = [...entry.clients].sort();
745
- const dropped = entry.support === "partial" ? clients.length === 1 ? "partially supports" : "partially support" : clients.length === 1 ? "does not support" : "do not support";
746
- findings.push({
747
- code: `caniemail/${slug(entry.title)}`,
748
- severity,
749
- message: `${clients.join(", ")} ${dropped} ${entry.title}. ${entry.explanation}`,
750
- compatibility: entry.compatibility,
751
- origins: occurrences[0] ?? [],
752
- ...occurrences.length === 0 ? {} : { occurrences },
753
- ...input.fixture === void 0 ? {} : { fixtures: [input.fixture] },
754
- clients,
755
- ...entry.notes.size === 0 ? {} : { notes: [...entry.notes].join(" ") },
756
- provenance: `${COMPATIBILITY_PROVENANCE.rules} (caniemail data ${COMPATIBILITY_PROVENANCE.apiVersion}, updated ${COMPATIBILITY_PROVENANCE.lastUpdate})`
237
+ walk$1(parsed.program, (node) => {
238
+ const isJsxAttribute = node.type === "JSXAttribute";
239
+ const isObjectProperty = node.type === "ObjectProperty";
240
+ if (!isJsxAttribute && !isObjectProperty) return;
241
+ const key = nameOf(isJsxAttribute ? node.name : node.key);
242
+ if (key === void 0 || !CLASS_KEYS.has(key)) return;
243
+ const value = isJsxAttribute ? node.value : node.value;
244
+ if (value === null || value === void 0) return;
245
+ if (readValue(value)) return;
246
+ diagnostics.push({
247
+ code: "tailwind-dynamic-class",
248
+ severity: "warning",
249
+ message: `This ${key} is assembled at run time, so the compiler cannot discover the classes it produces and they will have no styles. Write the classes literally, or declare them in the project's Tailwind safelist.`,
250
+ origins: [at(node.start)]
757
251
  });
758
- }
759
- findings.push(...checkEmailContrast(input));
760
- return findings.sort((left, right) => left.code.localeCompare(right.code));
252
+ });
253
+ return {
254
+ candidates: [...candidates].sort(),
255
+ diagnostics
256
+ };
761
257
  };
762
- /**
763
- * Constructs the pinned data says nothing about for a target client. These are
764
- * reported so "we did not check that" is never mistaken for "that works".
765
- */
766
- const unknownCoverage = (titles) => [...titles].filter((title) => !KNOWN_TITLES.has(title)).sort().map((title) => ({
767
- code: "caniemail/unknown-coverage",
768
- severity: "info",
769
- message: `The pinned rules say nothing about ${title}, so no client claim is made about it. Verify it in a real client before relying on it.`,
770
- origins: [],
771
- provenance: `${COMPATIBILITY_PROVENANCE.rules} (caniemail data ${COMPATIBILITY_PROVENANCE.apiVersion}, updated ${COMPATIBILITY_PROVENANCE.lastUpdate})`
772
- }));
773
- /** A publication carrying one of these is refused; the message would arrive broken. */
774
- const hasBlockingCompatibility = (findings) => findings.some((finding) => finding.severity === "error");
775
258
  //#endregion
776
259
  //#region src/email/transform.ts
777
260
  const SCRIPT = /\.[cm]?[jt]sx?$/;
@@ -850,7 +333,9 @@ const scriptBrandImports = (path, source, plugin) => {
850
333
  * the project imports no brand. A project that names two brands gets the
851
334
  * first here and a refusal from the compile.
852
335
  */
853
- const projectBrandSpecifier = (files, themePath = "theme.css", brandPlugin = samvaBrandPlugin) => {
336
+ const projectBrandSpecifier = (files, options = {}) => {
337
+ const themePath = options.themePath ?? "theme.css";
338
+ const brandPlugin = options.brandPlugin ?? samvaBrandPlugin;
854
339
  const theme = files[themePath];
855
340
  const fromTheme = typeof theme === "string" ? resolveThemeImports(themePath, theme, files, brandPlugin).brandSpecifiers : [];
856
341
  const fromScripts = Object.keys(files).sort().filter((path) => SCRIPT.test(path) && typeof files[path] === "string").flatMap((path) => scriptBrandImports(path, files[path], brandPlugin)).map((request) => request.specifier);
@@ -889,7 +374,7 @@ const resolveTheme = (files, tailwind, brand, brandPlugin) => {
889
374
  });
890
375
  else if (specifiers.length === 1) {
891
376
  const specifier = specifiers[0];
892
- const named = parseBrandSpecifier(specifier, brandPlugin)?.slug;
377
+ const named = parseBrandSpecifier(specifier, { brandPlugin })?.slug;
893
378
  const origins = [requests[0].origin];
894
379
  if (brand === void 0) refusals.push({
895
380
  code: "brand-unavailable",
@@ -974,7 +459,7 @@ const transformProject = async (files, options) => {
974
459
  };
975
460
  //#endregion
976
461
  //#region src/sml/compile.ts
977
- /** Compile a project's entry template to IR without evaluating any of it. */
462
+ /** Compile a project's entry template without evaluating any of it. */
978
463
  const compileTemplate = async (options) => {
979
464
  const findings = new Findings();
980
465
  const project = loadProject(options.files, options.entry, findings, { brandPlugin: options.brandPlugin ?? samvaBrandPlugin });
@@ -1000,38 +485,251 @@ const compileTemplate = async (options) => {
1000
485
  });
1001
486
  };
1002
487
  //#endregion
1003
- //#region src/sml/compatibility.ts
488
+ //#region src/email/text.ts
489
+ const PARAGRAPH = "\n\n";
490
+ const LINE = "\n";
491
+ const INVISIBLE = /\u200b|\u200c|\u200d|\u200e|\u200f|\u2060|\ufeff/g;
492
+ const isLayoutTable = (props) => props.role === "presentation" || props.role === "none";
493
+ /**
494
+ * A data-table cell that reads as nothing and holds only imagery with empty alt text carries no
495
+ * column of its own; an empty cell without such an image is a positional placeholder.
496
+ */
497
+ const isDecorativeCell = (cell, context) => {
498
+ const images = collect(cell.children, (tag) => tag === "img", () => true);
499
+ return images.length > 0 && images.every((image) => image.props.alt === "") && childText(cell, context).trim() === "";
500
+ };
501
+ /** Wrap a block's content in separators; empty blocks contribute nothing. */
502
+ const block = (inner, separator) => {
503
+ const trimmed = inner.replace(/^\s+/, "").replace(/\s+$/, "");
504
+ return trimmed === "" ? "" : `${separator}${trimmed}${separator}`;
505
+ };
506
+ const collect = (nodes, keep, descend) => nodes.flatMap((child) => {
507
+ if (child.type === "Fragment") return collect(child.children, keep, descend);
508
+ if (child.type !== "Element") return [];
509
+ if (keep(child.tag)) return [child];
510
+ return descend(child.tag) ? collect(child.children, keep, descend) : [];
511
+ });
512
+ const TABLE_SECTIONS = /* @__PURE__ */ new Set([
513
+ "thead",
514
+ "tbody",
515
+ "tfoot"
516
+ ]);
517
+ const childText = (node, context) => node.children.map((child) => derive(child, context)).join("");
518
+ const derive = (node, context) => {
519
+ switch (node.type) {
520
+ case "Text": return context.preformatted ? node.value : node.value.replace(INVISIBLE, "").replace(/[^\S\n]+/g, " ");
521
+ case "Raw": return node.text;
522
+ case "Fragment": return node.children.map((child) => derive(child, context)).join("");
523
+ case "Element": {
524
+ const spec = emailElement(node.tag);
525
+ if (spec === void 0) return childText(node, context);
526
+ switch (spec.layout) {
527
+ case "metadata": return "";
528
+ case "document":
529
+ case "inline":
530
+ case "list-item": return childText(node, context);
531
+ case "break": return LINE;
532
+ case "rule": return `${PARAGRAPH}---${PARAGRAPH}`;
533
+ case "image": {
534
+ const alt = typeof node.props.alt === "string" ? node.props.alt.trim() : "";
535
+ return alt === "" ? "" : `[${alt}]`;
536
+ }
537
+ case "link": {
538
+ const label = childText(node, context).replace(/\s+/g, " ").trim();
539
+ const href = typeof node.props.href === "string" ? node.props.href : "";
540
+ if (href === "" || href === label) return label;
541
+ return label === "" ? href : `${label} (${href})`;
542
+ }
543
+ case "list": {
544
+ const indent = " ".repeat(context.listDepth);
545
+ const start = Number(node.props.start ?? 1);
546
+ const first = Number.isFinite(start) ? start : 1;
547
+ const nested = {
548
+ ...context,
549
+ listDepth: context.listDepth + 1
550
+ };
551
+ const lines = collect(node.children, (tag) => tag === "li", () => false).map((item, index) => {
552
+ const marker = node.tag === "ol" ? `${first + index}.` : "-";
553
+ const continuation = `${indent}${" ".repeat(marker.length + 1)}`;
554
+ const [head = "", ...rest] = derive(item, nested).replace(/^\s+/, "").replace(/\s+$/, "").replace(/\n{2,}/g, LINE).split("\n");
555
+ return [`${indent}${marker} ${head}`, ...rest.map((line) => line.trim() === "" ? "" : /^\s/.test(line) ? line : `${continuation}${line}`)].join(LINE);
556
+ });
557
+ return block(lines.join(LINE), PARAGRAPH);
558
+ }
559
+ case "table": {
560
+ if (isLayoutTable(node.props)) return childText(node, context);
561
+ const rows = collect(node.children, (tag) => tag === "tr", (tag) => TABLE_SECTIONS.has(tag)).map((row) => collect(row.children, (tag) => tag === "td" || tag === "th", () => false).filter((cell) => !isDecorativeCell(cell, context)).map((cell) => childText(cell, context).replace(/\s+/g, " ").trim()).join(" | "));
562
+ return block(rows.join(LINE), PARAGRAPH);
563
+ }
564
+ case "row": return block(collect(node.children, (tag) => tag === "td" || tag === "th", () => false).map((cell) => childText(cell, context).replace(/^\s+|\s+$/g, "")).filter((cell) => cell !== "").join(LINE), LINE);
565
+ case "table-section":
566
+ case "cell": return block(childText(node, context), LINE);
567
+ case "preformatted": return block(childText(node, {
568
+ ...context,
569
+ preformatted: true
570
+ }), PARAGRAPH);
571
+ case "block": return block(childText(node, context), PARAGRAPH);
572
+ }
573
+ }
574
+ }
575
+ };
576
+ /** Collapse the separators the walk emits into readable plain text. */
577
+ const normalize = (value) => value.replace(/\r\n?/g, "\n").split("\n").map((line) => line.replace(/[^\S\n]+$/, "")).join("\n").replace(/\n{3,}/g, PARAGRAPH).trim();
578
+ /** Derive the plain-text alternative from the semantic tree in reading order. */
579
+ const deriveEmailText = (node) => normalize(derive(node, {
580
+ preformatted: false,
581
+ listDepth: 0
582
+ }));
583
+ //#endregion
584
+ //#region src/email/render.ts
585
+ /**
586
+ * Lower the derived tree to HTML and its plain-text alternative. A blocking finding leaves no
587
+ * output; every finding comes back in `diagnostics`.
588
+ */
589
+ const lowerEmail = (node, options = {}) => {
590
+ const serialized = serializeEmailHtml(node, options);
591
+ const diagnostics = [...collectEmailDiagnostics(node), ...serialized.diagnostics];
592
+ if (hasBlockingDiagnostic(diagnostics)) return {
593
+ output: void 0,
594
+ diagnostics
595
+ };
596
+ return {
597
+ output: {
598
+ html: serialized.html,
599
+ text: deriveEmailText(node),
600
+ diagnostics,
601
+ positions: serialized.positions
602
+ },
603
+ diagnostics
604
+ };
605
+ };
606
+ //#endregion
607
+ //#region src/email/footer.ts
608
+ const EMPTY_FOOTER = {
609
+ html: "",
610
+ text: "",
611
+ headCss: ""
612
+ };
1004
613
  /**
1005
- * Check what each declared fixture delivers against the pinned client matrix. The rules run on the
1006
- * rendered document, because what a client drops is what the compiler produced, and every finding
1007
- * is located at the source of the element that produced it.
614
+ * Compile `BrandFooter` against a brand on its own, for the send path to append to a message
615
+ * whose template renders no footer of its own. It compiles the same component, styled by the same
616
+ * brand theme, a template would get from its brand import. The footer always carries the
617
+ * unsubscribe row; the send drops it with `withoutUnsubscribeRow` from `./brand` where the message
618
+ * has none. A brand theme outside the grammar leaves no footer and comes back as diagnostics.
1008
619
  */
1009
- const checkTemplateCompatibility = (ir, fixtures, options = {}) => {
1010
- if (ir.email === void 0) return [];
1011
- const sources = ir.sources ?? [];
1012
- const findings = [];
1013
- for (const [fixture, input] of Object.entries(fixtures)) {
1014
- const rendered = renderIr(ir, input, { positions: true });
1015
- const positions = (rendered.positions ?? []).map((position, index) => ({
1016
- start: position.start,
1017
- end: position.end,
1018
- tag: position.tag,
1019
- instancePath: String(index),
1020
- authored: true,
1021
- origins: position.src === void 0 ? [] : [{
1022
- fileName: sources[position.src[2] ?? 0] ?? "",
1023
- lineNumber: position.src[0],
1024
- columnNumber: position.src[1]
1025
- }]
1026
- }));
1027
- findings.push(...checkEmailCompatibility({
1028
- html: rendered.html,
1029
- fixture,
1030
- positions,
1031
- ...options.clients === void 0 ? {} : { clients: options.clients }
1032
- }));
620
+ const compileFooter = async (brand, options = {}) => {
621
+ const plugin = options.brandPlugin ?? samvaBrandPlugin;
622
+ const theme = parseBrandCss(brand.css);
623
+ if (theme.isErr()) return {
624
+ footer: void 0,
625
+ diagnostics: theme.error.map((finding) => ({
626
+ code: finding.code,
627
+ severity: "error",
628
+ message: `${plugin.specifier}: ${finding.message}`,
629
+ origins: []
630
+ }))
631
+ };
632
+ const tailwind = await compileTailwind(BRAND_COMPONENT_CLASSES, { css: printBrandCss(theme.value) });
633
+ const node = brandComponents(brand, plugin).BrandFooter({});
634
+ if (node === null) return {
635
+ footer: EMPTY_FOOTER,
636
+ diagnostics: []
637
+ };
638
+ const styled = applyStylesheet(node, parseStylesheet(tailwind.css, { origin: plugin.specifier }));
639
+ const lowered = lowerEmail(styled.tree, { brandPlugin: plugin });
640
+ const diagnostics = [...styled.diagnostics, ...lowered.diagnostics];
641
+ if (lowered.output === void 0 || hasBlockingDiagnostic(diagnostics)) return {
642
+ footer: void 0,
643
+ diagnostics
644
+ };
645
+ const text = lowered.output.text.trim();
646
+ return {
647
+ footer: {
648
+ html: lowered.output.html,
649
+ text: text === "" ? "" : `\n\n---\n${text}`,
650
+ headCss: `${renderDarkRules(styled.darkRules)}${styled.headCss}`
651
+ },
652
+ diagnostics
653
+ };
654
+ };
655
+ //#endregion
656
+ //#region src/email/brand-preview.ts
657
+ const ENTRY = "sample.tsx";
658
+ const sampleSource = (plugin) => `import { defineTemplate } from "@samva/markup";
659
+ import { Email, Section } from "@samva/markup/email";
660
+ import { jsonSchema } from "@samva/markup/input-schema";
661
+ import { BrandFooter, BrandLogo } from ${JSON.stringify(plugin.specifier)};
662
+
663
+ export default defineTemplate({
664
+ id: "brand-preview",
665
+ schema: jsonSchema({ type: "object", properties: {} }),
666
+ fixtures: { default: {} },
667
+ email: {
668
+ subject: () => "Your order is on its way",
669
+ body: () => (
670
+ <Email className="bg-background font-sans">
671
+ <Section style={{ padding: "32px 24px" }}>
672
+ <BrandLogo />
673
+ <h1 className="text-2xl font-semibold text-foreground font-heading">Your order is on its way</h1>
674
+ <p className="text-base text-foreground font-sans">
675
+ Thanks for your order. Here is a quick summary, and a link to follow it to your door.
676
+ </p>
677
+ <div className="p-4 rounded bg-card text-card-foreground">
678
+ <p className="inline-block px-2 py-1 text-sm font-semibold rounded bg-accent text-accent-foreground">
679
+ Order 1042
680
+ </p>
681
+ <p className="text-sm text-muted-foreground">2 items, arriving Thursday</p>
682
+ </div>
683
+ <p>
684
+ <a
685
+ href="https://example.com/orders/1042"
686
+ className="inline-block px-6 py-3 font-semibold no-underline rounded bg-primary text-primary-foreground"
687
+ >
688
+ Track your order
689
+ </a>
690
+ </p>
691
+ </Section>
692
+ <BrandFooter />
693
+ </Email>
694
+ ),
695
+ },
696
+ });
697
+ `;
698
+ const previewBrand = async (brand, options = {}) => {
699
+ const plugin = options.brandPlugin ?? samvaBrandPlugin;
700
+ const compiled = await compileTemplate({
701
+ files: { [ENTRY]: sampleSource(plugin) },
702
+ entry: ENTRY,
703
+ assetBase: "/",
704
+ tailwind: { css: `@import ${JSON.stringify(plugin.specifier)};` },
705
+ brand,
706
+ brandPlugin: plugin
707
+ });
708
+ if (compiled.template === void 0) return {
709
+ html: void 0,
710
+ diagnostics: compiled.diagnostics
711
+ };
712
+ try {
713
+ const { html } = render(compiled.template, {}, {
714
+ channel: "email",
715
+ brandPlugin: plugin
716
+ });
717
+ return {
718
+ html,
719
+ diagnostics: compiled.diagnostics
720
+ };
721
+ } catch (cause) {
722
+ if (!RenderError.is(cause)) throw cause;
723
+ return {
724
+ html: void 0,
725
+ diagnostics: [...compiled.diagnostics, ...cause.diagnostics.map((finding) => ({
726
+ code: finding.code,
727
+ severity: "error",
728
+ message: finding.message,
729
+ origins: []
730
+ }))]
731
+ };
1033
732
  }
1034
- return findings;
1035
733
  };
1036
734
  //#endregion
1037
- export { COMPATIBILITY_PROVENANCE, EMAIL_CLIENT_MATRIX, ESSENTIAL_CONSTRUCTS, TAILWIND_VERSION, TEMPLATE_NAME_PATTERN, applyStylesheet, checkEmailCompatibility, checkStaticProfile, checkTemplateCompatibility, classListOf, compileSelector, compileTailwind, compileTemplate, discoverClassCandidates, downlevelColors, downlevelMediaQuery, finalizeValue, foldCalc, formatColor, hasBlockingCompatibility, introducedProfileErrors, matchesSelector, parseBrandSpecifier, parseColor, parseStylesheet, projectBrandSpecifier, renderBrandFooter, renderBrandSample, renderHeadCss, resolveVariables, transformProject, unknownCoverage };
735
+ export { TEMPLATE_NAME_PATTERN, checkTemplate, compileFooter, compileTemplate, introducedErrors, parseBrandSpecifier, previewBrand, projectBrandSpecifier };