render-tag 0.1.1 → 0.1.3

package/lib/css-resolver.js

@@ -0,0 +1,1231 @@
+/**
+ * Parse a simple CSS string into rules.
+ * Supports: tag, .class, parent > child, comma-separated selectors.
+ * Extracts @font-face rules separately for injection into the document.
+ */
+function parseCSS(css) {
+    const rules = [];
+    const fontFaceRules = [];
+    // Remove comments
+    css = css.replace(/\/\*[\s\S]*?\*\//g, '');
+    let i = 0;
+    while (i < css.length) {
+        // Skip whitespace
+        while (i < css.length && /\s/.test(css[i]))
+            i++;
+        if (i >= css.length)
+            break;
+        // Handle at-rules (@font-face, @media, etc.)
+        if (css[i] === '@') {
+            const atStart = i;
+            let braceDepth = 0;
+            while (i < css.length) {
+                if (css[i] === '{')
+                    braceDepth++;
+                if (css[i] === '}') {
+                    braceDepth--;
+                    if (braceDepth <= 0) {
+                        i++;
+                        break;
+                    }
+                }
+                i++;
+            }
+            // Capture @font-face rules for injection
+            const atRule = css.slice(atStart, i);
+            if (atRule.startsWith('@font-face')) {
+                fontFaceRules.push(atRule);
+            }
+            continue;
+        }
+        // Read selector(s) up to '{'
+        const selectorStart = i;
+        while (i < css.length && css[i] !== '{')
+            i++;
+        if (i >= css.length)
+            break;
+        const selectorStr = css.slice(selectorStart, i).trim();
+        i++; // skip '{'
+        // Read declarations up to '}'
+        const declStart = i;
+        while (i < css.length && css[i] !== '}')
+            i++;
+        const declStr = css.slice(declStart, i).trim();
+        i++; // skip '}'
+        if (!selectorStr)
+            continue;
+        // Parse selectors (comma-separated)
+        const selectors = selectorStr.split(',').map(s => s.trim()).filter(Boolean);
+        // Parse declarations
+        const declarations = [];
+        for (const decl of declStr.split(';')) {
+            const colonIdx = decl.indexOf(':');
+            if (colonIdx === -1)
+                continue;
+            const property = decl.slice(0, colonIdx).trim().toLowerCase();
+            const value = decl.slice(colonIdx + 1).trim();
+            if (property && value) {
+                declarations.push({ property, value });
+            }
+        }
+        if (selectors.length > 0 && declarations.length > 0) {
+            rules.push({ selectors, declarations });
+        }
+    }
+    return { rules, fontFaceRules };
+}
+/**
+ * Compute specificity for a simple selector.
+ * Returns [ids, classes, tags] tuple.
+ */
+function selectorSpecificity(selector) {
+    // Remove pseudo-elements for specificity calculation
+    const sel = selector.replace(/::[\w-]+/g, '');
+    const parts = sel.split(/\s*>\s*|\s+/);
+    let ids = 0, classes = 0, tags = 0;
+    for (const part of parts) {
+        // Count #id
+        const idMatches = part.match(/#[\w-]+/g);
+        if (idMatches)
+            ids += idMatches.length;
+        // Count .class
+        const classMatches = part.match(/\.[\w-]+/g);
+        if (classMatches)
+            classes += classMatches.length;
+        // Count tag (strip classes/ids/pseudo)
+        const tagPart = part.replace(/[#.][\w-]+/g, '').replace(/:[\w-]+/g, '').trim();
+        if (tagPart && tagPart !== '*')
+            tags++;
+    }
+    return [ids, classes, tags];
+}
+function parsePart(part) {
+    const classMatches = part.match(/\.[\w-]+/g) || [];
+    const tag = part.replace(/\.[\w-]+/g, '').replace(/:[\w-]+/g, '').trim();
+    return {
+        tag: (tag && tag !== '*') ? tag : '',
+        classes: classMatches.map(c => c.slice(1)),
+    };
+}
+/**
+ * Check if a parsed selector part matches an element context.
+ */
+function matchesPart(part, ctx) {
+    const classMatches = part.match(/\.[\w-]+/g) || [];
+    const tag = part.replace(/\.[\w-]+/g, '').replace(/:[\w-]+/g, '').trim();
+    if (tag && tag !== '*' && tag !== ctx.tagName)
+        return false;
+    for (const cls of classMatches) {
+        if (!ctx.classes.has(cls.slice(1)))
+            return false;
+    }
+    return true;
+}
+function matchesParsedPart(part, ctx) {
+    if (part.tag && part.tag !== ctx.tagName)
+        return false;
+    for (const cls of part.classes) {
+        if (!ctx.classes.has(cls))
+            return false;
+    }
+    return true;
+}
+/**
+ * Pre-parse and tokenize a selector string into a ParsedSelector.
+ * Returns null for selectors we can't handle (pseudo-elements, pseudo-classes).
+ */
+function parseSelector(selector) {
+    if (selector.includes('::'))
+        return null;
+    if (/:(?:nth-|hover|focus|active|visited|first-child|last-child)/.test(selector))
+        return null;
+    const tokens = [];
+    const combinators = [];
+    const raw = selector.trim().split(/\s+/);
+    for (let i = 0; i < raw.length; i++) {
+        if (raw[i] === '>') {
+            combinators.push('>');
+        }
+        else {
+            if (tokens.length > combinators.length + 1) {
+                combinators.push(' ');
+            }
+            tokens.push(raw[i]);
+        }
+    }
+    while (combinators.length < tokens.length - 1) {
+        combinators.push(' ');
+    }
+    if (tokens.length === 0)
+        return null;
+    const parts = tokens.map(parsePart);
+    const rightmost = parts[parts.length - 1];
+    const rightmostTag = rightmost.tag;
+    return {
+        parts,
+        combinators,
+        rightmost,
+        rightmostIsRoot: rightmostTag === 'html' || rightmostTag === 'body',
+        spec: selectorSpecificity(selector),
+    };
+}
+/**
+ * Match a pre-parsed selector against an element context.
+ */
+function matchesParsedSelector(sel, ctx) {
+    // Quick check: rightmost part must match current element
+    if (sel.rightmostIsRoot) {
+        if (ctx.parent !== null)
+            return false; // html/body only match root
+    }
+    else {
+        if (!matchesParsedPart(sel.rightmost, ctx))
+            return false;
+    }
+    // Single-part selector — already matched
+    if (sel.parts.length === 1)
+        return true;
+    // Walk ancestors for remaining parts (right-to-left)
+    let current = ctx.parent;
+    for (let ti = sel.parts.length - 2; ti >= 0; ti--) {
+        if (!current)
+            return false;
+        const part = sel.parts[ti];
+        const combinator = sel.combinators[ti];
+        if (combinator === '>') {
+            // Direct child: current ancestor must match
+            const isRoot = current.parent === null;
+            if (isRoot && (part.tag === 'html' || part.tag === 'body')) {
+                current = current.parent;
+            }
+            else if (matchesParsedPart(part, current)) {
+                current = current.parent;
+            }
+            else {
+                return false;
+            }
+        }
+        else {
+            // Descendant: any ancestor must match
+            let found = false;
+            while (current) {
+                const isRoot = current.parent === null;
+                if (isRoot && (part.tag === 'html' || part.tag === 'body')) {
+                    current = current.parent;
+                    found = true;
+                    break;
+                }
+                if (matchesParsedPart(part, current)) {
+                    current = current.parent;
+                    found = true;
+                    break;
+                }
+                current = current.parent;
+            }
+            if (!found)
+                return false;
+        }
+    }
+    return true;
+}
+// ─── Style Resolution ────────────────────────────────────────────────
+/** Properties that inherit from parent to child */
+const INHERITED_PROPERTIES = new Set([
+    'font-family', 'font-size', 'font-weight', 'font-style',
+    'color', 'text-align', 'text-transform',
+    'text-decoration-line', 'text-decoration-style', 'text-decoration-color',
+    'letter-spacing', 'word-spacing', 'font-kerning',
+    'line-height', 'white-space', 'word-break', 'overflow-wrap',
+    'direction', 'text-shadow', 'list-style-type',
+    'vertical-align',
+]);
+/** Default values for all ResolvedStyle properties */
+function defaultStyle() {
+    return {
+        fontFamily: 'sans-serif',
+        fontSize: 16,
+        fontWeight: 400,
+        fontStyle: 'normal',
+        color: 'rgb(0, 0, 0)',
+        textAlign: 'start',
+        textTransform: 'none',
+        textDecorationLine: 'none',
+        textDecorationStyle: 'solid',
+        textDecorationColor: 'rgb(0, 0, 0)',
+        textShadow: 'none',
+        webkitTextStrokeWidth: 0,
+        webkitTextStrokeColor: '',
+        webkitTextFillColor: '',
+        webkitBackgroundClip: '',
+        backgroundImage: 'none',
+        letterSpacing: 0,
+        wordSpacing: 0,
+        fontKerning: 'auto',
+        lineHeight: 0,
+        verticalAlign: 'baseline',
+        whiteSpace: 'normal',
+        wordBreak: 'normal',
+        overflowWrap: 'normal',
+        direction: 'ltr',
+        display: 'block',
+        width: 0,
+        minHeight: 0,
+        paddingTop: 0,
+        paddingRight: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        marginTop: 0,
+        marginRight: 0,
+        marginBottom: 0,
+        marginLeft: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderTopWidth: 0,
+        borderTopColor: 'rgb(0, 0, 0)',
+        borderTopStyle: 'none',
+        borderRightWidth: 0,
+        borderRightColor: 'rgb(0, 0, 0)',
+        borderRightStyle: 'none',
+        borderBottomWidth: 0,
+        borderBottomColor: 'rgb(0, 0, 0)',
+        borderBottomStyle: 'none',
+        borderLeftWidth: 0,
+        borderLeftColor: 'rgb(0, 0, 0)',
+        borderLeftStyle: 'none',
+        flexDirection: 'row',
+        gap: 0,
+        flexGrow: 0,
+        listStyleType: 'disc',
+    };
+}
+/** Tag-level default display values and browser default margins */
+const TAG_DEFAULTS = {
+    span: { display: 'inline' },
+    a: { display: 'inline' },
+    strong: { display: 'inline', fontWeight: 700 },
+    b: { display: 'inline', fontWeight: 700 },
+    em: { display: 'inline', fontStyle: 'italic' },
+    i: { display: 'inline', fontStyle: 'italic' },
+    u: { display: 'inline', textDecorationLine: 'underline' },
+    s: { display: 'inline', textDecorationLine: 'line-through' },
+    strike: { display: 'inline', textDecorationLine: 'line-through' },
+    del: { display: 'inline', textDecorationLine: 'line-through' },
+    sub: { display: 'inline', verticalAlign: 'sub', fontSize: 0.83 },
+    sup: { display: 'inline', verticalAlign: 'super', fontSize: 0.83 },
+    code: { display: 'inline', fontFamily: 'monospace' },
+    cite: { display: 'inline', fontStyle: 'italic' },
+    p: { display: 'block', marginTop: -1, marginBottom: -1 }, // -1 = 1em, resolved later
+    div: { display: 'block' },
+    h1: { display: 'block', fontSize: 2, fontWeight: 700, marginTop: -0.67, marginBottom: -0.67 },
+    h2: { display: 'block', fontSize: 1.5, fontWeight: 700, marginTop: -0.83, marginBottom: -0.83 },
+    h3: { display: 'block', fontSize: 1.17, fontWeight: 700, marginTop: -1, marginBottom: -1 },
+    h4: { display: 'block', fontSize: 1, fontWeight: 700, marginTop: -1.33, marginBottom: -1.33 },
+    h5: { display: 'block', fontSize: 0.83, fontWeight: 700, marginTop: -1.67, marginBottom: -1.67 },
+    h6: { display: 'block', fontSize: 0.67, fontWeight: 700, marginTop: -2.33, marginBottom: -2.33 },
+    ul: { display: 'block', listStyleType: 'disc', marginTop: -1, marginBottom: -1 },
+    ol: { display: 'block', listStyleType: 'decimal', marginTop: -1, marginBottom: -1 },
+    li: { display: 'list-item' },
+    blockquote: { display: 'block', marginTop: -1, marginBottom: -1, marginLeft: 40, marginRight: 40 },
+    pre: { display: 'block', whiteSpace: 'pre', fontFamily: 'monospace', marginTop: -1, marginBottom: -1 },
+    table: { display: 'table' },
+    tr: { display: 'table-row' },
+    td: { display: 'table-cell' },
+    th: { display: 'table-cell', fontWeight: 700 },
+    br: { display: 'inline' },
+};
+/**
+ * Parse a CSS value to pixels given a parent font size for em/% resolution.
+ */
+function parseValue(value, parentFontSize, containerWidth) {
+    if (!value || value === 'normal' || value === 'auto' || value === 'none')
+        return 0;
+    const trimmed = value.trim();
+    if (trimmed.endsWith('em')) {
+        const num = parseFloat(trimmed);
+        return isNaN(num) ? 0 : num * parentFontSize;
+    }
+    if (trimmed.endsWith('%')) {
+        const num = parseFloat(trimmed);
+        return isNaN(num) ? 0 : (num / 100) * containerWidth;
+    }
+    if (trimmed.endsWith('px')) {
+        const num = parseFloat(trimmed);
+        return isNaN(num) ? 0 : num;
+    }
+    // Bare number (for line-height, etc.)
+    const num = parseFloat(trimmed);
+    return isNaN(num) ? 0 : num;
+}
+function parseFontWeight(value) {
+    if (value === 'bold')
+        return 700;
+    if (value === 'normal')
+        return 400;
+    const num = parseInt(value, 10);
+    return isNaN(num) ? 400 : num;
+}
+/**
+ * Expand shorthand properties into individual ones.
+ * E.g., margin: 10px 20px → marginTop/Right/Bottom/Left
+ */
+function expandShorthand(property, value) {
+    if (property === 'margin' || property === 'padding') {
+        const parts = value.trim().split(/\s+/);
+        let top, right, bottom, left;
+        if (parts.length === 1) {
+            top = right = bottom = left = parts[0];
+        }
+        else if (parts.length === 2) {
+            top = bottom = parts[0];
+            right = left = parts[1];
+        }
+        else if (parts.length === 3) {
+            top = parts[0];
+            right = left = parts[1];
+            bottom = parts[2];
+        }
+        else {
+            top = parts[0];
+            right = parts[1];
+            bottom = parts[2];
+            left = parts[3];
+        }
+        return [
+            { property: `${property}-top`, value: top },
+            { property: `${property}-right`, value: right },
+            { property: `${property}-bottom`, value: bottom },
+            { property: `${property}-left`, value: left },
+        ];
+    }
+    if (property === 'border' || property === 'border-top' || property === 'border-right' ||
+        property === 'border-bottom' || property === 'border-left') {
+        const parts = value.trim().split(/\s+/);
+        const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'none', 'hidden'];
+        const width = parts.find(p => p.endsWith('px') || /^\d/.test(p)) || '0';
+        const style = parts.find(p => borderStyles.includes(p)) || 'none';
+        const color = parts.find(p => !p.endsWith('px') && !/^\d/.test(p) && !borderStyles.includes(p)) || 'currentColor';
+        const result = [];
+        const sides = property === 'border'
+            ? ['top', 'right', 'bottom', 'left']
+            : [property.replace('border-', '')];
+        for (const side of sides) {
+            result.push({ property: `border-${side}-width`, value: width });
+            result.push({ property: `border-${side}-style`, value: style });
+            result.push({ property: `border-${side}-color`, value: color });
+        }
+        return result;
+    }
+    if (property === 'list-style') {
+        // list-style: none → list-style-type: none
+        if (value === 'none') {
+            return [{ property: 'list-style-type', value: 'none' }];
+        }
+        return [{ property: 'list-style-type', value }];
+    }
+    if (property === 'text-decoration') {
+        const v = value.trim();
+        if (v === 'inherit' || v === 'none') {
+            return [{ property: 'text-decoration-line', value: 'none' }];
+        }
+        // Extract color functions (rgb(...), hsl(...)) before splitting on whitespace,
+        // because they contain spaces internally (e.g. "rgb(231, 76, 60)").
+        let colorValue = '';
+        const withoutColorFn = v.replace(/\b(rgba?\([^)]*\)|hsla?\([^)]*\))/i, (match) => {
+            colorValue = match;
+            return '';
+        });
+        const parts = withoutColorFn.split(/\s+/).filter(Boolean);
+        const lineValues = ['underline', 'overline', 'line-through'];
+        const styleValues = ['solid', 'double', 'dotted', 'dashed', 'wavy'];
+        const result = [];
+        const lines = [];
+        for (const p of parts) {
+            if (lineValues.includes(p))
+                lines.push(p);
+            else if (styleValues.includes(p))
+                result.push({ property: 'text-decoration-style', value: p });
+            else if (p.startsWith('#'))
+                result.push({ property: 'text-decoration-color', value: p });
+        }
+        if (colorValue)
+            result.push({ property: 'text-decoration-color', value: colorValue });
+        if (lines.length > 0)
+            result.unshift({ property: 'text-decoration-line', value: lines.join(' ') });
+        return result;
+    }
+    if (property === '-webkit-text-stroke') {
+        // -webkit-text-stroke: 1px #1e40af → width + color
+        const parts = value.trim().split(/\s+/);
+        const width = parts.find(p => p.endsWith('px') || /^\d/.test(p)) || '0';
+        const color = parts.find(p => !p.endsWith('px') && !/^\d/.test(p)) || 'currentColor';
+        return [
+            { property: '-webkit-text-stroke-width', value: width },
+            { property: '-webkit-text-stroke-color', value: color },
+        ];
+    }
+    if (property === 'flex') {
+        // flex: 1 → flex-grow: 1
+        const parts = value.trim().split(/\s+/);
+        const grow = parseFloat(parts[0]);
+        if (!isNaN(grow)) {
+            return [{ property: 'flex-grow', value: String(grow) }];
+        }
+        return [];
+    }
+    if (property === 'border-collapse' || property === 'border-spacing') {
+        // Ignored — table-specific properties we don't handle
+        return [];
+    }
+    return [{ property, value }];
+}
+/**
+ * Apply a CSS declaration to a ResolvedStyle, resolving units.
+ */
+function applyDeclaration(style, property, value, parentFontSize, containerWidth, direction) {
+    // Resolve the font-size first if that's what we're setting, since
+    // em values for other properties depend on the element's own font-size
+    const fontSize = style.fontSize || parentFontSize;
+    switch (property) {
+        // Font & text
+        case 'font-family':
+            style.fontFamily = value.trim();
+            break;
+        case 'font-size': {
+            const v = value.trim();
+            if (v.endsWith('em')) {
+                style.fontSize = parseFloat(v) * parentFontSize;
+            }
+            else if (v.endsWith('%')) {
+                style.fontSize = (parseFloat(v) / 100) * parentFontSize;
+            }
+            else {
+                style.fontSize = parseFloat(v) || parentFontSize;
+            }
+            break;
+        }
+        case 'font-weight':
+            style.fontWeight = parseFontWeight(value);
+            break;
+        case 'font-style':
+            style.fontStyle = value.trim();
+            break;
+        case 'color':
+            style.color = value.trim();
+            break;
+        case 'text-align':
+            style.textAlign = value.trim();
+            break;
+        case 'text-transform':
+            style.textTransform = value.trim();
+            break;
+        case 'text-decoration-line':
+            style.textDecorationLine = value.trim();
+            break;
+        // text-decoration is expanded in expandShorthand, should not reach here
+        // but handle just in case
+        case 'text-decoration': break;
+        case 'text-decoration-style':
+            style.textDecorationStyle = value.trim();
+            break;
+        case 'text-decoration-color':
+            style.textDecorationColor = value.trim();
+            break;
+        case 'text-shadow':
+            style.textShadow = value.trim();
+            break;
+        case '-webkit-text-stroke-width':
+            style.webkitTextStrokeWidth = parseValue(value, fontSize, containerWidth);
+            break;
+        case '-webkit-text-stroke-color':
+            style.webkitTextStrokeColor = value.trim();
+            break;
+        case '-webkit-text-fill-color':
+            style.webkitTextFillColor = value.trim();
+            break;
+        case '-webkit-background-clip':
+        case 'background-clip':
+            style.webkitBackgroundClip = value.trim();
+            break;
+        case 'background-image':
+            style.backgroundImage = value.trim();
+            break;
+        case 'letter-spacing':
+            style.letterSpacing = value.trim() === 'normal' ? 0 : parseValue(value, fontSize, containerWidth);
+            break;
+        case 'word-spacing':
+            style.wordSpacing = value.trim() === 'normal' ? 0 : parseValue(value, fontSize, containerWidth);
+            break;
+        case 'font-kerning':
+            style.fontKerning = value.trim();
+            break;
+        case 'line-height': {
+            const v = value.trim();
+            if (v === 'normal') {
+                style.lineHeight = 0; // 0 signals "normal"
+            }
+            else if (v.endsWith('px')) {
+                style.lineHeight = parseFloat(v) || 0;
+            }
+            else if (v.endsWith('em')) {
+                style.lineHeight = parseFloat(v) * fontSize;
+            }
+            else {
+                // Unitless multiplier — compute for this element's font size
+                // and mark as unitless so children re-compute
+                const num = parseFloat(v);
+                if (!isNaN(num)) {
+                    style.lineHeight = num * fontSize;
+                    style._lineHeightMultiplier = num;
+                }
+            }
+            break;
+        }
+        case 'vertical-align':
+            style.verticalAlign = value.trim();
+            break;
+        case 'white-space':
+            style.whiteSpace = value.trim();
+            break;
+        case 'word-break':
+            style.wordBreak = value.trim();
+            break;
+        case 'overflow-wrap':
+        case 'word-wrap':
+            style.overflowWrap = value.trim();
+            break;
+        case 'direction':
+            style.direction = value.trim();
+            break;
+        // Box model
+        case 'display':
+            style.display = value.trim();
+            break;
+        case 'width': {
+            const v = value.trim();
+            if (v === '100%')
+                style.width = containerWidth;
+            else if (v !== 'auto')
+                style.width = parseValue(v, fontSize, containerWidth);
+            break;
+        }
+        case 'min-height':
+            style.minHeight = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'padding-top':
+            style.paddingTop = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'padding-right':
+            style.paddingRight = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'padding-bottom':
+            style.paddingBottom = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'padding-left':
+            style.paddingLeft = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'margin-top':
+            style.marginTop = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'margin-right':
+            style.marginRight = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'margin-bottom':
+            style.marginBottom = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'margin-left':
+            style.marginLeft = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'background-color':
+            style.backgroundColor = value.trim();
+            break;
+        case 'background': {
+            const v = value.trim();
+            if (v.includes('gradient(')) {
+                // background: linear-gradient(...) → backgroundImage
+                style.backgroundImage = v;
+            }
+            else if (v.startsWith('#') || v.startsWith('rgb') || v.startsWith('hsl') ||
+                ['transparent', 'none', 'inherit'].includes(v) ||
+                /^[a-z]+$/.test(v)) {
+                style.backgroundColor = v;
+            }
+            break;
+        }
+        // Logical properties → physical (based on direction)
+        case 'padding-inline-start':
+            if (direction === 'rtl')
+                style.paddingRight = parseValue(value, fontSize, containerWidth);
+            else
+                style.paddingLeft = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'padding-inline-end':
+            if (direction === 'rtl')
+                style.paddingLeft = parseValue(value, fontSize, containerWidth);
+            else
+                style.paddingRight = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'margin-inline-start':
+            if (direction === 'rtl')
+                style.marginRight = parseValue(value, fontSize, containerWidth);
+            else
+                style.marginLeft = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'margin-inline-end':
+            if (direction === 'rtl')
+                style.marginLeft = parseValue(value, fontSize, containerWidth);
+            else
+                style.marginRight = parseValue(value, fontSize, containerWidth);
+            break;
+        // Border
+        case 'border-top-width':
+            style.borderTopWidth = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'border-top-color':
+            style.borderTopColor = value.trim();
+            break;
+        case 'border-top-style':
+            style.borderTopStyle = value.trim();
+            break;
+        case 'border-right-width':
+            style.borderRightWidth = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'border-right-color':
+            style.borderRightColor = value.trim();
+            break;
+        case 'border-right-style':
+            style.borderRightStyle = value.trim();
+            break;
+        case 'border-bottom-width':
+            style.borderBottomWidth = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'border-bottom-color':
+            style.borderBottomColor = value.trim();
+            break;
+        case 'border-bottom-style':
+            style.borderBottomStyle = value.trim();
+            break;
+        case 'border-left-width':
+            style.borderLeftWidth = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'border-left-color':
+            style.borderLeftColor = value.trim();
+            break;
+        case 'border-left-style':
+            style.borderLeftStyle = value.trim();
+            break;
+        // Flex
+        case 'flex-direction':
+            style.flexDirection = value.trim();
+            break;
+        case 'gap':
+            style.gap = parseValue(value, fontSize, containerWidth);
+            break;
+        case 'flex-grow':
+            style.flexGrow = parseFloat(value) || 0;
+            break;
+        // List
+        case 'list-style-type':
+            style.listStyleType = value.trim();
+            break;
+        // Ignored properties (not relevant for our layout)
+        case 'position':
+        case 'top':
+        case 'left':
+        case 'right':
+        case 'bottom':
+        case 'inset-inline-start':
+        case 'inset-inline-end':
+        case 'content':
+        case 'counter-reset':
+        case 'counter-increment':
+        case 'border-radius':
+        case 'border-top-left-radius':
+        case 'border-top-right-radius':
+        case 'border-bottom-left-radius':
+        case 'border-bottom-right-radius':
+        case 'cursor':
+        case 'opacity':
+        case 'overflow':
+        case 'box-sizing':
+        case 'outline':
+        case 'transition':
+        case 'transform':
+        case 'text-indent':
+        case 'font-stretch':
+        case 'font-display':
+        case 'src':
+        case 'unicode-range':
+            break;
+    }
+}
+/** Inheritable property names (CSS kebab-case) mapped to ResolvedStyle keys */
+const INHERITABLE_KEYS = [
+    ['font-family', 'fontFamily'],
+    ['font-size', 'fontSize'],
+    ['font-weight', 'fontWeight'],
+    ['font-style', 'fontStyle'],
+    ['color', 'color'],
+    ['text-align', 'textAlign'],
+    ['text-transform', 'textTransform'],
+    ['white-space', 'whiteSpace'],
+    ['word-break', 'wordBreak'],
+    ['overflow-wrap', 'overflowWrap'],
+    ['direction', 'direction'],
+    ['letter-spacing', 'letterSpacing'],
+    ['word-spacing', 'wordSpacing'],
+    ['line-height', 'lineHeight'],
+    ['text-shadow', 'textShadow'],
+    ['font-kerning', 'fontKerning'],
+    ['list-style-type', 'listStyleType'],
+    ['vertical-align', 'verticalAlign'],
+];
+/**
+ * Inherit properties from parent style to child style for properties
+ * not explicitly set (tracked via setProps).
+ */
+function inheritFrom(child, parent, setProps) {
+    for (const [cssProp, key] of INHERITABLE_KEYS) {
+        if (!setProps.has(cssProp)) {
+            if (key === 'lineHeight') {
+                // Unitless line-height: re-compute relative to child's font-size
+                const multiplier = parent._lineHeightMultiplier;
+                if (multiplier !== undefined) {
+                    child.lineHeight = multiplier * child.fontSize;
+                    child._lineHeightMultiplier = multiplier;
+                }
+                else {
+                    child.lineHeight = parent.lineHeight;
+                }
+            }
+            else {
+                child[key] = parent[key];
+            }
+        }
+    }
+}
+/**
+ * Build an index of processed rules keyed by rightmost tag name and class names.
+ * The '*' key holds rules that match any element (no tag or class constraint).
+ */
+function buildRuleIndex(rules) {
+    const byTag = new Map();
+    const byClass = new Map();
+    const universal = [];
+    let orderBase = 0;
+    for (const rule of rules) {
+        // Pre-expand declarations once
+        const expandedDecls = [];
+        for (const decl of rule.declarations) {
+            const isImportant = decl.value.includes('!important');
+            const cleanValue = isImportant
+                ? decl.value.replace(/\s*!important\s*/g, '').trim()
+                : decl.value;
+            const expanded = expandShorthand(decl.property, cleanValue);
+            for (const exp of expanded) {
+                expandedDecls.push({ property: exp.property, value: exp.value, important: isImportant });
+            }
+        }
+        for (const sel of rule.selectors) {
+            const parsed = parseSelector(sel);
+            if (!parsed)
+                continue;
+            const entry = {
+                selector: parsed,
+                declarations: expandedDecls,
+                orderBase: orderBase++,
+            };
+            const rm = parsed.rightmost;
+            if (rm.tag && !parsed.rightmostIsRoot) {
+                // Index by tag
+                const list = byTag.get(rm.tag);
+                if (list)
+                    list.push(entry);
+                else
+                    byTag.set(rm.tag, [entry]);
+            }
+            if (rm.classes.length > 0) {
+                // Index by first class (most selective)
+                const cls = rm.classes[0];
+                const list = byClass.get(cls);
+                if (list)
+                    list.push(entry);
+                else
+                    byClass.set(cls, [entry]);
+            }
+            if (!rm.tag && rm.classes.length === 0) {
+                // Universal selector or html/body root
+                universal.push(entry);
+            }
+            // Also add root-matching selectors to universal
+            if (parsed.rightmostIsRoot) {
+                universal.push(entry);
+            }
+        }
+    }
+    return { byTag, byClass, universal };
+}
+/**
+ * Detect list marker text for a <li> element based on tree position.
+ */
+function getListMarker(el) {
+    const tag = el.tagName.toLowerCase();
+    if (tag !== 'li')
+        return undefined;
+    const parent = el.parentElement;
+    if (!parent)
+        return '•';
+    const parentTag = parent.tagName.toLowerCase();
+    if (parentTag === 'ol') {
+        let index = 0;
+        for (const child of parent.children) {
+            if (child.tagName.toLowerCase() === 'li') {
+                index++;
+                if (child === el)
+                    break;
+            }
+        }
+        return `${index}.`;
+    }
+    if (parentTag === 'ul') {
+        return '•';
+    }
+    return undefined;
+}
+/**
+ * Parse inline style attribute into declarations.
+ */
+function parseInlineStyle(styleAttr) {
+    const declarations = [];
+    for (const decl of styleAttr.split(';')) {
+        const colonIdx = decl.indexOf(':');
+        if (colonIdx === -1)
+            continue;
+        const property = decl.slice(0, colonIdx).trim().toLowerCase();
+        const value = decl.slice(colonIdx + 1).trim();
+        if (property && value) {
+            declarations.push({ property, value });
+        }
+    }
+    return declarations;
+}
+/**
+ * Resolve styles for a DOM tree without inserting into the document.
+ * Parses CSS rules, matches selectors, resolves cascade + inheritance.
+ */
+export function resolveStylesFromCSS(fragment, css, containerWidth) {
+    const { rules, fontFaceRules } = parseCSS(css);
+    // Inject @font-face rules into the document so fonts can load
+    let fontStyleEl = null;
+    if (fontFaceRules.length > 0) {
+        fontStyleEl = document.createElement('style');
+        fontStyleEl.textContent = fontFaceRules.join('\n');
+        document.head.appendChild(fontStyleEl);
+    }
+    // Build indexed rule lookup
+    const ruleIndex = buildRuleIndex(rules);
+    // Wrap fragment in a container div so resolveElement has a single root Element
+    const container = document.createElement('div');
+    container.appendChild(fragment);
+    function buildContext(el, parent) {
+        const classes = new Set();
+        const className = el.getAttribute('class');
+        if (className) {
+            for (const c of className.split(/\s+/)) {
+                if (c)
+                    classes.add(c);
+            }
+        }
+        return {
+            tagName: el.tagName.toLowerCase(),
+            classes,
+            parent,
+            el,
+        };
+    }
+    function resolveElement(el, parentStyle, parentCtx) {
+        const tag = el.tagName.toLowerCase();
+        const ctx = buildContext(el, parentCtx);
+        // Start with defaults
+        const style = defaultStyle();
+        // Track which properties are explicitly set (tag defaults, CSS rules, inline styles)
+        const setProps = new Set();
+        // --- Step 1: Determine font-size first (needed for em/multiplier resolution) ---
+        // Collect candidate rules from index (only rules that could match this element)
+        const candidates = [];
+        const seen = new Set();
+        const tagRules = ruleIndex.byTag.get(tag);
+        if (tagRules)
+            for (const r of tagRules) {
+                seen.add(r);
+                candidates.push(r);
+            }
+        for (const cls of ctx.classes) {
+            const clsRules = ruleIndex.byClass.get(cls);
+            if (clsRules)
+                for (const r of clsRules) {
+                    if (!seen.has(r)) {
+                        seen.add(r);
+                        candidates.push(r);
+                    }
+                }
+        }
+        for (const r of ruleIndex.universal) {
+            if (!seen.has(r)) {
+                seen.add(r);
+                candidates.push(r);
+            }
+        }
+        // Match candidates and collect pre-expanded declarations
+        const matched = [];
+        for (const candidate of candidates) {
+            if (matchesParsedSelector(candidate.selector, ctx)) {
+                for (const decl of candidate.declarations) {
+                    matched.push({
+                        property: decl.property,
+                        value: decl.value,
+                        specificity: candidate.selector.spec,
+                        order: candidate.orderBase,
+                        important: decl.important,
+                    });
+                }
+            }
+        }
+        // Tag default font-size
+        const tagDef = TAG_DEFAULTS[tag];
+        let fontSizeSet = false;
+        if (tagDef?.fontSize !== undefined) {
+            const val = tagDef.fontSize;
+            if (val < 10) {
+                style.fontSize = val * parentStyle.fontSize;
+            }
+            else {
+                style.fontSize = val;
+            }
+            fontSizeSet = true;
+            setProps.add('font-size');
+        }
+        // Sort by: !important first, then specificity, then source order
+        if (matched.length > 1) {
+            matched.sort((a, b) => {
+                if (a.important !== b.important)
+                    return a.important ? 1 : -1;
+                const sa = a.specificity, sb = b.specificity;
+                if (sa[0] !== sb[0])
+                    return sa[0] - sb[0];
+                if (sa[1] !== sb[1])
+                    return sa[1] - sb[1];
+                if (sa[2] !== sb[2])
+                    return sa[2] - sb[2];
+                return a.order - b.order;
+            });
+        }
+        // Apply font-size from CSS rules
+        for (const m of matched) {
+            if (m.property === 'font-size') {
+                applyDeclaration(style, m.property, m.value, parentStyle.fontSize, containerWidth, parentStyle.direction);
+                fontSizeSet = true;
+            }
+        }
+        // Apply font-size from inline styles
+        if (el instanceof HTMLElement && el.style.cssText) {
+            const inlineDecls = parseInlineStyle(el.style.cssText);
+            for (const decl of inlineDecls) {
+                if (decl.property === 'font-size') {
+                    applyDeclaration(style, decl.property, decl.value, parentStyle.fontSize, containerWidth, parentStyle.direction);
+                    fontSizeSet = true;
+                }
+            }
+        }
+        // Inherit font-size from parent if not set
+        if (!fontSizeSet) {
+            style.fontSize = parentStyle.fontSize;
+        }
+        // Now style.fontSize is the element's computed font-size
+        const elemFontSize = style.fontSize;
+        // --- Step 2: Apply all other properties using resolved font-size ---
+        // Apply non-fontSize tag defaults
+        if (tagDef) {
+            for (const [key, val] of Object.entries(tagDef)) {
+                if (key === 'fontSize')
+                    continue; // already handled
+                style[key] = val;
+                const cssKey = key.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+                setProps.add(cssKey);
+            }
+            // Resolve negative margin values (em multipliers from tag defaults)
+            if (style.marginTop < 0)
+                style.marginTop = Math.abs(style.marginTop) * elemFontSize;
+            if (style.marginBottom < 0)
+                style.marginBottom = Math.abs(style.marginBottom) * elemFontSize;
+            // Default padding-inline-start for lists (direction-aware)
+            if (tag === 'ul' || tag === 'ol') {
+                const dir = parentStyle.direction;
+                if (dir === 'rtl') {
+                    style.paddingRight = 40;
+                    setProps.add('padding-right');
+                }
+                else {
+                    style.paddingLeft = 40;
+                    setProps.add('padding-left');
+                }
+            }
+        }
+        // Determine direction from parent for logical property resolution
+        const direction = parentStyle.direction;
+        // Property aliases: CSS name → canonical name for setProps tracking
+        const PROP_ALIASES = {
+            'word-wrap': 'overflow-wrap',
+        };
+        // Apply matched CSS declarations (skip font-size, already applied)
+        for (const m of matched) {
+            if (m.property === 'font-size')
+                continue;
+            applyDeclaration(style, m.property, m.value, elemFontSize, containerWidth, direction);
+            setProps.add(PROP_ALIASES[m.property] || m.property);
+        }
+        // Apply inline styles (highest specificity, skip font-size)
+        const hasInlineWidth = el instanceof HTMLElement && !!el.style.width;
+        if (el instanceof HTMLElement && el.style.cssText) {
+            const inlineDecls = parseInlineStyle(el.style.cssText);
+            for (const decl of inlineDecls) {
+                if (decl.property === 'font-size') {
+                    setProps.add('font-size');
+                    continue;
+                }
+                const expanded = expandShorthand(decl.property, decl.value);
+                for (const exp of expanded) {
+                    applyDeclaration(style, exp.property, exp.value, elemFontSize, containerWidth, direction);
+                    setProps.add(PROP_ALIASES[exp.property] || exp.property);
+                }
+            }
+        }
+        // Only keep explicit width from inline styles (match DOM resolver behavior)
+        if (!hasInlineWidth) {
+            style.width = 0;
+        }
+        // Handle `dir` attribute
+        const dirAttr = el.getAttribute('dir');
+        if (dirAttr) {
+            style.direction = dirAttr;
+            setProps.add('direction');
+        }
+        // Inherit from parent for properties not explicitly set
+        setProps.add('font-size'); // already resolved
+        inheritFrom(style, parentStyle, setProps);
+        // Auto-set currentColor defaults (browser default behavior)
+        if (!setProps.has('text-decoration-color')) {
+            style.textDecorationColor = style.color;
+        }
+        if (!setProps.has('-webkit-text-stroke-color')) {
+            if (style.webkitTextStrokeColor === '' || style.webkitTextStrokeColor === 'currentColor') {
+                style.webkitTextStrokeColor = style.color;
+            }
+        }
+        else if (style.webkitTextStrokeColor === 'currentColor') {
+            style.webkitTextStrokeColor = style.color;
+        }
+        for (const side of ['Top', 'Right', 'Bottom', 'Left']) {
+            const colorKey = `border${side}Color`;
+            const propName = `border-${side.toLowerCase()}-color`;
+            if (!setProps.has(propName)) {
+                style[colorKey] = style.color;
+            }
+            else if (style[colorKey] === 'currentColor') {
+                style[colorKey] = style.color;
+            }
+        }
+        // Handle text-decoration inheritance (propagates visually, not via normal inheritance)
+        const decoSet = new Set(style.textDecorationLine.split(/\s+/).filter(d => d && d !== 'none'));
+        if (parentStyle.textDecorationLine && parentStyle.textDecorationLine !== 'none') {
+            for (const d of parentStyle.textDecorationLine.split(/\s+/)) {
+                if (d && d !== 'none')
+                    decoSet.add(d);
+            }
+        }
+        if (decoSet.size > 0) {
+            style.textDecorationLine = [...decoSet].join(' ');
+        }
+        // List marker
+        const marker = getListMarker(el);
+        // Walk children
+        const children = [];
+        for (const child of el.childNodes) {
+            const childNode = walkNode(child, style, ctx);
+            if (childNode)
+                children.push(childNode);
+        }
+        return {
+            element: el,
+            tagName: tag,
+            style,
+            children,
+            textContent: null,
+            listMarker: marker,
+        };
+    }
+    function walkNode(node, parentStyle, parentCtx) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent;
+            if (!text)
+                return null;
+            if (text.trim() === '' && !text.includes('\u00A0')) {
+                const ws = parentStyle.whiteSpace;
+                const prev = node.previousSibling;
+                const next = node.nextSibling;
+                const isInlineSibling = (n) => {
+                    if (!n || n.nodeType !== Node.ELEMENT_NODE)
+                        return n?.nodeType === Node.TEXT_NODE;
+                    const tag = n.tagName.toLowerCase();
+                    const def = TAG_DEFAULTS[tag];
+                    const d = def?.display || 'block';
+                    return d === 'inline' || d === 'inline-block';
+                };
+                if (prev && next && !isInlineSibling(prev) && !isInlineSibling(next)) {
+                    if (ws === 'pre' || ws === 'pre-wrap' || ws === 'pre-line') {
+                        // Keep
+                    }
+                    else {
+                        return null;
+                    }
+                }
+                if (ws !== 'pre' && ws !== 'pre-wrap' && ws !== 'pre-line') {
+                    if (text.includes('\n'))
+                        return null;
+                }
+            }
+            // Clone parent style for text node (text nodes don't match CSS rules)
+            const style = { ...parentStyle };
+            return {
+                element: null,
+                tagName: '#text',
+                style,
+                children: [],
+                textContent: text,
+            };
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return null;
+        const el = node;
+        const tag = el.tagName.toLowerCase();
+        if (tag === 'style' || tag === 'script')
+            return null;
+        // <br> → text node with newline
+        if (tag === 'br') {
+            return {
+                element: null,
+                tagName: '#text',
+                style: { ...parentStyle },
+                children: [],
+                textContent: '\n',
+            };
+        }
+        return resolveElement(el, parentStyle, parentCtx);
+    }
+    const rootStyle = defaultStyle();
+    const tree = resolveElement(container, rootStyle, null);
+    const cleanup = () => {
+        if (fontStyleEl)
+            fontStyleEl.remove();
+    };
+    return { tree, cleanup };
+}
+//# sourceMappingURL=css-resolver.js.map