@samva/markup 0.9.0 → 0.11.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.
- package/AGENTS.md +53 -41
- package/CHANGELOG.md +379 -0
- package/README.md +6 -6
- package/dist/assets-B0yseju_.d.ts +115 -0
- package/dist/brand-DTctcDmf.js +202 -0
- package/dist/brand-plugin-CHhcei-j.d.ts +32 -0
- package/dist/{theme-css.d.ts → brand.d.ts} +15 -4
- package/dist/brand.js +4 -0
- package/dist/compiler.d.ts +236 -18
- package/dist/compiler.js +1315 -13
- package/dist/{email/components.js → components-Bl6DT21n.js} +4 -4
- package/dist/diagnostic-model-DJtqbETd.js +38 -0
- package/dist/diagnostic-model-DxthUZBT.d.ts +31 -0
- package/dist/{email/diagnostics.js → diagnostics-CnKFefKz.js} +2 -2
- package/dist/diagnostics.d.ts +406 -27
- package/dist/diagnostics.js +402 -34
- package/dist/edit.d.ts +234 -0
- package/dist/{channel-edit.js → edit.js} +341 -3
- package/dist/email/jsx-dev-runtime.d.ts +1 -1
- package/dist/email/jsx-dev-runtime.js +1 -2
- package/dist/email/jsx-runtime.d.ts +1 -1
- package/dist/email/jsx-runtime.js +1 -85
- package/dist/{email/components.d.ts → email.d.ts} +2 -2
- package/dist/email.js +2 -0
- package/dist/html-DjPxwjLi.js +1637 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/{cascade-t6kxlgEI.js → ir-De6pTH51.js} +8 -4
- package/dist/jsx-runtime-CBlexoeR.js +98 -0
- package/dist/{elements-cqldpaJt.d.ts → jsx-runtime-ylIOnaSf.d.ts} +74 -74
- package/dist/{profile-BH-OtdDA.js → profile-PUfi3GPH.js} +166 -32
- package/dist/{email/render.js → render-D2ht57ZZ.js} +103 -8
- package/dist/render-DQKz4Aco.d.ts +548 -0
- package/dist/render.d.ts +35 -0
- package/dist/render.js +49 -0
- package/dist/sms.d.ts +1 -1
- package/dist/sms.js +1 -1
- package/dist/{template-_QE_rQND.d.ts → template-DMPwxMSq.d.ts} +2 -2
- package/dist/{template.js → template-zLUjcwfF.js} +2 -2
- package/dist/{theme-css-hFqcPSar.js → theme-css-CEUrDpqq.js} +3 -3
- package/dist/whatsapp.d.ts +1 -1
- package/dist/whatsapp.js +1 -1
- package/generated/contract.json +18 -12
- package/generated/reference.md +19 -12
- package/package.json +39 -122
- package/samva-brand.d.ts +4 -4
- package/skills/sml/SKILL.md +2 -2
- package/dist/assets-C5duwTya.d.ts +0 -40
- package/dist/brand-B-0bN_Ir.d.ts +0 -88
- package/dist/channel-edit.d.ts +0 -121
- package/dist/channel-specs-B6M_HlaV.js +0 -29
- package/dist/compatibility-DbISoFIq.js +0 -589
- package/dist/css-BVQKICKC.d.ts +0 -109
- package/dist/diagnostic-codes.d.ts +0 -403
- package/dist/diagnostic-codes.js +0 -399
- package/dist/email/assets.d.ts +0 -2
- package/dist/email/assets.js +0 -63
- package/dist/email/brand-footer.d.ts +0 -34
- package/dist/email/brand-footer.js +0 -63
- package/dist/email/brand.d.ts +0 -2
- package/dist/email/brand.js +0 -148
- package/dist/email/diagnostics.d.ts +0 -2
- package/dist/email/elements.d.ts +0 -2
- package/dist/email/elements.js +0 -299
- package/dist/email/html.d.ts +0 -2
- package/dist/email/html.js +0 -321
- package/dist/email/render.d.ts +0 -40
- package/dist/email/text.d.ts +0 -7
- package/dist/email/text.js +0 -100
- package/dist/html-BJepOwZ4.d.ts +0 -56
- package/dist/ir-aaqNE987.d.ts +0 -252
- package/dist/ir.d.ts +0 -2
- package/dist/ir.js +0 -7
- package/dist/preview-Ekdg1dXG.d.ts +0 -100
- package/dist/preview.d.ts +0 -2
- package/dist/preview.js +0 -160
- package/dist/render-ir.d.ts +0 -19
- package/dist/render-ir.js +0 -826
- package/dist/sms-segments.d.ts +0 -13
- package/dist/sms-segments.js +0 -46
- package/dist/source-edit.d.ts +0 -116
- package/dist/source-edit.js +0 -343
- package/dist/source-locations.d.ts +0 -2
- package/dist/source-locations.js +0 -16
- package/dist/static.d.ts +0 -57
- package/dist/static.js +0 -69
- package/dist/tailwind-CMYpZf1v.js +0 -614
- package/dist/template.d.ts +0 -2
- package/dist/theme-css.js +0 -2
- package/dist/theme-imports-lvBw3AD1.js +0 -109
- package/dist/transform-Ct2OMkFN.d.ts +0 -153
- package/dist/unsubscribe-link-CoesnQDU.js +0 -26
|
@@ -1,589 +0,0 @@
|
|
|
1
|
-
import { assetEntry, assetUrl, checkAssetBase, isAssetPath } from "./email/assets.js";
|
|
2
|
-
import { EmailCompileError } from "./email/diagnostics.js";
|
|
3
|
-
import { buildLineMap, lineColumn } from "./diagnostics.js";
|
|
4
|
-
import { c as parseBrandCss, i as brandTailwindCss } from "./theme-css-hFqcPSar.js";
|
|
5
|
-
import { BRAND_COMPONENT_CLASSES } from "./email/brand.js";
|
|
6
|
-
import { a as parseStylesheet, n as discoverClassCandidates, t as compileTailwind } from "./tailwind-CMYpZf1v.js";
|
|
7
|
-
import { a as resolveThemeImports, i as resolveFromDirectory, n as parseBrandSpecifier, r as projectDirectory } from "./theme-imports-lvBw3AD1.js";
|
|
8
|
-
import { generate, parse, walk } from "css-tree";
|
|
9
|
-
import { caniemail, parseHtml, rawData } from "caniemail";
|
|
10
|
-
//#region src/email/transform.ts
|
|
11
|
-
const SCRIPT = /\.[cm]?[jt]sx?$/;
|
|
12
|
-
/**
|
|
13
|
-
* The project path a stylesheet URL names, resolved from the stylesheet's own
|
|
14
|
-
* directory (a leading `/` means the project root), or `undefined` when it
|
|
15
|
-
* climbs out of the project.
|
|
16
|
-
*/
|
|
17
|
-
const resolveProjectPath = (from, reference) => resolveFromDirectory(projectDirectory(from), reference.replace(/[?#].*$/, ""));
|
|
18
|
-
const readStylesheet = (id, source, options, assets = /* @__PURE__ */ new Map(), themeImports = false) => {
|
|
19
|
-
const sheet = parseStylesheet(source, {
|
|
20
|
-
origin: id,
|
|
21
|
-
themeImports,
|
|
22
|
-
resolveFontFile: (reference) => {
|
|
23
|
-
const path = resolveProjectPath(id, reference);
|
|
24
|
-
const entry = path === void 0 ? void 0 : assets.get(path);
|
|
25
|
-
return entry === void 0 ? void 0 : assetUrl(entry, options.assetBase);
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
return {
|
|
29
|
-
sheet: {
|
|
30
|
-
rules: sheet.rules,
|
|
31
|
-
headAtRules: sheet.headAtRules,
|
|
32
|
-
fontFaces: sheet.fontFaces,
|
|
33
|
-
variables: sheet.variables,
|
|
34
|
-
diagnostics: []
|
|
35
|
-
},
|
|
36
|
-
diagnostics: sheet.diagnostics
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
/**
|
|
40
|
-
* Read one project file. A stylesheet is parsed, with its `@font-face` sources resolved against
|
|
41
|
-
* `assets`, the project's addressed files by path. An imported binary is content-addressed. A
|
|
42
|
-
* script contributes the utility classes it states literally.
|
|
43
|
-
*/
|
|
44
|
-
const readFile = async (id, source, options, assets) => {
|
|
45
|
-
if (isAssetPath(id)) {
|
|
46
|
-
const bytes = typeof source === "string" ? new TextEncoder().encode(source) : source;
|
|
47
|
-
return {
|
|
48
|
-
asset: await assetEntry(id, bytes),
|
|
49
|
-
diagnostics: checkAssetBase(options.assetBase)
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
const text = typeof source === "string" ? source : new TextDecoder().decode(source);
|
|
53
|
-
if (id.endsWith(".css")) return readStylesheet(id, text, options, assets);
|
|
54
|
-
if (!SCRIPT.test(id)) return { diagnostics: [] };
|
|
55
|
-
const discovered = options.tailwind === false ? void 0 : discoverClassCandidates(text, id);
|
|
56
|
-
return {
|
|
57
|
-
classes: discovered?.candidates,
|
|
58
|
-
diagnostics: discovered?.diagnostics ?? []
|
|
59
|
-
};
|
|
60
|
-
};
|
|
61
|
-
/** The Tailwind sheet's stylesheet origin. */
|
|
62
|
-
const TAILWIND_ORIGIN = ".samva-tailwind.css";
|
|
63
|
-
/** `samva:brand` / `samva:brand/<slug>` as a module specifier in an import or export. */
|
|
64
|
-
const BRAND_MODULE_SPECIFIER = /(\b(?:from|import)\s*\(?\s*)(["'])(samva:brand(?:\/[a-z0-9](?:[a-z0-9-]{0,62}[a-z0-9])?)?)\2/g;
|
|
65
|
-
/** The `samva:brand` specifiers a script imports, with where it asks for each. */
|
|
66
|
-
const scriptBrandImports = (path, source) => {
|
|
67
|
-
const lines = buildLineMap(source);
|
|
68
|
-
return [...source.matchAll(BRAND_MODULE_SPECIFIER)].map((match) => {
|
|
69
|
-
const at = lineColumn(lines, match.index + match[1].length);
|
|
70
|
-
return {
|
|
71
|
-
specifier: match[3],
|
|
72
|
-
origin: {
|
|
73
|
-
fileName: path,
|
|
74
|
-
lineNumber: at.line,
|
|
75
|
-
columnNumber: at.column
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
});
|
|
79
|
-
};
|
|
80
|
-
/**
|
|
81
|
-
* The `samva:brand` specifier a project imports — from its theme's `@import`s
|
|
82
|
-
* or its TSX — so a host can fetch that brand before it compiles. `undefined`
|
|
83
|
-
* when the project imports no brand. A project that names two brands gets the
|
|
84
|
-
* first here and a refusal from the compile.
|
|
85
|
-
*/
|
|
86
|
-
const projectBrandSpecifier = (files, themePath = "theme.css") => {
|
|
87
|
-
const theme = files[themePath];
|
|
88
|
-
const fromTheme = typeof theme === "string" ? resolveThemeImports(themePath, theme, files).brandSpecifiers : [];
|
|
89
|
-
const fromScripts = Object.keys(files).sort().filter((path) => SCRIPT.test(path) && typeof files[path] === "string").flatMap((path) => scriptBrandImports(path, files[path])).map((request) => request.specifier);
|
|
90
|
-
return [...fromTheme, ...fromScripts][0];
|
|
91
|
-
};
|
|
92
|
-
/**
|
|
93
|
-
* The theme stylesheet's `@import` graph and the brand the project reaches,
|
|
94
|
-
* resolved before anything compiles. An import the compiler cannot resolve, a
|
|
95
|
-
* brand the build was not given, two different brands, or a brand theme
|
|
96
|
-
* outside its grammar refuses the whole compile: a theme that silently lost a
|
|
97
|
-
* layer would ship the wrong look.
|
|
98
|
-
*/
|
|
99
|
-
const resolveTheme = (files, tailwind, brand) => {
|
|
100
|
-
const refusals = [];
|
|
101
|
-
const css = tailwind?.css;
|
|
102
|
-
const themePath = tailwind?.cssPath ?? "theme.css";
|
|
103
|
-
const imports = css === void 0 ? void 0 : resolveThemeImports(themePath, css, files);
|
|
104
|
-
refusals.push(...imports?.diagnostics ?? []);
|
|
105
|
-
const themeOrigin = {
|
|
106
|
-
fileName: themePath,
|
|
107
|
-
lineNumber: 1,
|
|
108
|
-
columnNumber: 1
|
|
109
|
-
};
|
|
110
|
-
const cssRequests = (imports?.brandSpecifiers ?? []).map((specifier) => ({
|
|
111
|
-
specifier,
|
|
112
|
-
origin: themeOrigin
|
|
113
|
-
}));
|
|
114
|
-
const scriptRequests = Object.keys(files).sort().filter((path) => SCRIPT.test(path) && typeof files[path] === "string").flatMap((path) => scriptBrandImports(path, files[path]));
|
|
115
|
-
const requests = [...cssRequests, ...scriptRequests];
|
|
116
|
-
const specifiers = [...new Set(requests.map((request) => request.specifier))];
|
|
117
|
-
if (specifiers.length > 1) refusals.push({
|
|
118
|
-
code: "brand-import-conflict",
|
|
119
|
-
severity: "error",
|
|
120
|
-
message: `The project imports ${specifiers.join(" and ")}; a project compiles against one brand.`,
|
|
121
|
-
origins: requests.map((request) => request.origin)
|
|
122
|
-
});
|
|
123
|
-
else if (specifiers.length === 1) {
|
|
124
|
-
const specifier = specifiers[0];
|
|
125
|
-
const named = parseBrandSpecifier(specifier)?.slug;
|
|
126
|
-
const origins = [requests[0].origin];
|
|
127
|
-
if (brand === void 0) refusals.push({
|
|
128
|
-
code: "brand-unavailable",
|
|
129
|
-
severity: "error",
|
|
130
|
-
message: `${origins[0].fileName} imports ${specifier}, but this build has no brand to resolve it.`,
|
|
131
|
-
origins
|
|
132
|
-
});
|
|
133
|
-
else if (named !== void 0 && named !== brand.slug) refusals.push({
|
|
134
|
-
code: "brand-unavailable",
|
|
135
|
-
severity: "error",
|
|
136
|
-
message: `${origins[0].fileName} imports ${specifier}, but this build resolved brand ${brand.slug}.`,
|
|
137
|
-
origins
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
let brandCss;
|
|
141
|
-
if (refusals.length === 0 && brand !== void 0 && cssRequests.length > 0) {
|
|
142
|
-
const parsed = parseBrandCss(brand.css);
|
|
143
|
-
if (parsed.isOk()) brandCss = brandTailwindCss(parsed.value);
|
|
144
|
-
else {
|
|
145
|
-
const lines = buildLineMap(brand.css);
|
|
146
|
-
const specifier = cssRequests[0].specifier;
|
|
147
|
-
for (const finding of parsed.error) {
|
|
148
|
-
const at = lineColumn(lines, finding.span.start);
|
|
149
|
-
refusals.push({
|
|
150
|
-
code: finding.code,
|
|
151
|
-
severity: "error",
|
|
152
|
-
message: `${specifier}: ${finding.message}`,
|
|
153
|
-
origins: [{
|
|
154
|
-
fileName: specifier,
|
|
155
|
-
lineNumber: at.line,
|
|
156
|
-
columnNumber: at.column
|
|
157
|
-
}]
|
|
158
|
-
});
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
if (refusals.length > 0) throw new EmailCompileError({ diagnostics: refusals });
|
|
163
|
-
return {
|
|
164
|
-
stylesheets: imports?.stylesheets ?? /* @__PURE__ */ new Map(),
|
|
165
|
-
brandCss,
|
|
166
|
-
brandModule: scriptRequests.length > 0 ? brand : void 0
|
|
167
|
-
};
|
|
168
|
-
};
|
|
169
|
-
/** Read a whole project, then compile the classes its scripts used. */
|
|
170
|
-
const transformProject = async (files, options) => {
|
|
171
|
-
const assets = [];
|
|
172
|
-
const diagnostics = [];
|
|
173
|
-
const stylesheets = /* @__PURE__ */ new Map();
|
|
174
|
-
const classes = /* @__PURE__ */ new Set();
|
|
175
|
-
const wanted = options.tailwind === false ? void 0 : options.tailwind ?? {};
|
|
176
|
-
const theme = resolveTheme(files, wanted, options.brand);
|
|
177
|
-
if (theme.brandModule !== void 0) for (const name of BRAND_COMPONENT_CLASSES) classes.add(name);
|
|
178
|
-
const paths = Object.keys(files).sort();
|
|
179
|
-
const binaries = new Map(await Promise.all(paths.filter(isAssetPath).map(async (path) => [path, await readFile(path, files[path], options)])));
|
|
180
|
-
const addressed = new Map([...binaries].flatMap(([path, reading]) => reading.asset === void 0 ? [] : [[path, reading.asset]]));
|
|
181
|
-
const readings = await Promise.all(paths.map((path) => binaries.get(path) ?? (theme.stylesheets.has(path) ? readStylesheet(path, theme.stylesheets.get(path), options, addressed, true) : readFile(path, files[path], options, addressed))));
|
|
182
|
-
for (const [index, path] of paths.entries()) {
|
|
183
|
-
const reading = readings[index];
|
|
184
|
-
if (reading.asset !== void 0) assets.push(reading.asset);
|
|
185
|
-
if (reading.sheet !== void 0) stylesheets.set(path, reading.sheet);
|
|
186
|
-
for (const name of reading.classes ?? []) classes.add(name);
|
|
187
|
-
diagnostics.push(...reading.diagnostics);
|
|
188
|
-
}
|
|
189
|
-
if (wanted === void 0 || classes.size === 0 && (wanted.safelist?.length ?? 0) === 0 && wanted.css === void 0) return {
|
|
190
|
-
assets,
|
|
191
|
-
tailwindSheet: void 0,
|
|
192
|
-
stylesheets,
|
|
193
|
-
diagnostics
|
|
194
|
-
};
|
|
195
|
-
const compiled = await compileTailwind(classes, wanted, theme);
|
|
196
|
-
const generated = readStylesheet(TAILWIND_ORIGIN, compiled.css, options, addressed);
|
|
197
|
-
const findingKey = (diagnostic) => `${diagnostic.code}\0${diagnostic.message.slice(diagnostic.message.indexOf(": ") + 2)}`;
|
|
198
|
-
const reported = new Set(diagnostics.map(findingKey));
|
|
199
|
-
for (const diagnostic of generated.diagnostics) if (diagnostic.code.startsWith("email-font-") && !reported.has(findingKey(diagnostic))) diagnostics.push(diagnostic);
|
|
200
|
-
return {
|
|
201
|
-
assets,
|
|
202
|
-
tailwindSheet: generated.sheet,
|
|
203
|
-
stylesheets,
|
|
204
|
-
diagnostics
|
|
205
|
-
};
|
|
206
|
-
};
|
|
207
|
-
//#endregion
|
|
208
|
-
//#region src/email/compatibility-assessment.ts
|
|
209
|
-
const VERIFIED_VALUES = /^(?:left|right|center|justify)$/i;
|
|
210
|
-
const SIMPLE_COLOR = /^(?:#[\da-f]{3,8}|rgba?\([^()]+\)|transparent|white|black)$/i;
|
|
211
|
-
/**
|
|
212
|
-
* A feature matrix establishes support, not the effect on a particular message.
|
|
213
|
-
* These rules interpret the pinned caniemail@2.0.2 limitations using emitted
|
|
214
|
-
* values. Unresolved layout, fallback and client-account behavior stays unverified.
|
|
215
|
-
*/
|
|
216
|
-
const assessCompatibility = (title, client, support, context, blocking) => {
|
|
217
|
-
const result = (assessment, heading, explanation) => ({
|
|
218
|
-
assessment,
|
|
219
|
-
title: heading,
|
|
220
|
-
explanation
|
|
221
|
-
});
|
|
222
|
-
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.");
|
|
223
|
-
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.");
|
|
224
|
-
const explained = context.explanation(title, client, support);
|
|
225
|
-
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);
|
|
226
|
-
const declarations = (property) => context.declarations(property);
|
|
227
|
-
const every = (property, predicate) => {
|
|
228
|
-
const values = declarations(property);
|
|
229
|
-
return context.complete && values.length > 0 && values.every(({ value }) => predicate(value));
|
|
230
|
-
};
|
|
231
|
-
const attributesAvoid = (attribute, unsupportedElement) => {
|
|
232
|
-
const values = context.attributes(attribute);
|
|
233
|
-
return values.length > 0 && values.every(({ element }) => element !== unsupportedElement);
|
|
234
|
-
};
|
|
235
|
-
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.");
|
|
236
|
-
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.");
|
|
237
|
-
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.");
|
|
238
|
-
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.");
|
|
239
|
-
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.");
|
|
240
|
-
if (title === "background") {
|
|
241
|
-
const values = [...declarations("background"), ...declarations("background-color")];
|
|
242
|
-
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.");
|
|
243
|
-
}
|
|
244
|
-
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.");
|
|
245
|
-
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.");
|
|
246
|
-
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.");
|
|
247
|
-
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.");
|
|
248
|
-
if (title === "font-weight" && support === "partial") {
|
|
249
|
-
const pattern = client === "outlook.windows" ? /^(?:normal|bold|400|700)$/i : /^(?:normal|bold|[1-9]00)$/i;
|
|
250
|
-
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.");
|
|
251
|
-
return result("degradation", "Font weight may be approximated", "This client may substitute a supported weight. Text remains present, but its emphasis can look different.");
|
|
252
|
-
}
|
|
253
|
-
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.");
|
|
254
|
-
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.");
|
|
255
|
-
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.");
|
|
256
|
-
return result("unverified", {
|
|
257
|
-
"<body> element": "Body styling needs a client check",
|
|
258
|
-
border: "Borders need an Outlook check",
|
|
259
|
-
"color-scheme meta tag": "Dark appearance needs a client check",
|
|
260
|
-
display: "Display behavior needs a client check",
|
|
261
|
-
"display:none": "Hidden content needs an Outlook check",
|
|
262
|
-
"height attribute": "Image sizing needs a high-DPI Outlook check",
|
|
263
|
-
"height property": "Element heights need a client check",
|
|
264
|
-
"line-height": "Line spacing needs an Outlook check",
|
|
265
|
-
margin: "Outer spacing needs a client check",
|
|
266
|
-
"max-height property": "Height limits need an Outlook check",
|
|
267
|
-
"max-width": "Width limits need a client check",
|
|
268
|
-
"@media": "Conditional styles need a client check",
|
|
269
|
-
opacity: "Transparent content needs an Outlook check",
|
|
270
|
-
overflow: "Clipped content needs a client check",
|
|
271
|
-
"overflow-wrap": "Long text wrapping needs a client check",
|
|
272
|
-
padding: "Cell spacing needs an Outlook check",
|
|
273
|
-
"<style> element": "Retained styles need a client check",
|
|
274
|
-
"text-decoration": "Link decoration needs a client check",
|
|
275
|
-
"width attribute": "Image sizing needs a high-DPI Outlook check",
|
|
276
|
-
"width property": "Element widths need an Outlook check",
|
|
277
|
-
"word-break": "Word breaking needs a client check"
|
|
278
|
-
}[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.");
|
|
279
|
-
};
|
|
280
|
-
//#endregion
|
|
281
|
-
//#region src/email/compatibility-context.ts
|
|
282
|
-
const NON_HIDING_VALUES = {
|
|
283
|
-
"mso-hide": /^none$/,
|
|
284
|
-
visibility: /^visible$/,
|
|
285
|
-
opacity: /^(?:1(?:\.0+)?|100(?:\.0+)?%)$/,
|
|
286
|
-
overflow: /^visible$/,
|
|
287
|
-
"overflow-y": /^visible$/,
|
|
288
|
-
"overflow-x": /^visible$/,
|
|
289
|
-
clip: /^auto$/,
|
|
290
|
-
"clip-path": /^none$/
|
|
291
|
-
};
|
|
292
|
-
const POSITIVE_FIXED_HEIGHT = /^(?:\d+(?:\.\d+)?|\.\d+)(?:px|pt|pc|in|cm|mm)$/;
|
|
293
|
-
/** Evidence from actual declarations and elements, never a text match in email content. */
|
|
294
|
-
const compatibilityContext = (html, css) => {
|
|
295
|
-
const declarations = /* @__PURE__ */ new Map();
|
|
296
|
-
const attributes = /* @__PURE__ */ new Map();
|
|
297
|
-
const elements = /* @__PURE__ */ new Map();
|
|
298
|
-
let complete = true;
|
|
299
|
-
let unresolvedStyles = false;
|
|
300
|
-
const hiddenContentOffsets = [];
|
|
301
|
-
const addCss = (source, context, offset, element) => {
|
|
302
|
-
const inline = /* @__PURE__ */ new Map();
|
|
303
|
-
if (context === "stylesheet" && source.trim() !== "") unresolvedStyles = true;
|
|
304
|
-
try {
|
|
305
|
-
const ast = parse(source, { context });
|
|
306
|
-
walk(ast, (node) => {
|
|
307
|
-
if (node.type === "Raw") complete = false;
|
|
308
|
-
if (node.type !== "Declaration") return;
|
|
309
|
-
const property = node.property.toLowerCase();
|
|
310
|
-
const entries = declarations.get(property) ?? [];
|
|
311
|
-
const value = generate(node.value);
|
|
312
|
-
entries.push({
|
|
313
|
-
value,
|
|
314
|
-
offset,
|
|
315
|
-
element
|
|
316
|
-
});
|
|
317
|
-
if (!inline.get(property)?.important || node.important) inline.set(property, {
|
|
318
|
-
value: value.toLowerCase(),
|
|
319
|
-
important: Boolean(node.important)
|
|
320
|
-
});
|
|
321
|
-
declarations.set(property, entries);
|
|
322
|
-
});
|
|
323
|
-
} catch {
|
|
324
|
-
complete = false;
|
|
325
|
-
}
|
|
326
|
-
return inline;
|
|
327
|
-
};
|
|
328
|
-
const { document } = parseHtml(html);
|
|
329
|
-
const visit = (node, ancestors = []) => {
|
|
330
|
-
let descendants = ancestors;
|
|
331
|
-
if (node.type === "comment" && /\[if\b/i.test(node.data)) unresolvedStyles = true;
|
|
332
|
-
if ("attribs" in node) {
|
|
333
|
-
const offset = node.startIndex ?? void 0;
|
|
334
|
-
if (offset !== void 0) {
|
|
335
|
-
const entries = elements.get(node.name) ?? [];
|
|
336
|
-
entries.push(offset);
|
|
337
|
-
elements.set(node.name, entries);
|
|
338
|
-
}
|
|
339
|
-
for (const [name, value] of Object.entries(node.attribs)) {
|
|
340
|
-
const entries = attributes.get(name) ?? [];
|
|
341
|
-
entries.push({
|
|
342
|
-
value,
|
|
343
|
-
offset,
|
|
344
|
-
element: node.name
|
|
345
|
-
});
|
|
346
|
-
attributes.set(name, entries);
|
|
347
|
-
}
|
|
348
|
-
const styles = node.attribs.style === void 0 ? /* @__PURE__ */ new Map() : addCss(node.attribs.style, "declarationList", offset, node.name);
|
|
349
|
-
descendants = [...ancestors, {
|
|
350
|
-
offset,
|
|
351
|
-
styles
|
|
352
|
-
}];
|
|
353
|
-
const fallback = descendants.some(({ styles: candidate }) => {
|
|
354
|
-
const candidateDisplay = candidate.get("display")?.value;
|
|
355
|
-
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]) => {
|
|
356
|
-
const value = candidate.get(property)?.value;
|
|
357
|
-
return value !== void 0 && !neutral.test(value);
|
|
358
|
-
}) || ["height", "max-height"].some((property) => {
|
|
359
|
-
const value = candidate.get(property)?.value;
|
|
360
|
-
return value !== void 0 && value !== (property === "height" ? "auto" : "none") && !(POSITIVE_FIXED_HEIGHT.test(value) && Number.parseFloat(value) > 0);
|
|
361
|
-
});
|
|
362
|
-
});
|
|
363
|
-
const hiddenAncestor = ancestors.find(({ styles: candidate }) => candidate.get("display")?.value === "none");
|
|
364
|
-
const display = styles.get("display")?.value;
|
|
365
|
-
if (!fallback && node.name === "img" && display === "none" && hiddenAncestor === void 0 && offset !== void 0) hiddenContentOffsets.push(offset);
|
|
366
|
-
if (!fallback && node.name === "table" && hiddenAncestor !== void 0 && display === void 0 && hiddenAncestor.offset !== void 0) hiddenContentOffsets.push(hiddenAncestor.offset);
|
|
367
|
-
if (node.name === "style") {
|
|
368
|
-
for (const child of node.children) if (child.type === "text") addCss(child.data, "stylesheet");
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
if ("children" in node) for (const child of node.children) visit(child, descendants);
|
|
372
|
-
};
|
|
373
|
-
for (const child of document.children) visit(child);
|
|
374
|
-
if (css !== void 0) addCss(css, "stylesheet");
|
|
375
|
-
const everyValue = (property, predicate) => {
|
|
376
|
-
const entries = declarations.get(property);
|
|
377
|
-
return complete && entries !== void 0 && entries.length > 0 && entries.every(({ value }) => predicate(value));
|
|
378
|
-
};
|
|
379
|
-
return {
|
|
380
|
-
/** Known hidden-content failures; unresolved cascade or fallback evidence cannot block. */
|
|
381
|
-
get hiddenContentOffsets() {
|
|
382
|
-
return complete && !unresolvedStyles ? [...new Set(hiddenContentOffsets)] : [];
|
|
383
|
-
},
|
|
384
|
-
/** Incomplete CSS cannot prove that every occurrence avoids a limitation. */
|
|
385
|
-
get complete() {
|
|
386
|
-
return complete;
|
|
387
|
-
},
|
|
388
|
-
declarations(property) {
|
|
389
|
-
return declarations.get(property) ?? [];
|
|
390
|
-
},
|
|
391
|
-
attributes(name) {
|
|
392
|
-
return attributes.get(name) ?? [];
|
|
393
|
-
},
|
|
394
|
-
/** Bounded exceptions to caniemail@2.0.2's feature-wide matrix, tied to its client rules. */
|
|
395
|
-
explanation(title, client, support) {
|
|
396
|
-
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.";
|
|
397
|
-
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.";
|
|
398
|
-
if (title === "target attribute" && [
|
|
399
|
-
"gmail.desktop-webmail",
|
|
400
|
-
"gmail.ios",
|
|
401
|
-
"gmail.android",
|
|
402
|
-
"outlook.outlook-com",
|
|
403
|
-
"yahoo.desktop-webmail",
|
|
404
|
-
"outlook.windows",
|
|
405
|
-
"apple-mail.macos",
|
|
406
|
-
"apple-mail.ios"
|
|
407
|
-
].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.";
|
|
408
|
-
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.";
|
|
409
|
-
},
|
|
410
|
-
offsets(title) {
|
|
411
|
-
const element = /^<([a-z0-9]+)> element$/i.exec(title);
|
|
412
|
-
if (element !== null) return elements.get(element[1]) ?? [];
|
|
413
|
-
const attribute = /^([a-z-]+) attribute$/i.exec(title);
|
|
414
|
-
const entries = attribute !== null ? attributes.get(attribute[1]) : declarations.get(title.startsWith("system-ui,") ? "font-family" : title.replace(/ property$/, ""));
|
|
415
|
-
return [...new Set(entries?.flatMap(({ offset }) => offset === void 0 ? [] : [offset]) ?? [])];
|
|
416
|
-
}
|
|
417
|
-
};
|
|
418
|
-
};
|
|
419
|
-
//#endregion
|
|
420
|
-
//#region src/email/compatibility.ts
|
|
421
|
-
/**
|
|
422
|
-
* The pinned matrix. Every finding is reported per client, and a client absent
|
|
423
|
-
* from this list is a client Samva makes no claim about.
|
|
424
|
-
*/
|
|
425
|
-
const EMAIL_CLIENT_MATRIX = [
|
|
426
|
-
{
|
|
427
|
-
id: "gmail.desktop-webmail",
|
|
428
|
-
label: "Gmail web"
|
|
429
|
-
},
|
|
430
|
-
{
|
|
431
|
-
id: "gmail.ios",
|
|
432
|
-
label: "Gmail iOS"
|
|
433
|
-
},
|
|
434
|
-
{
|
|
435
|
-
id: "gmail.android",
|
|
436
|
-
label: "Gmail Android"
|
|
437
|
-
},
|
|
438
|
-
{
|
|
439
|
-
id: "apple-mail.macos",
|
|
440
|
-
label: "Apple Mail macOS"
|
|
441
|
-
},
|
|
442
|
-
{
|
|
443
|
-
id: "apple-mail.ios",
|
|
444
|
-
label: "Apple Mail iOS"
|
|
445
|
-
},
|
|
446
|
-
{
|
|
447
|
-
id: "yahoo.desktop-webmail",
|
|
448
|
-
label: "Yahoo web"
|
|
449
|
-
},
|
|
450
|
-
{
|
|
451
|
-
id: "outlook.outlook-com",
|
|
452
|
-
label: "Outlook web and new Windows"
|
|
453
|
-
},
|
|
454
|
-
{
|
|
455
|
-
id: "outlook.windows",
|
|
456
|
-
label: "Outlook classic Windows"
|
|
457
|
-
}
|
|
458
|
-
];
|
|
459
|
-
const LABELS = new Map(EMAIL_CLIENT_MATRIX.map((target) => [target.id, target.label]));
|
|
460
|
-
const COMPATIBILITY_PROVENANCE = {
|
|
461
|
-
rules: "caniemail@2.0.2",
|
|
462
|
-
apiVersion: rawData.api_version,
|
|
463
|
-
lastUpdate: rawData.last_update_date
|
|
464
|
-
};
|
|
465
|
-
/**
|
|
466
|
-
* The constructs whose loss actually breaks a message: the recipient reads
|
|
467
|
-
* something different, in a different order, follows a link that does not work,
|
|
468
|
-
* or sees a layout that has collapsed. A target client dropping one of these
|
|
469
|
-
* blocks publication.
|
|
470
|
-
*
|
|
471
|
-
* The list is deliberately short and enumerated, because the contract is to
|
|
472
|
-
* block *known* failures. Nonessential differences require an assessment of
|
|
473
|
-
* emitted values: a concrete risk warns, expected differences and unverified
|
|
474
|
-
* behavior remain compatibility observations.
|
|
475
|
-
*/
|
|
476
|
-
const ESSENTIAL_CONSTRUCTS = /* @__PURE__ */ new Set([
|
|
477
|
-
"<table> element",
|
|
478
|
-
"<div> element",
|
|
479
|
-
"<p> element",
|
|
480
|
-
"<span> element",
|
|
481
|
-
"<ul>, <ol> and <dl>",
|
|
482
|
-
"<h1> to <h6> elements",
|
|
483
|
-
"HTML5 doctype",
|
|
484
|
-
"width attribute",
|
|
485
|
-
"height attribute",
|
|
486
|
-
"align attribute",
|
|
487
|
-
"valign attribute",
|
|
488
|
-
"<img> element",
|
|
489
|
-
"display",
|
|
490
|
-
"mailto: links",
|
|
491
|
-
"Local anchors"
|
|
492
|
-
]);
|
|
493
|
-
const KNOWN_TITLES = new Set(rawData.data.map((feature) => feature.title));
|
|
494
|
-
/** The innermost recorded node containing an offset, so a finding names its element. */
|
|
495
|
-
const originsAt = (positions, offset) => {
|
|
496
|
-
let best;
|
|
497
|
-
for (const position of positions) {
|
|
498
|
-
if (offset < position.start || offset >= position.end) continue;
|
|
499
|
-
if (best === void 0 || position.end - position.start < best.end - best.start) best = position;
|
|
500
|
-
}
|
|
501
|
-
return best?.origins ?? [];
|
|
502
|
-
};
|
|
503
|
-
const slug = (title) => title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
|
|
504
|
-
/**
|
|
505
|
-
* Check the emitted document against the pinned matrix.
|
|
506
|
-
*
|
|
507
|
-
* Findings are grouped by construct rather than repeated per client, so one
|
|
508
|
-
* unsupported property is one diagnostic naming every client that drops it.
|
|
509
|
-
*/
|
|
510
|
-
const checkEmailCompatibility = (input) => {
|
|
511
|
-
const targets = input.clients ?? EMAIL_CLIENT_MATRIX;
|
|
512
|
-
const context = compatibilityContext(input.html, input.css);
|
|
513
|
-
const targetClients = targets.map((target) => target.id);
|
|
514
|
-
const reports = [caniemail({
|
|
515
|
-
clients: targetClients,
|
|
516
|
-
html: input.html
|
|
517
|
-
}), ...input.css === void 0 ? [] : [caniemail({
|
|
518
|
-
clients: targetClients,
|
|
519
|
-
css: input.css
|
|
520
|
-
})]];
|
|
521
|
-
const grouped = /* @__PURE__ */ new Map();
|
|
522
|
-
for (const bucket of reports.flatMap((report) => [report.issues.errors, report.issues.warnings])) for (const [client, issues] of bucket) {
|
|
523
|
-
const label = LABELS.get(client) ?? client;
|
|
524
|
-
for (const raw of issues) {
|
|
525
|
-
const hiddenContentFailure = client === "outlook.windows" && raw.support === "partial" && (raw.title === "display" || raw.title === "display:none") && context.hiddenContentOffsets.length > 0;
|
|
526
|
-
const blocking = hiddenContentFailure || raw.support !== "partial" && ESSENTIAL_CONSTRUCTS.has(raw.title);
|
|
527
|
-
const { explanation, ...compatibility } = assessCompatibility(raw.title, client, raw.support, context, blocking);
|
|
528
|
-
const key = JSON.stringify([
|
|
529
|
-
raw.title,
|
|
530
|
-
raw.support,
|
|
531
|
-
compatibility,
|
|
532
|
-
explanation
|
|
533
|
-
]);
|
|
534
|
-
const offsets = hiddenContentFailure ? context.hiddenContentOffsets : context.offsets(raw.title);
|
|
535
|
-
const entry = grouped.get(key);
|
|
536
|
-
if (entry === void 0) grouped.set(key, {
|
|
537
|
-
title: raw.title,
|
|
538
|
-
support: raw.support,
|
|
539
|
-
clients: /* @__PURE__ */ new Set([label]),
|
|
540
|
-
notes: new Set(raw.notes),
|
|
541
|
-
explanation,
|
|
542
|
-
compatibility,
|
|
543
|
-
blocking,
|
|
544
|
-
offsets
|
|
545
|
-
});
|
|
546
|
-
else {
|
|
547
|
-
entry.clients.add(label);
|
|
548
|
-
for (const note of raw.notes) entry.notes.add(note);
|
|
549
|
-
}
|
|
550
|
-
}
|
|
551
|
-
}
|
|
552
|
-
const findings = [];
|
|
553
|
-
for (const entry of grouped.values()) {
|
|
554
|
-
const severity = entry.blocking ? "error" : entry.compatibility.assessment === "risk" ? "warning" : "info";
|
|
555
|
-
const occurrences = entry.offsets.map((offset) => originsAt(input.positions ?? [], offset)).filter((origins) => origins.length > 0);
|
|
556
|
-
const clients = [...entry.clients].sort();
|
|
557
|
-
const dropped = entry.support === "partial" ? clients.length === 1 ? "partially supports" : "partially support" : clients.length === 1 ? "does not support" : "do not support";
|
|
558
|
-
findings.push({
|
|
559
|
-
code: `caniemail/${slug(entry.title)}`,
|
|
560
|
-
severity,
|
|
561
|
-
message: `${clients.join(", ")} ${dropped} ${entry.title}. ${entry.explanation}`,
|
|
562
|
-
compatibility: entry.compatibility,
|
|
563
|
-
origins: occurrences[0] ?? [],
|
|
564
|
-
...occurrences.length === 0 ? {} : { occurrences },
|
|
565
|
-
...input.fixture === void 0 ? {} : { fixtures: [input.fixture] },
|
|
566
|
-
clients,
|
|
567
|
-
...entry.notes.size === 0 ? {} : { notes: [...entry.notes].join(" ") },
|
|
568
|
-
provenance: `${COMPATIBILITY_PROVENANCE.rules} (caniemail data ${COMPATIBILITY_PROVENANCE.apiVersion}, updated ${COMPATIBILITY_PROVENANCE.lastUpdate})`
|
|
569
|
-
});
|
|
570
|
-
}
|
|
571
|
-
return findings.sort((left, right) => left.code.localeCompare(right.code));
|
|
572
|
-
};
|
|
573
|
-
/**
|
|
574
|
-
* Constructs the pinned data says nothing about for a target client. These are
|
|
575
|
-
* reported so "we did not check that" is never mistaken for "that works".
|
|
576
|
-
*/
|
|
577
|
-
const unknownCoverage = (titles) => [...titles].filter((title) => !KNOWN_TITLES.has(title)).sort().map((title) => ({
|
|
578
|
-
code: "caniemail/unknown-coverage",
|
|
579
|
-
severity: "info",
|
|
580
|
-
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.`,
|
|
581
|
-
origins: [],
|
|
582
|
-
provenance: `${COMPATIBILITY_PROVENANCE.rules} (caniemail data ${COMPATIBILITY_PROVENANCE.apiVersion}, updated ${COMPATIBILITY_PROVENANCE.lastUpdate})`
|
|
583
|
-
}));
|
|
584
|
-
/** A publication carrying one of these is refused; the message would arrive broken. */
|
|
585
|
-
const hasBlockingCompatibility = (findings) => findings.some((finding) => finding.severity === "error");
|
|
586
|
-
//#endregion
|
|
587
|
-
export { hasBlockingCompatibility as a, transformProject as c, checkEmailCompatibility as i, EMAIL_CLIENT_MATRIX as n, unknownCoverage as o, ESSENTIAL_CONSTRUCTS as r, projectBrandSpecifier as s, COMPATIBILITY_PROVENANCE as t };
|
|
588
|
-
|
|
589
|
-
//# sourceMappingURL=compatibility-DbISoFIq.js.map
|