pagyra-js 0.0.1

package/src/css/parsers/border-parser-extended.ts

@@ -0,0 +1,256 @@
+// src/css/parsers/border-parser-extended.ts
+
+import { BorderModel } from "../enums.js";
+import {
+  parseBorderCornerRadius,
+  parseBorderRadiusShorthand,
+  parseBorderWidth as parseBorderWidthValue,
+} from "./border-parser.js";
+import { parseBoxShadowList } from "./box-shadow-parser.js";
+import {
+  applyBorderColorShorthand,
+  applyBorderStyleShorthand,
+  applyBorderShorthand,
+  isNoneBorderStyle,
+} from "../shorthands/border-shorthand.js";
+import { applyBoxShorthand } from "../shorthands/box-shorthand.js";
+import type { NumericLength, StyleAccumulator } from "../style.js";
+
+export function parseBorderColor(value: string, target: StyleAccumulator): void {
+  applyBorderColorShorthand(value, (color) => {
+    target.borderColor = color;
+  });
+}
+
+export function parseBoxShadow(value: string, target: StyleAccumulator): void {
+  const parsed = parseBoxShadowList(value);
+  if (parsed !== undefined) {
+    target.boxShadows = parsed;
+  }
+}
+
+export function parseBorder(value: string, target: StyleAccumulator): void {
+  applyBorderShorthand(value, (width) => {
+    target.borderTop = width;
+    target.borderRight = width;
+    target.borderBottom = width;
+    target.borderLeft = width;
+  }, (color) => {
+    target.borderColor = color ?? target.borderColor;
+  }, (style) => {
+    if (!style) return;
+    const keyword = style.toLowerCase();
+    target.borderStyleTop = keyword;
+    target.borderStyleRight = keyword;
+    target.borderStyleBottom = keyword;
+    target.borderStyleLeft = keyword;
+  });
+}
+
+export function parseBorderTop(value: string, target: StyleAccumulator): void {
+  applyBorderShorthand(value, (width) => {
+    target.borderTop = width;
+  }, (color) => {
+    target.borderColor = color ?? target.borderColor;
+  }, (style) => {
+    if (!style) return;
+    target.borderStyleTop = style.toLowerCase();
+  });
+}
+
+export function parseBorderRight(value: string, target: StyleAccumulator): void {
+  applyBorderShorthand(value, (width) => {
+    target.borderRight = width;
+  }, (color) => {
+    target.borderColor = color ?? target.borderColor;
+  }, (style) => {
+    if (!style) return;
+    target.borderStyleRight = style.toLowerCase();
+  });
+}
+
+export function parseBorderBottom(value: string, target: StyleAccumulator): void {
+  applyBorderShorthand(value, (width) => {
+    target.borderBottom = width;
+  }, (color) => {
+    target.borderColor = color ?? target.borderColor;
+  }, (style) => {
+    if (!style) return;
+    target.borderStyleBottom = style.toLowerCase();
+  });
+}
+
+export function parseBorderLeft(value: string, target: StyleAccumulator): void {
+  applyBorderShorthand(value, (width) => {
+    target.borderLeft = width;
+  }, (color) => {
+    target.borderColor = color ?? target.borderColor;
+  }, (style) => {
+    if (!style) return;
+    target.borderStyleLeft = style.toLowerCase();
+  });
+}
+
+export function parseBorderRadius(value: string, target: StyleAccumulator): void {
+  const parsed = parseBorderRadiusShorthand(value);
+  if (parsed) {
+    target.borderTopLeftRadiusX = parsed.topLeft.x;
+    target.borderTopLeftRadiusY = parsed.topLeft.y;
+    target.borderTopRightRadiusX = parsed.topRight.x;
+    target.borderTopRightRadiusY = parsed.topRight.y;
+    target.borderBottomRightRadiusX = parsed.bottomRight.x;
+    target.borderBottomRightRadiusY = parsed.bottomRight.y;
+    target.borderBottomLeftRadiusX = parsed.bottomLeft.x;
+    target.borderBottomLeftRadiusY = parsed.bottomLeft.y;
+  }
+}
+
+export function parseBorderTopLeftRadius(value: string, target: StyleAccumulator): void {
+  const parsed = parseBorderCornerRadius(value);
+  if (parsed) {
+    target.borderTopLeftRadiusX = parsed.x;
+    target.borderTopLeftRadiusY = parsed.y;
+  }
+}
+
+export function parseBorderTopRightRadius(value: string, target: StyleAccumulator): void {
+  const parsed = parseBorderCornerRadius(value);
+  if (parsed) {
+    target.borderTopRightRadiusX = parsed.x;
+    target.borderTopRightRadiusY = parsed.y;
+  }
+}
+
+export function parseBorderBottomRightRadius(value: string, target: StyleAccumulator): void {
+  const parsed = parseBorderCornerRadius(value);
+  if (parsed) {
+    target.borderBottomRightRadiusX = parsed.x;
+    target.borderBottomRightRadiusY = parsed.y;
+  }
+}
+
+export function parseBorderBottomLeftRadius(value: string, target: StyleAccumulator): void {
+  const parsed = parseBorderCornerRadius(value);
+  if (parsed) {
+    target.borderBottomLeftRadiusX = parsed.x;
+    target.borderBottomLeftRadiusY = parsed.y;
+  }
+}
+
+export function parseBorderWidth(value: string, target: StyleAccumulator): void {
+  applyBoxShorthand(
+    value,
+    (
+      top: NumericLength | undefined,
+      right: NumericLength | undefined,
+      bottom: NumericLength | undefined,
+      left: NumericLength | undefined,
+    ) => {
+      target.borderTop = top;
+      target.borderRight = right;
+      target.borderBottom = bottom;
+      target.borderLeft = left;
+    },
+    parseBorderWidthValue,
+  );
+}
+
+export function parseBorderTopWidth(value: string, target: StyleAccumulator): void {
+  target.borderTop = parseBorderWidthValue(value) ?? target.borderTop;
+}
+
+export function parseBorderRightWidth(value: string, target: StyleAccumulator): void {
+  target.borderRight = parseBorderWidthValue(value) ?? target.borderRight;
+}
+
+export function parseBorderBottomWidth(value: string, target: StyleAccumulator): void {
+  target.borderBottom = parseBorderWidthValue(value) ?? target.borderBottom;
+}
+
+export function parseBorderLeftWidth(value: string, target: StyleAccumulator): void {
+  target.borderLeft = parseBorderWidthValue(value) ?? target.borderLeft;
+}
+
+export function parseBorderTopColor(value: string, target: StyleAccumulator): void {
+  if (value.trim()) {
+    target.borderColor = value.trim();
+  }
+}
+
+export function parseBorderRightColor(value: string, target: StyleAccumulator): void {
+  if (value.trim()) {
+    target.borderColor = value.trim();
+  }
+}
+
+export function parseBorderBottomColor(value: string, target: StyleAccumulator): void {
+  if (value.trim()) {
+    target.borderColor = value.trim();
+  }
+}
+
+export function parseBorderLeftColor(value: string, target: StyleAccumulator): void {
+  if (value.trim()) {
+    target.borderColor = value.trim();
+  }
+}
+
+export function parseBorderStyle(value: string, target: StyleAccumulator): void {
+  applyBorderStyleShorthand(value, (style) => {
+    if (!style) {
+      return;
+    }
+    const keyword = style.toLowerCase();
+    target.borderStyleTop = keyword;
+    target.borderStyleRight = keyword;
+    target.borderStyleBottom = keyword;
+    target.borderStyleLeft = keyword;
+    if (keyword === "none" || keyword === "hidden") {
+      target.borderTop = 0;
+      target.borderRight = 0;
+      target.borderBottom = 0;
+      target.borderLeft = 0;
+    }
+  });
+}
+
+export function parseBorderTopStyle(value: string, target: StyleAccumulator): void {
+  const parts = value.trim().toLowerCase();
+  if (!parts) return;
+  target.borderStyleTop = parts;
+  if (isNoneBorderStyle(value)) {
+    target.borderTop = 0;
+  }
+}
+
+export function parseBorderRightStyle(value: string, target: StyleAccumulator): void {
+  const parts = value.trim().toLowerCase();
+  if (!parts) return;
+  target.borderStyleRight = parts;
+  if (isNoneBorderStyle(value)) {
+    target.borderRight = 0;
+  }
+}
+
+export function parseBorderBottomStyle(value: string, target: StyleAccumulator): void {
+  const parts = value.trim().toLowerCase();
+  if (!parts) return;
+  target.borderStyleBottom = parts;
+  if (isNoneBorderStyle(value)) {
+    target.borderBottom = 0;
+  }
+}
+
+export function parseBorderLeftStyle(value: string, target: StyleAccumulator): void {
+  const parts = value.trim().toLowerCase();
+  if (!parts) return;
+  target.borderStyleLeft = parts;
+  if (isNoneBorderStyle(value)) {
+    target.borderLeft = 0;
+  }
+}
+
+export function parseBorderCollapse(value: string, target: StyleAccumulator): void {
+  const keyword = value.trim().toLowerCase();
+  target.borderModel = keyword === "collapse" ? BorderModel.Collapse : BorderModel.Separate;
+}

package/src/css/parsers/border-parser.ts

@@ -0,0 +1,175 @@
+// src/css/parsers/border-parser.ts
+
+import { clampPositive, splitCssList } from "../utils.js";
+import { parseLength } from "./length-parser.js";
+import type { NumericLength } from "../style.js";
+
+export const BORDER_STYLE_KEYWORDS = new Set([
+  "none",
+  "hidden",
+  "solid",
+  "dashed",
+  "dotted",
+  "double",
+  "groove",
+  "ridge",
+  "inset",
+  "outset",
+]);
+
+export const BORDER_WIDTH_KEYWORD_MAP: Record<string, number> = {
+  thin: 1,
+  medium: 3,
+  thick: 5,
+};
+
+export const DEFAULT_BORDER_WIDTH = BORDER_WIDTH_KEYWORD_MAP.medium;
+
+export interface ParsedBorder {
+  width?: NumericLength;
+  style?: string;
+  color?: string;
+}
+
+export function parseBorderShorthand(value: string): ParsedBorder | null {
+  const parts = splitCssList(value);
+  if (parts.length === 0) {
+    return null;
+  }
+
+  let width: NumericLength | undefined;
+  let style: string | undefined;
+  let color: string | undefined;
+
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (!trimmed) {
+      continue;
+    }
+    if (width === undefined) {
+      const maybeWidth = parseBorderWidth(trimmed);
+      if (maybeWidth !== undefined) {
+        width = maybeWidth;
+        continue;
+      }
+    }
+
+    const lower = trimmed.toLowerCase();
+    if (!style && BORDER_STYLE_KEYWORDS.has(lower)) {
+      style = lower;
+      continue;
+    }
+
+    if (color === undefined) {
+      color = trimmed;
+    }
+  }
+
+  if (style === "none" || style === "hidden") {
+    width = 0;
+  } else if (width === undefined && style) {
+    width = DEFAULT_BORDER_WIDTH;
+  }
+
+  return { width, style, color };
+}
+
+export function parseBorderWidth(value: string): NumericLength | undefined {
+  const trimmed = value.trim().toLowerCase();
+  if (!trimmed) {
+    return undefined;
+  }
+  if (trimmed in BORDER_WIDTH_KEYWORD_MAP) {
+    return BORDER_WIDTH_KEYWORD_MAP[trimmed];
+  }
+  return parseLength(value);
+}
+
+export interface ParsedCornerRadiusPair {
+  x: NumericLength;
+  y: NumericLength;
+}
+
+export interface ParsedBorderRadius {
+  topLeft: ParsedCornerRadiusPair;
+  topRight: ParsedCornerRadiusPair;
+  bottomRight: ParsedCornerRadiusPair;
+  bottomLeft: ParsedCornerRadiusPair;
+}
+
+export function parseBorderRadiusShorthand(value: string): ParsedBorderRadius | null {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const [horizontalPart, verticalPart] = trimmed.split("/").map((part) => part.trim());
+  const horizontalValues = expandBorderRadiusList(horizontalPart);
+  if (!horizontalValues) {
+    return null;
+  }
+  const verticalValues = verticalPart ? expandBorderRadiusList(verticalPart) : horizontalValues;
+  if (!verticalValues) {
+    return null;
+  }
+  return {
+    topLeft: { x: horizontalValues[0], y: verticalValues[0] },
+    topRight: { x: horizontalValues[1], y: verticalValues[1] },
+    bottomRight: { x: horizontalValues[2], y: verticalValues[2] },
+    bottomLeft: { x: horizontalValues[3], y: verticalValues[3] },
+  };
+}
+
+export function parseBorderCornerRadius(value: string): ParsedCornerRadiusPair | undefined {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  const [horizontalRaw, verticalRaw] = trimmed.split("/").map((part) => part.trim());
+  const horizontalList = splitCssList(horizontalRaw);
+  if (horizontalList.length === 0) {
+    return undefined;
+  }
+  const horizontal = parseRadiusValue(horizontalList[0]);
+  let vertical: NumericLength;
+  if (verticalRaw) {
+    const verticalList = splitCssList(verticalRaw);
+    vertical = parseRadiusValue(verticalList[0]);
+  } else if (horizontalList.length > 1) {
+    vertical = parseRadiusValue(horizontalList[1]);
+  } else {
+    vertical = horizontal;
+  }
+  return { x: horizontal, y: vertical };
+}
+
+function parseRadiusValue(value: string): NumericLength {
+  const parsed = parseLength(value);
+  if (parsed === undefined) {
+    return 0;
+  }
+  if (typeof parsed === "number") {
+    return clampPositive(parsed);
+  }
+  return parsed;
+}
+
+function expandBorderRadiusList(input: string | undefined): [NumericLength, NumericLength, NumericLength, NumericLength] | null {
+  if (!input) {
+    return null;
+  }
+  const parts = splitCssList(input);
+  if (parts.length === 0) {
+    return null;
+  }
+  const resolved = parts.map((part) => parseRadiusValue(part));
+  switch (resolved.length) {
+    case 1:
+      return [resolved[0], resolved[0], resolved[0], resolved[0]];
+    case 2:
+      return [resolved[0], resolved[1], resolved[0], resolved[1]];
+    case 3:
+      return [resolved[0], resolved[1], resolved[2], resolved[1]];
+    default:
+      return [resolved[0], resolved[1], resolved[2], resolved[3]];
+  }
+}

package/src/css/parsers/box-shadow-parser.ts

@@ -0,0 +1,106 @@
+// src/css/parsers/box-shadow-parser.ts
+
+import { type BoxShadowInput, type NumericLength } from "../style.js";
+import { clampNonNegative, splitCssCommaList, splitCssList } from "../utils.js";
+import { parseLength } from "./length-parser.js";
+
+export function parseBoxShadowList(value: string): BoxShadowInput[] | undefined {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  const keyword = trimmed.toLowerCase();
+  if (keyword === "none" || keyword === "initial") {
+    return [];
+  }
+  if (keyword === "inherit" || keyword === "revert" || keyword === "revert-layer") {
+    return undefined;
+  }
+  const layers = splitCssCommaList(trimmed);
+  const result: BoxShadowInput[] = [];
+  for (const layer of layers) {
+    const parsed = parseSingleBoxShadow(layer);
+    if (parsed) {
+      result.push(parsed);
+    }
+  }
+  return result;
+}
+
+function parseSingleBoxShadow(input: string): BoxShadowInput | null {
+  const tokens = splitCssList(input);
+  if (tokens.length === 0) {
+    return null;
+  }
+  let inset = false;
+  const lengths: NumericLength[] = [];
+  let color: string | undefined;
+
+  for (const token of tokens) {
+    const lowered = token.toLowerCase();
+    if (lowered === "inset") {
+      inset = true;
+      continue;
+    }
+    const length = parseLength(token);
+    if (length !== undefined) {
+      lengths.push(length);
+      continue;
+    }
+    if (color === undefined) {
+      // Check if this looks like a color
+      if (isColorLike(token)) {
+        color = token;
+        continue;
+      }
+    }
+    // Ignore unknown tokens instead of failing
+    continue;
+  }
+
+  if (lengths.length < 2) {
+    return null;
+  }
+
+  const asLength = (value: NumericLength | undefined, clamp = false): NumericLength => {
+    if (value === undefined) {
+      return 0;
+    }
+    if (typeof value === "number" && clamp) {
+      return clampNonNegative(value);
+    }
+    if (typeof value === "number") {
+      return value;
+    }
+    return value;
+  };
+
+  const offsetX = asLength(lengths[0]);
+  const offsetY = asLength(lengths[1]);
+  const blurRadius = asLength(lengths[2], true);
+  const spreadRadius = asLength(lengths[3]);
+
+  return {
+    inset,
+    offsetX,
+    offsetY,
+    blurRadius,
+    spreadRadius,
+    color,
+  };
+}
+
+function isColorLike(value: string): boolean {
+  const lowerValue = value.toLowerCase();
+  // Basic color detection
+  if (lowerValue.startsWith('#') ||
+      lowerValue.startsWith('rgb(') ||
+      lowerValue.startsWith('rgba(') ||
+      lowerValue.startsWith('hsl(') ||
+      lowerValue.startsWith('hsla(')) {
+    return true;
+  }
+  // Common color names
+  const colorNames = ['transparent', 'black', 'white', 'red', 'green', 'blue', 'yellow', 'gray', 'grey'];
+  return colorNames.includes(lowerValue);
+}

package/src/css/parsers/clip-path-parser.ts

@@ -0,0 +1,92 @@
+import type { StyleAccumulator } from "../style.js";
+import type { ClipPath, ClipPathLength, ClipPathPolygon, ClipPathReferenceBox } from "../clip-path-types.js";
+import { parseLengthOrPercent } from "./length-parser.js";
+
+// Parses clip-path values. Currently supports polygon() with px or % coordinates.
+export function parseClipPath(value: string, target: StyleAccumulator): void {
+  const parsed = parseClipPathValue(value);
+  if (!parsed) {
+    return;
+  }
+  target.clipPath = parsed;
+}
+
+function parseClipPathValue(value: string): ClipPath | undefined {
+  if (!value) return undefined;
+  const normalized = value.trim();
+  if (normalized === "none") {
+    return undefined;
+  }
+
+  const polygon = parsePolygon(normalized);
+  if (polygon) {
+    return polygon;
+  }
+  return undefined;
+}
+
+function parsePolygon(input: string): ClipPathPolygon | undefined {
+  const match = /^polygon\s*\((.+)\)$/i.exec(input);
+  if (!match) {
+    return undefined;
+  }
+  const body = match[1].trim();
+  if (!body) {
+    return undefined;
+  }
+
+  // Split points by commas; if no commas, fall back to whitespace grouping.
+  const rawPoints = body.includes(",") ? body.split(/\s*,\s*/) : splitEvenTokens(body.split(/\s+/));
+  const points: ClipPathPolygon["points"] = [];
+
+  for (const raw of rawPoints) {
+    const coords = raw.trim().split(/\s+/).filter(Boolean);
+    if (coords.length < 2) {
+      return undefined;
+    }
+    const x = parseClipLength(coords[0]);
+    const y = parseClipLength(coords[1]);
+    if (!x || !y) {
+      return undefined;
+    }
+    points.push({ x, y });
+  }
+
+  if (points.length < 3) {
+    return undefined;
+  }
+
+  const referenceBox: ClipPathReferenceBox = "border-box";
+  return {
+    type: "polygon",
+    points,
+    referenceBox,
+  };
+}
+
+function splitEvenTokens(tokens: string[]): string[] {
+  const result: string[] = [];
+  for (let i = 0; i < tokens.length; i += 2) {
+    const a = tokens[i];
+    const b = tokens[i + 1];
+    if (!a || !b) {
+      break;
+    }
+    result.push(`${a} ${b}`);
+  }
+  return result;
+}
+
+function parseClipLength(token: string): ClipPathLength | undefined {
+  const parsed = parseLengthOrPercent(token);
+  if (parsed === undefined) {
+    return undefined;
+  }
+  if (typeof parsed === "number") {
+    return { unit: "px", value: parsed };
+  }
+  if (typeof parsed === "object" && (parsed as any).unit === "percent") {
+    return { unit: "percent", value: (parsed as any).value as number };
+  }
+  return undefined;
+}

package/src/css/parsers/color-parser.ts

@@ -0,0 +1,14 @@
+// src/css/parsers/color-parser.ts
+
+import type { StyleAccumulator } from "../style.js";
+
+export function parseColor(value: string, target: StyleAccumulator): void {
+  target.color = value;
+}
+
+export function parseBackgroundColor(value: string, target: StyleAccumulator): void {
+  if (!target.backgroundLayers) {
+    target.backgroundLayers = [];
+  }
+  target.backgroundLayers.push({ kind: "color", color: value });
+}