pagyra-js 0.0.1

package/src/css/selectors/parser.ts

@@ -0,0 +1,163 @@
+import type { Part, Simple, AttrCond, AttrOp, Pseudo } from "./types.js";
+
+/**
+ * Parser leve de seletor CSS → cadeia de Parts (compostos) com combinador à esquerda.
+ * Suporta: tag, #id, .classe, [attr ops], :first/last/nth-child, :not(simple)
+ * Combinadores: ' ' (desc), '>' (filho), '+' (irmão adjacente), '~' (irmãos)
+ */
+export function parseSelector(selector: string): Part[] | null {
+  if (!selector?.trim()) {
+    return null;
+  }
+
+  function parseNth(expr: string): { a: number; b: number } | null {
+    const s = expr.replace(/\s+/g, '');
+    if (s === 'odd') {
+      return { a: 2, b: 1 };
+    }
+    if (s === 'even') {
+      return { a: 2, b: 0 };
+    }
+    if (/^[+-]?\d+$/.test(s)) {
+      const result = { a: 0, b: parseInt(s, 10) };
+      return result;
+    }
+    const m = /^([+-]?\d*)n([+-]?\d+)?$/.exec(s);
+    if (!m) {
+      return null;
+    }
+    const a = m[1] === '' || m[1] === '+' ? 1 : (m[1] === '-' ? -1 : parseInt(m[1], 10));
+    const b = m[2] ? parseInt(m[2], 10) : 0;
+    const result = { a, b };
+    return result;
+  }
+
+  function parseSimpleToken(tok: string): Simple | null {
+    let rest = tok.trim();
+    if (!rest) {
+      return null;
+    }
+
+    let tag: string | null = null;
+    if (rest[0] === '*') { tag = null; rest = rest.slice(1); }
+    else if (!['#', '.', '[', ':'].includes(rest[0])) {
+      const m = /^[a-zA-Z][a-zA-Z0-9-]*/.exec(rest);
+      if (m) { tag = m[0].toLowerCase(); rest = rest.slice(m[0].length); }
+    }
+
+    let id: string | null = null;
+    const classes: string[] = [];
+    const attrs: AttrCond[] = [];
+    const pseudos: Pseudo[] = [];
+
+    while (rest.length) {
+      const ch = rest[0];
+      if (ch === '#') {
+        const m = /^#[^.#\[\]:\s>+~]+/.exec(rest);
+        if (!m) break;
+        id = m[0].slice(1);
+        rest = rest.slice(m[0].length);
+        continue;
+      }
+      if (ch === '.') {
+        const m = /^\.[^.#\[\]:\s>+~]+/.exec(rest);
+        if (!m) break;
+        classes.push(m[0].slice(1));
+        rest = rest.slice(m[0].length);
+        continue;
+      }
+      if (ch === '[') {
+        const m = /^\[(\s*[-\w:]+\s*(?:([~|^$*]?=)\s*(?:"([^"]*)"|'([^']*)'|([^\]\s]+))\s*)?)\]/.exec(rest);
+        if (!m) break;
+        const name = m[1].match(/^[-\w:]+/)![0];
+        const op = (m[2] as AttrOp) ?? 'exists';
+        const val = m[3] ?? m[4] ?? m[5];
+        const attr = op === 'exists' ? { name, op } : { name, op, value: val! };
+        attrs.push(attr);
+        rest = rest.slice(m[0].length);
+        continue;
+      }
+      if (ch === ':') {
+        // pseudos básicas
+        let m = /^:first-child/.exec(rest);
+        if (m) { pseudos.push({ kind: 'first-child' }); rest = rest.slice(m[0].length); continue; }
+        m = /^:last-child/.exec(rest);
+        if (m) { pseudos.push({ kind: 'last-child' }); rest = rest.slice(m[0].length); continue; }
+        m = /^:root\b/.exec(rest);
+        if (m) { pseudos.push({ kind: 'root' }); rest = rest.slice(m[0].length); continue; }
+        m = /^:nth-child\(\s*([^)]+)\s*\)/.exec(rest);
+        if (m) {
+          const nb = parseNth(m[1]);
+          if (nb) {
+            pseudos.push({ kind: 'nth-child', a: nb.a, b: nb.b });
+          }
+          rest = rest.slice(m[0].length); continue;
+        }
+        m = /^:not\(\s*([^)]+)\s*\)/.exec(rest);
+        if (m) {
+          const innerTok = m[1];
+          const inner = parseSimpleToken(innerTok); // um nível simples
+          if (inner) pseudos.push({ kind: 'not', inner });
+          rest = rest.slice(m[0].length);
+          continue;
+        }
+        // pseudo desconhecida → aborta para manter comportamento previsível
+        return null;
+      }
+      break; // nada mais reconhecido
+    }
+
+    const result = { tag, id, classes, attrs, pseudos };
+    return result;
+  }
+
+  // Tokenização topo-nível preservando combinadores (não entra em []/())
+  const s = selector.trim().replace(/\s+/g, ' ');
+  const tokens: (Simple | ' ' | '>' | '+' | '~')[] = [];
+  let i = 0;
+  while (i < s.length) {
+    const c = s[i];
+    if (c === ' ' || c === '>' || c === '+' || c === '~') {
+      if (c === ' ') { while (s[i] === ' ') i++; tokens.push(' '); }
+      else { tokens.push(c as any); i++; if (s[i] === ' ') i++; }
+      continue;
+    }
+    let j = i, depthSq = 0, depthPar = 0;
+    while (j < s.length) {
+      const ch = s[j];
+      if (ch === '[') depthSq++;
+      else if (ch === ']') depthSq = Math.max(0, depthSq - 1);
+      else if (ch === '(') depthPar++;
+      else if (ch === ')') depthPar = Math.max(0, depthPar - 1);
+      else if (depthSq === 0 && depthPar === 0 && (ch === ' ' || ch === '>' || ch === '+' || ch === '~')) break;
+      j++;
+    }
+    const raw = s.slice(i, j);
+    const simp = parseSimpleToken(raw);
+    if (!simp) {
+      return null;
+    }
+    tokens.push(simp);
+    i = j;
+  }
+
+  // Constrói Parts com o combinador imediatamente à esquerda
+  const parts: Part[] = [];
+  for (let k = 0; k < tokens.length; k++) {
+    const t = tokens[k];
+    if (typeof t !== 'string') {
+      let comb: ' ' | '>' | '+' | '~' | undefined = undefined;
+
+      // procura combinador direto à esquerda (pulando espaços redundantes)
+      let p = k - 1;
+      // se houver espaços encadeados, tratamos como um único '
+      while (p >= 0 && tokens[p] === ' ') { comb = ' '; p--; break; }
+      if (p >= 0 && typeof tokens[p] === 'string' && tokens[p] !== ' ') comb = tokens[p] as any;
+
+      const part = { simple: t, combinatorToLeft: comb };
+      parts.push(part);
+    }
+  }
+  const result = parts.length ? parts : null;
+  return result;
+}

package/src/css/selectors/simple-key.ts

@@ -0,0 +1,31 @@
+import type { Simple } from "./types.js";
+
+/**
+ * Gera uma chave canônica estável para memoização de matches de "Simple".
+ */
+export function simpleKey(s: Simple): string {
+  const cls = s.classes.length ? '.' + s.classes.slice().sort().join('.') : '';
+  const attrs = s.attrs.length
+    ? '[' + s.attrs
+        .map(a => a.op === 'exists' ? a.name : `${a.name}${a.op}"${a.value}"`)
+        .sort().join('][') + ']'
+    : '';
+  const pseu = s.pseudos.length
+    ? ':' + s.pseudos.map(p => {
+        switch (p.kind) {
+          case 'first-child': return 'first-child';
+          case 'last-child':  return 'last-child';
+          case 'nth-child':   return `nth-child(${p.a}n+${p.b})`;
+          case 'not': {
+            const innerKey = simpleKey(p.inner);
+            return `not(${innerKey})`;
+          }
+          default: return '';
+        }
+      }).filter(p => p !== '').sort().join(':')
+    : '';
+  const tag = s.tag ?? '*';
+  const id  = s.id ? `#${s.id}` : '';
+  const key = `${tag}${id}${cls}${attrs}${pseu}`;
+  return key;
+}

package/src/css/selectors/specificity.ts

@@ -0,0 +1,41 @@
+export type Specificity = readonly [number, number, number];
+
+/**
+ * Especificidade simplificada e prática:
+ *  a = nº de IDs
+ *  b = nº de classes + atributos + pseudo-classes (inclui :not(inner) somando o inner)
+ *  c = nº de tags (ignora '*')
+ */
+export function computeSpecificity(selector: string): Specificity {
+  const tokens = selector
+    .trim()
+    .replace(/\s+/g, ' ')
+    // separa por combinadores de topo mantendo pedacinhos simples
+    .split(/(?=\s|>|\+|~)|(?<=\s|>|\+|~)/)
+    .map(s => s.trim())
+    .filter(s => s && !/^(?:>|~|\+)$/.test(s));
+
+  let a = 0, b = 0, c = 0;
+  const countOf = (re: RegExp, str: string) => (str.match(re) ?? []).length;
+
+  for (const t of tokens) {
+    // :not(inner) — soma especificidade do inner; o :not em si não conta
+    const nots = t.match(/:not\(([^)]+)\)/g) ?? [];
+    for (const n of nots) {
+      const inner = n.replace(/^:not\(|\)$/g, '');
+      const [ia, ib, ic] = computeSpecificity(inner);
+      a += ia; b += ib; c += ic;
+    }
+    const noNot = t.replace(/:not\(([^)]+)\)/g, '');
+
+    a += countOf(/#[^.#\[\]:\s>+~]+/g, noNot);              // IDs
+    b += countOf(/\.[^.#\[\]:\s>+~]+/g, noNot);            // classes
+    b += countOf(/\[[^\]]+\]/g, noNot);                    // atributos
+    b += countOf(/:(?!:)[a-z-]+(\([^)]+\))?/g, noNot);     // pseudo-classes
+
+    const m = /^[a-zA-Z][a-zA-Z0-9-]*/.exec(noNot);
+    if (m && !/^[.#\[:]/.test(noNot) && m[0] !== '*') c += 1; // tag
+  }
+
+  return [a, b, c];
+}

package/src/css/selectors/types.ts

@@ -0,0 +1,31 @@
+// Tipos base para o sistema de seletores
+
+export type Combinator = ' ' | '>' | '+' | '~';
+
+export type AttrOp = 'exists' | '=' | '~=' | '|=' | '^=' | '$=' | '*=';
+
+export interface AttrCond {
+  name: string;
+  op: AttrOp;
+  value?: string;
+}
+
+export type Pseudo =
+  | { kind: 'first-child' }
+  | { kind: 'last-child' }
+  | { kind: 'nth-child'; a: number; b: number } // an+b (odd=2n+1, even=2n)
+  | { kind: 'not'; inner: Simple }              // apenas 1 nível simples
+  | { kind: 'root' };
+
+export interface Simple {
+  tag: string | null;      // null => universal '*'
+  id: string | null;
+  classes: string[];
+  attrs: AttrCond[];
+  pseudos: Pseudo[];
+}
+
+export interface Part {
+  simple: Simple;
+  combinatorToLeft?: Combinator; // combinador imediatamente à esquerda desse "simple"
+}

package/src/css/shorthands/border-shorthand.ts

@@ -0,0 +1,68 @@
+// src/css/shorthands/border-shorthand.ts
+
+import { DEFAULT_BORDER_WIDTH, parseBorderShorthand } from "../parsers/border-parser.js";
+import { splitCssList } from "../utils.js";
+import type { NumericLength } from "../style.js";
+
+export function applyBorderShorthand(
+  value: string,
+  applyWidth: (width: NumericLength) => void,
+  applyColor: (color: string | undefined) => void,
+  applyStyle?: (style: string | undefined) => void,
+): void {
+  const parsed = parseBorderShorthand(value);
+  if (!parsed) {
+    return;
+  }
+
+  if (applyStyle) {
+    applyStyle(parsed.style);
+  }
+
+  if (parsed.style === "none" || parsed.style === "hidden") {
+    applyWidth(0);
+  } else if (parsed.width !== undefined) {
+    applyWidth(parsed.width);
+  } else if (parsed.style) {
+    applyWidth(DEFAULT_BORDER_WIDTH);
+  }
+
+  if (parsed.color !== undefined) {
+    applyColor(parsed.color);
+  }
+}
+
+export function applyBorderColorShorthand(value: string, applyColor: (color: string) => void): void {
+  const parts = splitCssList(value);
+  if (parts.length === 0) {
+    return;
+  }
+  const [top] =
+    parts.length === 1
+      ? [parts[0], parts[0], parts[0], parts[0]]
+      : parts.length === 2
+        ? [parts[0], parts[1], parts[0], parts[1]]
+        : parts.length === 3
+          ? [parts[0], parts[1], parts[2], parts[1]]
+          : [parts[0], parts[1], parts[2], parts[3]];
+  if (top) {
+    applyColor(top);
+  }
+}
+
+export function applyBorderStyleShorthand(value: string, apply: (style: string | undefined) => void): void {
+  const parts = splitCssList(value);
+  if (parts.length === 0) {
+    return;
+  }
+  apply(parts[0]?.toLowerCase());
+}
+
+export function isNoneBorderStyle(value: string): boolean {
+  const parts = splitCssList(value);
+  if (parts.length === 0) {
+    return false;
+  }
+  const keyword = parts[0]?.toLowerCase();
+  return keyword === "none" || keyword === "hidden";
+}

package/src/css/shorthands/box-shorthand.ts

@@ -0,0 +1,33 @@
+// src/css/shorthands/box-shorthand.ts
+
+import { parseLength, parseLengthOrAuto } from "../parsers/length-parser.js";
+import { splitCssList } from "../utils.js";
+import type { RelativeLength } from "../length.js";
+
+type BoxLength = number | RelativeLength | "auto" | undefined;
+
+export function applyBoxShorthand<T extends BoxLength = BoxLength>(
+  value: string,
+  apply: (
+    top: T,
+    right: T,
+    bottom: T,
+    left: T,
+  ) => void,
+  parser: (input: string) => T = parseLengthOrAuto as unknown as (input: string) => T,
+): void {
+  const parts = splitCssList(value);
+  if (parts.length === 0) {
+    return;
+  }
+  const resolved = parts.map((part) => parser(part));
+  const [top, right, bottom, left] =
+    resolved.length === 1
+      ? [resolved[0], resolved[0], resolved[0], resolved[0]]
+      : resolved.length === 2
+        ? [resolved[0], resolved[1], resolved[0], resolved[1]]
+        : resolved.length === 3
+          ? [resolved[0], resolved[1], resolved[2], resolved[1]]
+          : [resolved[0], resolved[1], resolved[2], resolved[3]];
+  apply(top as T, right as T, bottom as T, left as T);
+}

package/src/css/style-inheritance.ts

@@ -0,0 +1,50 @@
+import type { ComputedStyle } from "./style.js";
+import { cloneLineHeight } from "./line-height.js";
+
+/**
+ * Style inheritance resolver
+ * Responsibility: Determine which CSS properties inherit from parent
+ */
+export class StyleInheritanceResolver {
+    /**
+     * Resolve inherited properties from parent style
+     */
+    static resolveInheritedProperties(
+        parentStyle: ComputedStyle,
+        mergedDefaults: Partial<any>
+    ): {
+        color?: string;
+        fontSize: number;
+        lineHeight: any;
+        fontFamily?: string;
+        fontStyle?: string;
+        fontVariant?: string;
+        fontWeight?: number;
+        letterSpacing?: number;
+        textDecorationLine?: string;
+        textDecorationColor?: string;
+        textDecorationStyle?: string;
+        overflowWrap?: string;
+        textIndent: any; // Using any to match the flexible type system
+        textTransform: string;
+        listStyleType: string;
+    } {
+        return {
+            color: parentStyle.color ?? mergedDefaults.color,
+            fontSize: parentStyle.fontSize,
+            lineHeight: cloneLineHeight(parentStyle.lineHeight),
+            fontFamily: parentStyle.fontFamily ?? mergedDefaults.fontFamily,
+            fontStyle: parentStyle.fontStyle ?? mergedDefaults.fontStyle,
+            fontVariant: parentStyle.fontVariant ?? mergedDefaults.fontVariant,
+            fontWeight: parentStyle.fontWeight ?? mergedDefaults.fontWeight,
+            letterSpacing: parentStyle.letterSpacing ?? mergedDefaults.letterSpacing,
+            textDecorationLine: parentStyle.textDecorationLine ?? mergedDefaults.textDecorationLine,
+            textDecorationColor: parentStyle.textDecorationColor ?? mergedDefaults.textDecorationColor,
+            textDecorationStyle: parentStyle.textDecorationStyle ?? mergedDefaults.textDecorationStyle,
+            overflowWrap: parentStyle.overflowWrap ?? mergedDefaults.overflowWrap,
+            textIndent: parentStyle.textIndent ?? mergedDefaults.textIndent ?? 0,
+            textTransform: parentStyle.textTransform ?? mergedDefaults.textTransform ?? "none",
+            listStyleType: parentStyle.listStyleType ?? mergedDefaults.listStyleType ?? "disc",
+        };
+    }
+}