@seliseblocks/mailcraft 0.1.1 → 0.2.0

package/src/core/binder.js

@@ -1,119 +1,121 @@
-/** Ported verbatim from the original `binder(getProps, set)` and `decorate(list)`. Pure field-descriptor logic, no DOM. */
-export function binder(getProps, set, core) {
-  return {
-    head: (label) => ({ kind: 'head', label }),
-    text: (label, key, ph) => ({ kind: 'text', label, value: getProps()[key] ?? '', placeholder: ph || '', onChange: (v) => set(key, v) }),
-    area: (label, key, ph) => ({ kind: 'area', label, value: getProps()[key] ?? '', placeholder: ph || '', onChange: (v) => set(key, v) }),
-    // Live typing only commits parseable numbers -- `Number('')` is 0, and
-    // committing that the instant a field was cleared to retype (e.g. the
-    // theme's content width collapsing to 0px mid-edit) was one of the
-    // "inputs behave weird" symptoms. Blur settles the final value, clamped.
-    num: (label, key, min, max) => ({
-      kind: 'num', label, value: getProps()[key] ?? 0, min, max,
-      onChange: (v) => { const n = parseFloat(v); if (Number.isFinite(n)) set(key, n); },
-      onBlur: (v) => {
-        if (core && core.rendering) return;
-        const n = parseFloat(v);
-        set(key, Math.min(max, Math.max(min, Number.isFinite(n) ? n : (getProps()[key] ?? min))));
-      },
-    }),
-    color: (label, key) => ({ kind: 'color', label, value: getProps()[key] ?? '', swatch: /^#/.test(getProps()[key] || '') ? getProps()[key] : '#ffffff', onChange: (v) => set(key, v) }),
-    // A native range slider commits on every drag tick -- dozens a second --
-    // and each one used to trigger a full doc clone + re-render (see
-    // `commit`), which is what made dragging feel like stutter instead of a
-    // smooth slide. A stepper sidesteps that class of bug entirely: +/- is a
-    // single discrete commit per click, and typing a value only commits once
-    // you're done (on blur), not per keystroke.
-    range: (label, key, min, max, step, unit) => {
-      const cur = getProps()[key] ?? min;
-      const s = step || 1;
-      const decimals = (String(s).split('.')[1] || '').length;
-      const clamp = (v) => Math.min(max, Math.max(min, v));
-      const round = (v) => Number(v.toFixed(decimals));
-      const commit = (v) => set(key, round(clamp(v)));
-      return {
-        kind: 'range', label, value: cur, min, max, step: s, unit: unit || '', display: cur + (unit || ''),
-        onDec: () => commit(cur - s),
-        onInc: () => commit(cur + s),
-        // Live-typed digits aren't clamped (typing "1" toward "12" with a min
-        // of 10 would otherwise get snapped back to 10 mid-keystroke, making
-        // the second digit impossible to enter) -- only guarded against a
-        // non-numeric intermediate state (e.g. a bare "-").
-        onInput: (v) => { const n = parseFloat(v); if (!Number.isNaN(n)) set(key, n); },
-        // A render tears down and rebuilds the whole panel subtree (no
-        // diffing); removing this still-focused input as part of that forces
-        // a synchronous, spurious `blur` before the rebuilt replacement can
-        // be refocused. Committing on that blur re-renders again, which
-        // tears down and blurs again -- an infinite loop. `core.rendering`
-        // (set for the render()'s duration) tells a real blur apart from
-        // that artifact -- same guard as canvas.js's RTE `onBlur`.
-        onBlur: (v) => { if (core && core.rendering) return; const n = parseFloat(v); commit(Number.isNaN(n) ? cur : n); },
-      };
-    },
-    // A real drag slider, for coarse visual sizing (content width). The
-    // per-tick commit problem that ruled sliders out for ordinary fields
-    // (see `range` above) is sidestepped by contract: the renderer moves the
-    // value bubble live during the drag but only calls `onCommit` on release
-    // ('change'), so a whole drag costs one re-render.
-    slider: (label, key, min, max, step, unit) => ({
-      kind: 'slider', label, value: getProps()[key] ?? min, min, max, step: step || 1, unit: unit || '',
-      onCommit: (v) => { const n = parseFloat(v); if (Number.isFinite(n)) set(key, Math.min(max, Math.max(min, n))); },
-    }),
-    sel: (label, key, opts) => {
-      const options = opts.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
-      const current = getProps()[key];
-      return {
-        kind: 'select', label,
-        // New controls must not render as an unexplained blank on documents
-        // saved before that property existed. The renderer already uses the
-        // first option as its semantic fallback; show that same choice here.
-        value: current == null ? (options[0]?.value ?? '') : current,
-        options,
-        onChange: (v) => set(key, v),
-      };
-    },
-    seg: (label, key, opts) => ({
-      kind: 'seg', label, options: opts.map((o) => {
-        const v = typeof o === 'string' ? o : o.value; const l = typeof o === 'string' ? o : o.label;
-        const on = getProps()[key] === v;
-        return { label: l, bg: on ? 'var(--ed-accent)' : 'transparent', fg: on ? 'var(--ed-accent-ink)' : 'var(--ed-muted)', onClick: () => set(key, v) };
-      }),
-    }),
-    tog: (label, key, defaultOn) => {
-      const raw = getProps()[key];
-      const on = raw === undefined ? !!defaultOn : !!raw;
-      return { kind: 'toggle', label, on, onChange: () => set(key, !on) };
-    },
-    btn: (label, onClick) => ({ kind: 'btn', label, onClick }),
-  };
-}
-
-/**
- * A grid of linked steppers for props that come in sides/corners ("Space
- * inside" top/bottom/left/right). `toggle` ({on, onChange}), when present,
- * renders as the header's "More options" switch that swaps the linked pair
- * for per-side fields; `label: null` drops the header row entirely (the
- * section head above already names the group).
- */
-export function group(label, items, toggle) {
-  return { kind: 'rangeGroup', label, items, toggle: toggle || null };
-}
-
-export function decorate(list) {
-  return list.filter(Boolean).map((f, i) => {
-    const d = Object.assign({}, f, {
-      key: i,
-      isHead: f.kind === 'head', isArea: f.kind === 'area', isBtn: f.kind === 'btn', isSeg: f.kind === 'seg',
+/** Ported verbatim from the original `binder(getProps, set)` and `decorate(list)`. Pure field-descriptor logic, no DOM. */
+export function binder(getProps, set, core) {
+  return {
+    head: (label) => ({ kind: 'head', label }),
+    // `suggestions` (optional array of strings) renders as a datalist on the
+    // input: the user picks one of the host's values or types any other.
+    text: (label, key, ph, suggestions) => ({ kind: 'text', label, value: getProps()[key] ?? '', placeholder: ph || '', suggestions: Array.isArray(suggestions) && suggestions.length ? suggestions : null, onChange: (v) => set(key, v) }),
+    area: (label, key, ph) => ({ kind: 'area', label, value: getProps()[key] ?? '', placeholder: ph || '', onChange: (v) => set(key, v) }),
+    // Live typing only commits parseable numbers -- `Number('')` is 0, and
+    // committing that the instant a field was cleared to retype (e.g. the
+    // theme's content width collapsing to 0px mid-edit) was one of the
+    // "inputs behave weird" symptoms. Blur settles the final value, clamped.
+    num: (label, key, min, max) => ({
+      kind: 'num', label, value: getProps()[key] ?? 0, min, max,
+      onChange: (v) => { const n = parseFloat(v); if (Number.isFinite(n)) set(key, n); },
+      onBlur: (v) => {
+        if (core && core.rendering) return;
+        const n = parseFloat(v);
+        set(key, Math.min(max, Math.max(min, Number.isFinite(n) ? n : (getProps()[key] ?? min))));
+      },
+    }),
+    color: (label, key) => ({ kind: 'color', label, value: getProps()[key] ?? '', swatch: /^#/.test(getProps()[key] || '') ? getProps()[key] : '#ffffff', onChange: (v) => set(key, v) }),
+    // A native range slider commits on every drag tick -- dozens a second --
+    // and each one used to trigger a full doc clone + re-render (see
+    // `commit`), which is what made dragging feel like stutter instead of a
+    // smooth slide. A stepper sidesteps that class of bug entirely: +/- is a
+    // single discrete commit per click, and typing a value only commits once
+    // you're done (on blur), not per keystroke.
+    range: (label, key, min, max, step, unit) => {
+      const cur = getProps()[key] ?? min;
+      const s = step || 1;
+      const decimals = (String(s).split('.')[1] || '').length;
+      const clamp = (v) => Math.min(max, Math.max(min, v));
+      const round = (v) => Number(v.toFixed(decimals));
+      const commit = (v) => set(key, round(clamp(v)));
+      return {
+        kind: 'range', label, value: cur, min, max, step: s, unit: unit || '', display: cur + (unit || ''),
+        onDec: () => commit(cur - s),
+        onInc: () => commit(cur + s),
+        // Live-typed digits aren't clamped (typing "1" toward "12" with a min
+        // of 10 would otherwise get snapped back to 10 mid-keystroke, making
+        // the second digit impossible to enter) -- only guarded against a
+        // non-numeric intermediate state (e.g. a bare "-").
+        onInput: (v) => { const n = parseFloat(v); if (!Number.isNaN(n)) set(key, n); },
+        // A render tears down and rebuilds the whole panel subtree (no
+        // diffing); removing this still-focused input as part of that forces
+        // a synchronous, spurious `blur` before the rebuilt replacement can
+        // be refocused. Committing on that blur re-renders again, which
+        // tears down and blurs again -- an infinite loop. `core.rendering`
+        // (set for the render()'s duration) tells a real blur apart from
+        // that artifact -- same guard as canvas.js's RTE `onBlur`.
+        onBlur: (v) => { if (core && core.rendering) return; const n = parseFloat(v); commit(Number.isNaN(n) ? cur : n); },
+      };
+    },
+    // A real drag slider, for coarse visual sizing (content width). The
+    // per-tick commit problem that ruled sliders out for ordinary fields
+    // (see `range` above) is sidestepped by contract: the renderer moves the
+    // value bubble live during the drag but only calls `onCommit` on release
+    // ('change'), so a whole drag costs one re-render.
+    slider: (label, key, min, max, step, unit) => ({
+      kind: 'slider', label, value: getProps()[key] ?? min, min, max, step: step || 1, unit: unit || '',
+      onCommit: (v) => { const n = parseFloat(v); if (Number.isFinite(n)) set(key, Math.min(max, Math.max(min, n))); },
+    }),
+    sel: (label, key, opts) => {
+      const options = opts.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+      const current = getProps()[key];
+      return {
+        kind: 'select', label,
+        // New controls must not render as an unexplained blank on documents
+        // saved before that property existed. The renderer already uses the
+        // first option as its semantic fallback; show that same choice here.
+        value: current == null ? (options[0]?.value ?? '') : current,
+        options,
+        onChange: (v) => set(key, v),
+      };
+    },
+    seg: (label, key, opts) => ({
+      kind: 'seg', label, options: opts.map((o) => {
+        const v = typeof o === 'string' ? o : o.value; const l = typeof o === 'string' ? o : o.label;
+        const on = getProps()[key] === v;
+        return { label: l, bg: on ? 'var(--ed-accent)' : 'transparent', fg: on ? 'var(--ed-accent-ink)' : 'var(--ed-muted)', onClick: () => set(key, v) };
+      }),
+    }),
+    tog: (label, key, defaultOn) => {
+      const raw = getProps()[key];
+      const on = raw === undefined ? !!defaultOn : !!raw;
+      return { kind: 'toggle', label, on, onChange: () => set(key, !on) };
+    },
+    btn: (label, onClick) => ({ kind: 'btn', label, onClick }),
+  };
+}
+
+/**
+ * A grid of linked steppers for props that come in sides/corners ("Space
+ * inside" top/bottom/left/right). `toggle` ({on, onChange}), when present,
+ * renders as the header's "More options" switch that swaps the linked pair
+ * for per-side fields; `label: null` drops the header row entirely (the
+ * section head above already names the group).
+ */
+export function group(label, items, toggle) {
+  return { kind: 'rangeGroup', label, items, toggle: toggle || null };
+}
+
+export function decorate(list) {
+  return list.filter(Boolean).map((f, i) => {
+    const d = Object.assign({}, f, {
+      key: i,
+      isHead: f.kind === 'head', isArea: f.kind === 'area', isBtn: f.kind === 'btn', isSeg: f.kind === 'seg',
       isRange: f.kind === 'range', isToggle: f.kind === 'toggle', isSocial: f.kind === 'social', isTableGrid: f.kind === 'tablegrid', isRichLinks: f.kind === 'richLinks',
-      isRangeGroup: f.kind === 'rangeGroup', isSlider: f.kind === 'slider',
-      isRow: ['text', 'num', 'color', 'select'].indexOf(f.kind) > -1,
-      isField: ['text', 'num', 'color', 'select'].indexOf(f.kind) > -1,
-      isText: f.kind === 'text', isNum: f.kind === 'num', isColor: f.kind === 'color', isSelect: f.kind === 'select',
-    });
-    // Group items are ranges rendered as grid cells: they need decorated
-    // flags and focus keys of their own, namespaced under the group's index
-    // so they stay unique against the flat list.
-    if (d.isRangeGroup) d.items = f.items.map((it, j) => Object.assign({}, it, { key: i + 'g' + j, isRange: true }));
-    return d;
-  });
-}
+      isRangeGroup: f.kind === 'rangeGroup', isSlider: f.kind === 'slider',
+      isRow: ['text', 'num', 'color', 'select'].indexOf(f.kind) > -1,
+      isField: ['text', 'num', 'color', 'select'].indexOf(f.kind) > -1,
+      isText: f.kind === 'text', isNum: f.kind === 'num', isColor: f.kind === 'color', isSelect: f.kind === 'select',
+    });
+    // Group items are ranges rendered as grid cells: they need decorated
+    // flags and focus keys of their own, namespaced under the group's index
+    // so they stay unique against the flat list.
+    if (d.isRangeGroup) d.items = f.items.map((it, j) => Object.assign({}, it, { key: i + 'g' + j, isRange: true }));
+    return d;
+  });
+}

package/src/core/blocks.js

@@ -26,6 +26,19 @@ BLOCKS.push(
   { type: 'box', code: 'BOX', label: 'Section box', hint: 'Styled container with free content', make: () => ({ html: '<strong style="font-size:19px;display:block;margin-bottom:6px">Section title</strong>Drop copy here, or paste markup. The box takes background, padding, border and radius.', bg: '#f8fafc', bgImage: '', border: 1, borderStyle: 'solid', lineColor: '#e2e8f0', topBorder: true, rightBorder: true, bottomBorder: true, leftBorder: true, radius: 12, pad: 22, align: 'left', minH: 0, maxW: 100, shadow: false }) },
   { type: 'svg', code: 'SVG', label: 'Inline SVG', hint: 'Paste SVG markup', make: () => ({ code: '<svg viewBox="0 0 120 40" width="120" height="40" fill="none" stroke="#0065b3" stroke-width="1.5"><rect x="0.75" y="0.75" width="118.5" height="38.5"/><path d="M12 28l14-16 12 10 10-8 18 14"/></svg>', align: 'left', width: 100, py: 10 }) },
 );
+// Dynamic-content markers. Same contract as merge tags (variables.js): the
+// editor only authors the template tags, never evaluates them -- export emits
+// literal {{#if}}/{{#each}} at the marker's position for the host's engine to
+// run at send time. Each is half of a pair (`end: false` opens, `end: true`
+// closes); insertBlock drops both at once, and the user drags any content --
+// blocks, or whole sections when the markers sit in rows of their own --
+// between them. Export balances the document (core/export.js `logicPlan`), so
+// a stray or missing half degrades to well-formed output rather than a broken
+// template.
+BLOCKS.push(
+  { type: 'condition', code: 'IF', label: 'Condition', hint: 'Show everything between the two markers only when the expression is true', make: () => ({ expr: 'is_premium', end: false }) },
+  { type: 'loop', code: 'EACH', label: 'Loop', hint: 'Repeat everything between the two markers once per list item', make: () => ({ expr: 'order.items', end: false }) },
+);
 
 export const DEF = (t) => BLOCKS.find((b) => b.type === t);
 export const mk = (t) => ({ id: uid(), type: t, props: DEF(t).make() });
@@ -161,7 +174,7 @@ export const PALETTE = [
   { t: 'button' }, { t: 'table' }, { g: 'card' }, { g: 'product' }, { g: 'hero' }, { g: 'stats' },
   { t: 'box' }, { t: 'divider' }, { t: 'spacer' }, { t: 'social' }, { t: 'video' },
   { t: 'embed' }, { t: 'menu' }, { g: 'footer' }, { t: 'html' }, { t: 'css' }, { t: 'svg' },
-  { t: 'codeblock' }, { t: 'countdown' },
+  { t: 'codeblock' }, { t: 'countdown' }, { t: 'condition' }, { t: 'loop' },
 ];
 
 /**

package/src/core/css-cascade.js

@@ -1,117 +1,117 @@
-/**
- * Import-time CSS cascade: folds a parsed document's `<style>` rules into the
- * elements' inline styles, so the importer's classifiers (which read inline
- * styles only) see class-styled templates -- Mailchimp exports, hand-written
- * emails, framework output that was never inlined -- the same way a mail
- * client would.
- *
- * Deliberately a subset of a real cascade, matched to what email CSS uses:
- * - `@media` blocks (and every other at-rule) are dropped whole: responsive
- *   overrides can't be represented in the imported model, desktop values win.
- *   A side benefit: base-rule `.desktop_hide { display:none }` still applies,
- *   so mobile-only duplicate content is correctly dropped by the importer's
- *   hidden-element skip.
- * - Selectors containing `:` are skipped -- pseudo-classes/-elements are
- *   interactive or generated state with no place in a static import.
- * - Specificity is the classic ids/classes/tags count; equal specificity
- *   resolves by source order; `!important` wins over everything including
- *   inline styles, which otherwise always win (matching browser behavior for
- *   the combinations that matter here).
- */
-
-function stripComments(css) {
-  return String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
-}
-
-/** Removes every at-rule: block-less ones (`@import ...;`) to the semicolon, block ones (`@media { ... }`) across balanced braces. */
-function stripAtRules(css) {
-  let out = '';
-  let i = 0;
-  while (i < css.length) {
-    if (css[i] === '@') {
-      const semi = css.indexOf(';', i);
-      const brace = css.indexOf('{', i);
-      if (brace === -1 || (semi !== -1 && semi < brace)) {
-        i = semi === -1 ? css.length : semi + 1;
-        continue;
-      }
-      let depth = 0;
-      let j = brace;
-      for (; j < css.length; j++) {
-        if (css[j] === '{') depth++;
-        else if (css[j] === '}') { depth--; if (!depth) break; }
-      }
-      i = j + 1;
-      continue;
-    }
-    out += css[i];
-    i++;
-  }
-  return out;
-}
-
-function specificity(sel) {
-  const ids = (sel.match(/#[\w-]+/g) || []).length;
-  const classes = (sel.match(/\.[\w-]+|\[[^\]]*\]/g) || []).length;
-  const tags = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
-  return ids * 100 + classes * 10 + tags;
-}
-
-export function inlineStylesheets(doc) {
-  const sheets = Array.from(doc.querySelectorAll('style'));
-  if (!sheets.length) return;
-  const css = stripAtRules(stripComments(sheets.map((s) => s.textContent || '').join('\n')));
-
-  const rules = [];
-  const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
-  let m;
-  let order = 0;
-  while ((m = ruleRe.exec(css))) {
-    const decls = [];
-    m[2].split(';').forEach((d) => {
-      const at = d.indexOf(':');
-      if (at < 0) return;
-      const prop = d.slice(0, at).trim().toLowerCase();
-      let value = d.slice(at + 1).trim();
-      if (!prop || !value || prop.indexOf('--') === 0 || prop.indexOf('mso-') === 0) return;
-      const important = /!important\s*$/i.test(value);
-      if (important) value = value.replace(/!important\s*$/i, '').trim();
-      if (value) decls.push({ prop, value, important });
-    });
-    if (!decls.length) continue;
-    m[1].split(',').forEach((raw) => {
-      const sel = raw.trim();
-      if (!sel || sel === '*' || sel.indexOf(':') > -1) return;
-      rules.push({ sel, decls, spec: specificity(sel), order: order++ });
-    });
-  }
-  if (!rules.length) return;
-
-  // Ascending: later (more specific / later-in-source) rules overwrite
-  // earlier winners per property below.
-  rules.sort((a, b) => a.spec - b.spec || a.order - b.order);
-
-  const winners = new Map(); // element -> Map(prop -> {value, important})
-  rules.forEach((rule) => {
-    let matched;
-    try { matched = doc.querySelectorAll(rule.sel); } catch { return; }
-    matched.forEach((el) => {
-      if (el !== doc.body && !doc.body.contains(el)) return;
-      let bucket = winners.get(el);
-      if (!bucket) { bucket = new Map(); winners.set(el, bucket); }
-      rule.decls.forEach((d) => {
-        const cur = bucket.get(d.prop);
-        if (cur && cur.important && !d.important) return;
-        bucket.set(d.prop, d);
-      });
-    });
-  });
-
-  winners.forEach((bucket, el) => {
-    if (!el.style) return;
-    bucket.forEach((d, prop) => {
-      if (!d.important && el.style.getPropertyValue(prop)) return; // inline wins
-      try { el.style.setProperty(prop, d.value); } catch { /* unparseable value -- skip */ }
-    });
-  });
-}
+/**
+ * Import-time CSS cascade: folds a parsed document's `<style>` rules into the
+ * elements' inline styles, so the importer's classifiers (which read inline
+ * styles only) see class-styled templates -- Mailchimp exports, hand-written
+ * emails, framework output that was never inlined -- the same way a mail
+ * client would.
+ *
+ * Deliberately a subset of a real cascade, matched to what email CSS uses:
+ * - `@media` blocks (and every other at-rule) are dropped whole: responsive
+ *   overrides can't be represented in the imported model, desktop values win.
+ *   A side benefit: base-rule `.desktop_hide { display:none }` still applies,
+ *   so mobile-only duplicate content is correctly dropped by the importer's
+ *   hidden-element skip.
+ * - Selectors containing `:` are skipped -- pseudo-classes/-elements are
+ *   interactive or generated state with no place in a static import.
+ * - Specificity is the classic ids/classes/tags count; equal specificity
+ *   resolves by source order; `!important` wins over everything including
+ *   inline styles, which otherwise always win (matching browser behavior for
+ *   the combinations that matter here).
+ */
+
+function stripComments(css) {
+  return String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
+/** Removes every at-rule: block-less ones (`@import ...;`) to the semicolon, block ones (`@media { ... }`) across balanced braces. */
+function stripAtRules(css) {
+  let out = '';
+  let i = 0;
+  while (i < css.length) {
+    if (css[i] === '@') {
+      const semi = css.indexOf(';', i);
+      const brace = css.indexOf('{', i);
+      if (brace === -1 || (semi !== -1 && semi < brace)) {
+        i = semi === -1 ? css.length : semi + 1;
+        continue;
+      }
+      let depth = 0;
+      let j = brace;
+      for (; j < css.length; j++) {
+        if (css[j] === '{') depth++;
+        else if (css[j] === '}') { depth--; if (!depth) break; }
+      }
+      i = j + 1;
+      continue;
+    }
+    out += css[i];
+    i++;
+  }
+  return out;
+}
+
+function specificity(sel) {
+  const ids = (sel.match(/#[\w-]+/g) || []).length;
+  const classes = (sel.match(/\.[\w-]+|\[[^\]]*\]/g) || []).length;
+  const tags = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
+  return ids * 100 + classes * 10 + tags;
+}
+
+export function inlineStylesheets(doc) {
+  const sheets = Array.from(doc.querySelectorAll('style'));
+  if (!sheets.length) return;
+  const css = stripAtRules(stripComments(sheets.map((s) => s.textContent || '').join('\n')));
+
+  const rules = [];
+  const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
+  let m;
+  let order = 0;
+  while ((m = ruleRe.exec(css))) {
+    const decls = [];
+    m[2].split(';').forEach((d) => {
+      const at = d.indexOf(':');
+      if (at < 0) return;
+      const prop = d.slice(0, at).trim().toLowerCase();
+      let value = d.slice(at + 1).trim();
+      if (!prop || !value || prop.indexOf('--') === 0 || prop.indexOf('mso-') === 0) return;
+      const important = /!important\s*$/i.test(value);
+      if (important) value = value.replace(/!important\s*$/i, '').trim();
+      if (value) decls.push({ prop, value, important });
+    });
+    if (!decls.length) continue;
+    m[1].split(',').forEach((raw) => {
+      const sel = raw.trim();
+      if (!sel || sel === '*' || sel.indexOf(':') > -1) return;
+      rules.push({ sel, decls, spec: specificity(sel), order: order++ });
+    });
+  }
+  if (!rules.length) return;
+
+  // Ascending: later (more specific / later-in-source) rules overwrite
+  // earlier winners per property below.
+  rules.sort((a, b) => a.spec - b.spec || a.order - b.order);
+
+  const winners = new Map(); // element -> Map(prop -> {value, important})
+  rules.forEach((rule) => {
+    let matched;
+    try { matched = doc.querySelectorAll(rule.sel); } catch { return; }
+    matched.forEach((el) => {
+      if (el !== doc.body && !doc.body.contains(el)) return;
+      let bucket = winners.get(el);
+      if (!bucket) { bucket = new Map(); winners.set(el, bucket); }
+      rule.decls.forEach((d) => {
+        const cur = bucket.get(d.prop);
+        if (cur && cur.important && !d.important) return;
+        bucket.set(d.prop, d);
+      });
+    });
+  });
+
+  winners.forEach((bucket, el) => {
+    if (!el.style) return;
+    bucket.forEach((d, prop) => {
+      if (!d.important && el.style.getPropertyValue(prop)) return; // inline wins
+      try { el.style.setProperty(prop, d.value); } catch { /* unparseable value -- skip */ }
+    });
+  });
+}