@emailens/engine 0.10.2 → 0.10.3

package/dist/index.js

@@ -10915,6 +10915,54 @@ function locOfAttr(el, attr) {
   const attrLoc = (_d = (_a = raw.attrs) == null ? void 0 : _a[attr]) != null ? _d : (_c = (_b = raw.startTag) == null ? void 0 : _b.attrs) == null ? void 0 : _c[attr];
   return attrLoc ? toLoc(attrLoc) : locOfElement(el);
 }
+function locInAttr(attrLoc, source, property, occurrence = 0) {
+  if (!attrLoc || !source) return void 0;
+  const raw = source.slice(attrLoc.offset, attrLoc.offset + attrLoc.length);
+  const open = raw.search(/["']/);
+  const close = raw.lastIndexOf(raw[open]);
+  if (open === -1 || close <= open) return void 0;
+  const found = declarationsIn(raw.slice(open + 1, close), property);
+  const hit = found[occurrence];
+  if (!hit) return void 0;
+  const start = attrLoc.offset + open + 1 + hit.start;
+  const end = attrLoc.offset + open + 1 + hit.end;
+  const from = positionOf(source, start);
+  const to = positionOf(source, end);
+  return {
+    line: from.line,
+    column: from.column,
+    endLine: to.line,
+    endColumn: to.column,
+    offset: start,
+    length: end - start
+  };
+}
+function declarationsIn(value, property) {
+  const wanted = property.toLowerCase();
+  const found = [];
+  let depth = 0;
+  let start = 0;
+  const consider = (from, to) => {
+    const text = value.slice(from, to);
+    const colon = text.indexOf(":");
+    if (colon === -1) return;
+    if (text.slice(0, colon).trim().toLowerCase() !== wanted) return;
+    const lead = text.length - text.trimStart().length;
+    const trail = text.length - text.trimEnd().length;
+    if (from + lead < to - trail) found.push({ start: from + lead, end: to - trail });
+  };
+  for (let i = 0; i < value.length; i++) {
+    const c = value[i];
+    if (c === "(") depth++;
+    else if (c === ")") depth = Math.max(0, depth - 1);
+    else if (c === ";" && depth === 0) {
+      consider(start, i);
+      start = i + 1;
+    }
+  }
+  consider(start, value.length);
+  return found;
+}
 function locOfFirst($, selector) {
   const el = $(selector).first()[0];
   return el ? locOfElement(el) : void 0;
@@ -11180,7 +11228,7 @@ function describeSelector($, el) {
   if (cls) return `${tag}.${cls.split(/\s+/)[0]}`;
   return tag;
 }
-function checkDarkModeFromDom($) {
+function checkDarkModeFromDom($, source) {
   var _a, _b;
   const darkBlock = collectDarkBlocks($);
   if (!darkBlock) return [];
@@ -11207,7 +11255,7 @@ function checkDarkModeFromDom($) {
   const coveredByAny = matchedElements($, darkBlock.any);
   let uncovered = 0;
   $("[bgcolor], [style]").each((_, el) => {
-    var _a2;
+    var _a2, _b2;
     if (uncovered >= MAX_UNCOVERED_ELEMENTS) return false;
     const $el = $(el);
     const style = parseInlineStyle($el.attr("style") || "");
@@ -11217,7 +11265,8 @@ function checkDarkModeFromDom($) {
     if (inline ? coveredByImportant.has(el) : coveredByAny.has(el)) return;
     uncovered++;
     const selector = describeSelector($, el);
-    const loc = locOfAttr(el, inline ? "style" : "bgcolor");
+    const attrLoc = locOfAttr(el, inline ? "style" : "bgcolor");
+    const loc = inline ? (_b2 = locInAttr(attrLoc, source, style.get("background-color") !== void 0 ? "background-color" : "background")) != null ? _b2 : attrLoc : attrLoc;
     for (const clientId of PREFERS_COLOR_SCHEME_CLIENTS) {
       warnings.push(__spreadValues({
         severity: "warning",
@@ -11482,18 +11531,37 @@ function analyzeEmailFromDom($, framework, source) {
     const style = $(el).attr("style") || "";
     const props = parseStyleProperties(style);
     const selector = describeSelector2(el);
-    const locs = elementLocs(locOfAttr(el, "style"));
+    const attrLoc = locOfAttr(el, "style");
+    const declarationLocs = (prop, occurrence = 0) => {
+      var _a;
+      return (_a = elementLocs(locInAttr(attrLoc, source, prop, occurrence))) != null ? _a : elementLocs(attrLoc);
+    };
+    const locs = elementLocs(attrLoc);
     for (const prop of props) {
       for (const det of COMPOUND_DETECTORS) {
         if (prop === det.property) {
           const value2 = getStyleValue(style, prop);
           if (value2 == null ? void 0 : value2.toLowerCase().includes(det.valueIncludes)) {
-            checkPropertySupport(det.key, addWarning, framework, selector, void 0, void 0, locs);
+            checkPropertySupport(
+              det.key,
+              addWarning,
+              framework,
+              selector,
+              void 0,
+              void 0,
+              declarationLocs(prop)
+            );
           }
         }
       }
       if (cssPropertiesToCheck.includes(prop)) {
         const declared = getStyleValues(style, prop);
+        const placed = [];
+        declared.forEach((value2, i) => {
+          const at = locInAttr(attrLoc, source, prop, i);
+          if (at) placed.push({ value: value2, loc: at });
+        });
+        const occurrences = placed.length === declared.length && placed.length > 0 ? { locs: placed.map((p) => p.loc), values: placed.map((p) => p.value) } : locs;
         checkPropertySupport(
           prop,
           addWarning,
@@ -11501,14 +11569,22 @@ function analyzeEmailFromDom($, framework, source) {
           selector,
           void 0,
           declared.length ? declared : void 0,
-          locs
+          occurrences
         );
       }
       const value = getStyleValue(style, prop);
       if (value) {
         for (const fn of CSS_FUNCTION_DETECTORS) {
           if (value.includes(fn.pattern)) {
-            checkPropertySupport(fn.key, addWarning, framework, selector, void 0, void 0, locs);
+            checkPropertySupport(
+              fn.key,
+              addWarning,
+              framework,
+              selector,
+              void 0,
+              void 0,
+              declarationLocs(prop)
+            );
           }
         }
       }
@@ -11547,7 +11623,7 @@ function analyzeEmailFromDom($, framework, source) {
   for (const fn of detectedCssFunctions) {
     checkPropertySupport(fn, addWarning, framework, void 0, propertyLines.get(fn), void 0, propertyLocs.get(fn));
   }
-  for (const w of checkDarkModeFromDom($)) addWarning(w);
+  for (const w of checkDarkModeFromDom($, source)) addWarning(w);
   const severityOrder = { error: 0, warning: 1, info: 2 };
   warnings.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity]);
   return warnings;