pagyra-js 0.0.1

package/src/css/parsers/register-parsers.ts

@@ -0,0 +1,302 @@
+// src/css/parsers/register-parsers.ts
+
+import { registerPropertyParser } from "./registry.js";
+
+// Display and Flex
+import {
+  parseDisplay,
+  parseJustifyContent,
+  parseAlignItems,
+  parseAlignContent,
+  parseAlignSelf,
+  parseFlexDirection,
+  parseFlexWrap,
+} from "./display-flex-parser.js";
+
+// Color
+import { parseColor, parseBackgroundColor } from "./color-parser.js";
+
+// Border
+import {
+  parseBorderColor,
+  parseBoxShadow,
+  parseBorder,
+  parseBorderTop,
+  parseBorderRight,
+  parseBorderBottom,
+  parseBorderLeft,
+  parseBorderRadius,
+  parseBorderTopLeftRadius,
+  parseBorderTopRightRadius,
+  parseBorderBottomRightRadius,
+  parseBorderBottomLeftRadius,
+  parseBorderWidth,
+  parseBorderTopWidth,
+  parseBorderRightWidth,
+  parseBorderBottomWidth,
+  parseBorderLeftWidth,
+  parseBorderTopColor,
+  parseBorderRightColor,
+  parseBorderBottomColor,
+  parseBorderLeftColor,
+  parseBorderStyle,
+  parseBorderTopStyle,
+  parseBorderRightStyle,
+  parseBorderBottomStyle,
+  parseBorderLeftStyle,
+  parseBorderCollapse,
+} from "./border-parser-extended.js";
+
+import {
+  parseBorderBlockStart,
+  parseBorderBlockEnd,
+} from "./border-block-parser.js";
+
+import {
+  parseBorderInlineStart,
+  parseBorderInlineEnd,
+} from "./border-inline-parser.js";
+
+// Margin
+import {
+  parseMargin,
+  parseMarginTop,
+  parseMarginRight,
+  parseMarginBottom,
+  parseMarginLeft,
+} from "./margin-parser.js";
+
+import {
+  parseMarginBlockStart,
+  parseMarginBlockEnd,
+} from "./margin-block-parser.js";
+
+import {
+  parseMarginInlineStart,
+  parseMarginInlineEnd,
+} from "./margin-inline-parser.js";
+
+// Padding
+import {
+  parsePadding,
+  parsePaddingTop,
+  parsePaddingRight,
+  parsePaddingBottom,
+  parsePaddingLeft,
+} from "./padding-parser.js";
+
+import {
+  parsePaddingBlockStart,
+  parsePaddingBlockEnd,
+} from "./padding-block-parser.js";
+
+import {
+  parsePaddingInlineStart,
+  parsePaddingInlineEnd,
+} from "./padding-inline-parser.js";
+
+// Dimensions
+import {
+  parseWidth,
+  parseMinWidth,
+  parseMaxWidth,
+  parseHeight,
+  parseMinHeight,
+  parseMaxHeight,
+  parseFontSize,
+  parseLineHeight,
+  parseZIndex,
+} from "./dimension-parser.js";
+
+// Font
+import { parseFontFamily, parseFontStyle, parseFontVariant, parseFontWeight } from "./font-parser.js";
+
+// Positioning
+import { parsePosition, parseTop, parseRight, parseBottom, parseLeft } from "./position-parser.js";
+
+// Text
+import {
+  parseTextAlign,
+  parseTextDecoration,
+  parseTextDecorationLine,
+  parseTextDecorationColor,
+  parseTextDecorationStyle,
+  parseFloat,
+  parseTextIndent,
+  parseTextTransform,
+  parseLetterSpacing,
+} from "./text-parser-extended.js";
+import { parseOverflowWrap, parseWordWrap } from "./overflow-wrap-parser.js";
+import { parseTextShadow } from "./text-shadow-parser.js";
+import { parseListStyleType } from "./list-style-parser.js";
+
+// Background
+import {
+  applyBackgroundSizeDecl,
+  applyBackgroundPositionDecl,
+  applyBackgroundOriginDecl,
+  applyBackgroundRepeatDecl,
+  applyBackgroundClipDecl,
+  parseBackgroundImage,
+  parseBackground,
+  parseObjectFit,
+} from "./background-parser-extended.js";
+import { parseClipPath } from "./clip-path-parser.js";
+
+// Grid
+import {
+  parseGridTemplateColumns,
+  parseGridTemplateRows,
+  parseGridAutoFlow,
+  parseGap,
+  parseRowGap,
+  parseColumnGap,
+} from "./grid-parser-extended.js";
+
+// Opacity
+import { parseOpacity } from "./opacity-parser.js";
+
+// Flag to ensure parsers are registered only once
+let parsersRegistered = false;
+
+export function registerAllPropertyParsers(): void {
+  // Idempotency guard
+  if (parsersRegistered) {
+    return;
+  }
+  parsersRegistered = true;
+
+  // Display and Flex
+  registerPropertyParser("display", parseDisplay);
+  registerPropertyParser("justify-content", parseJustifyContent);
+  registerPropertyParser("align-items", parseAlignItems);
+  registerPropertyParser("align-content", parseAlignContent);
+  registerPropertyParser("align-self", parseAlignSelf);
+  registerPropertyParser("flex-direction", parseFlexDirection);
+  registerPropertyParser("flex-wrap", parseFlexWrap);
+
+  // Color
+  registerPropertyParser("color", parseColor);
+  registerPropertyParser("background-color", parseBackgroundColor);
+
+  // Border
+  registerPropertyParser("border-color", parseBorderColor);
+  registerPropertyParser("box-shadow", parseBoxShadow);
+  registerPropertyParser("border", parseBorder);
+  registerPropertyParser("border-top", parseBorderTop);
+  registerPropertyParser("border-right", parseBorderRight);
+  registerPropertyParser("border-bottom", parseBorderBottom);
+  registerPropertyParser("border-left", parseBorderLeft);
+  registerPropertyParser("border-radius", parseBorderRadius);
+  registerPropertyParser("border-top-left-radius", parseBorderTopLeftRadius);
+  registerPropertyParser("border-top-right-radius", parseBorderTopRightRadius);
+  registerPropertyParser("border-bottom-right-radius", parseBorderBottomRightRadius);
+  registerPropertyParser("border-bottom-left-radius", parseBorderBottomLeftRadius);
+  registerPropertyParser("border-width", parseBorderWidth);
+  registerPropertyParser("border-top-width", parseBorderTopWidth);
+  registerPropertyParser("border-right-width", parseBorderRightWidth);
+  registerPropertyParser("border-bottom-width", parseBorderBottomWidth);
+  registerPropertyParser("border-left-width", parseBorderLeftWidth);
+  registerPropertyParser("border-top-color", parseBorderTopColor);
+  registerPropertyParser("border-right-color", parseBorderRightColor);
+  registerPropertyParser("border-bottom-color", parseBorderBottomColor);
+  registerPropertyParser("border-left-color", parseBorderLeftColor);
+  registerPropertyParser("border-style", parseBorderStyle);
+  registerPropertyParser("border-top-style", parseBorderTopStyle);
+  registerPropertyParser("border-right-style", parseBorderRightStyle);
+  registerPropertyParser("border-bottom-style", parseBorderBottomStyle);
+  registerPropertyParser("border-left-style", parseBorderLeftStyle);
+  registerPropertyParser("border-collapse", parseBorderCollapse);
+  registerPropertyParser("border-block-start", parseBorderBlockStart);
+  registerPropertyParser("border-block-end", parseBorderBlockEnd);
+  registerPropertyParser("border-inline-start", parseBorderInlineStart);
+  registerPropertyParser("border-inline-end", parseBorderInlineEnd);
+
+  // Margin
+  registerPropertyParser("margin", parseMargin);
+  registerPropertyParser("margin-top", parseMarginTop);
+  registerPropertyParser("margin-right", parseMarginRight);
+  registerPropertyParser("margin-bottom", parseMarginBottom);
+  registerPropertyParser("margin-left", parseMarginLeft);
+  registerPropertyParser("margin-block-start", parseMarginBlockStart);
+  registerPropertyParser("margin-block-end", parseMarginBlockEnd);
+  registerPropertyParser("margin-inline-start", parseMarginInlineStart);
+  registerPropertyParser("margin-inline-end", parseMarginInlineEnd);
+
+  // Padding
+  registerPropertyParser("padding", parsePadding);
+  registerPropertyParser("padding-top", parsePaddingTop);
+  registerPropertyParser("padding-right", parsePaddingRight);
+  registerPropertyParser("padding-bottom", parsePaddingBottom);
+  registerPropertyParser("padding-left", parsePaddingLeft);
+  registerPropertyParser("padding-block-start", parsePaddingBlockStart);
+  registerPropertyParser("padding-block-end", parsePaddingBlockEnd);
+  registerPropertyParser("padding-inline-start", parsePaddingInlineStart);
+  registerPropertyParser("padding-inline-end", parsePaddingInlineEnd);
+
+  // Dimensions
+  registerPropertyParser("width", parseWidth);
+  registerPropertyParser("min-width", parseMinWidth);
+  registerPropertyParser("max-width", parseMaxWidth);
+  registerPropertyParser("height", parseHeight);
+  registerPropertyParser("min-height", parseMinHeight);
+  registerPropertyParser("max-height", parseMaxHeight);
+  registerPropertyParser("font-size", parseFontSize);
+  registerPropertyParser("line-height", parseLineHeight);
+  registerPropertyParser("z-index", parseZIndex);
+
+  // Font
+  registerPropertyParser("font-family", parseFontFamily);
+  registerPropertyParser("font-style", parseFontStyle);
+  registerPropertyParser("font-variant", parseFontVariant);
+  registerPropertyParser("font-weight", parseFontWeight);
+
+  // Positioning
+  registerPropertyParser("position", parsePosition);
+  registerPropertyParser("top", parseTop);
+  registerPropertyParser("right", parseRight);
+  registerPropertyParser("bottom", parseBottom);
+  registerPropertyParser("left", parseLeft);
+
+  // Text
+  registerPropertyParser("text-align", parseTextAlign);
+  registerPropertyParser("text-decoration", parseTextDecoration);
+  registerPropertyParser("text-decoration-line", parseTextDecorationLine);
+  registerPropertyParser("text-decoration-color", parseTextDecorationColor);
+  registerPropertyParser("text-decoration-style", parseTextDecorationStyle);
+  registerPropertyParser("letter-spacing", parseLetterSpacing);
+  registerPropertyParser("text-indent", parseTextIndent);
+  registerPropertyParser("text-transform", parseTextTransform);
+  registerPropertyParser("float", parseFloat);
+  registerPropertyParser("overflow-wrap", parseOverflowWrap);
+  registerPropertyParser("word-wrap", parseWordWrap);
+  registerPropertyParser("text-shadow", parseTextShadow);
+  registerPropertyParser("list-style-type", parseListStyleType);
+  // Transform (store as raw string for limited later use)
+  registerPropertyParser("transform", (value, target) => {
+    // store raw transform string
+    (target as any).transform = value;
+  });
+
+  // Background
+  registerPropertyParser("background-size", applyBackgroundSizeDecl);
+  registerPropertyParser("background-position", applyBackgroundPositionDecl);
+  registerPropertyParser("background-origin", applyBackgroundOriginDecl);
+  registerPropertyParser("background-repeat", applyBackgroundRepeatDecl);
+  registerPropertyParser("background-clip", applyBackgroundClipDecl);
+  registerPropertyParser("background-image", parseBackgroundImage);
+  registerPropertyParser("background", parseBackground);
+  registerPropertyParser("object-fit", parseObjectFit);
+  registerPropertyParser("clip-path", parseClipPath);
+
+  // Grid
+  registerPropertyParser("grid-template-columns", parseGridTemplateColumns);
+  registerPropertyParser("grid-template-rows", parseGridTemplateRows);
+  registerPropertyParser("grid-auto-flow", parseGridAutoFlow);
+  registerPropertyParser("gap", parseGap);
+  registerPropertyParser("row-gap", parseRowGap);
+  registerPropertyParser("column-gap", parseColumnGap);
+
+  // Opacity
+  registerPropertyParser("opacity", parseOpacity);
+}

package/src/css/parsers/registry.ts

@@ -0,0 +1,18 @@
+// src/css/parsers/registry.ts
+
+import type { StyleAccumulator } from "../style.js";
+import type { UnitParsers } from "../../units/units.js";
+
+export interface PropertyParser {
+  (value: string, target: StyleAccumulator, units: UnitParsers, inheritedFontWeight?: number): void;
+}
+
+export const propertyParserRegistry = new Map<string, PropertyParser>();
+
+export function registerPropertyParser(property: string, parser: PropertyParser): void {
+  propertyParserRegistry.set(property, parser);
+}
+
+export function getPropertyParser(property: string): PropertyParser | undefined {
+  return propertyParserRegistry.get(property);
+}

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

@@ -0,0 +1,144 @@
+// src/css/parsers/text-parser-extended.ts
+
+import { parseTextDecorationLine as parseTextDecorationLineValue } from "./text-parser.js";
+import { parseLengthOrPercent, parseNumeric } from "./length-parser.js";
+import type { StyleAccumulator, TextTransform } from "../style.js";
+import { NAMED_COLORS } from "../named-colors.js";
+
+export function parseTextAlign(value: string, target: StyleAccumulator): void {
+  target.textAlign = value.toLowerCase();
+}
+
+export function parseTextDecoration(value: string, target: StyleAccumulator): void {
+  const parsed = parseTextDecorationLineValue(value);
+  if (parsed !== undefined) {
+    target.textDecorationLine = parsed;
+  }
+  const style = extractTextDecorationStyle(value);
+  if (style) {
+    target.textDecorationStyle = style;
+  }
+  const color = extractTextDecorationColor(value);
+  if (color) {
+    target.textDecorationColor = color;
+  }
+}
+
+export function parseTextDecorationLine(value: string, target: StyleAccumulator): void {
+  const parsed = parseTextDecorationLineValue(value);
+  if (parsed !== undefined) {
+    target.textDecorationLine = parsed;
+  }
+}
+
+export function parseTextDecorationColor(value: string, target: StyleAccumulator): void {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return;
+  }
+  target.textDecorationColor = trimmed;
+}
+
+export function parseTextDecorationStyle(value: string, target: StyleAccumulator): void {
+  const style = extractTextDecorationStyle(value);
+  if (style) {
+    target.textDecorationStyle = style;
+  }
+}
+
+export function parseFloat(value: string, target: StyleAccumulator): void {
+  target.float = value;
+}
+
+export function parseTextIndent(value: string, target: StyleAccumulator): void {
+  const parsed = parseLengthOrPercent(value);
+  if (parsed !== undefined) {
+    target.textIndent = parsed;
+  }
+}
+
+export function parseTextTransform(value: string, target: StyleAccumulator): void {
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "initial") {
+    target.textTransform = "none";
+    return;
+  }
+  if (INHERITABLE_KEYWORDS.has(normalized)) {
+    return;
+  }
+  const resolved = TEXT_TRANSFORM_KEYWORDS[normalized];
+  if (resolved) {
+    target.textTransform = resolved;
+  }
+}
+
+export function parseLetterSpacing(value: string, target: StyleAccumulator): void {
+  const normalized = value.trim().toLowerCase();
+  if (!normalized) {
+    return;
+  }
+  if (normalized === "normal") {
+    target.letterSpacing = 0;
+    return;
+  }
+  if (INHERITABLE_KEYWORDS.has(normalized)) {
+    return;
+  }
+  const parsed = parseNumeric(value);
+  if (parsed !== undefined) {
+    target.letterSpacing = parsed;
+  }
+}
+
+const TEXT_TRANSFORM_KEYWORDS: Record<string, TextTransform> = {
+  none: "none",
+  uppercase: "uppercase",
+  lowercase: "lowercase",
+  capitalize: "capitalize",
+};
+
+const INHERITABLE_KEYWORDS = new Set(["inherit", "unset", "revert", "revert-layer"]);
+
+const COLOR_KEYWORDS = new Set(Object.keys(NAMED_COLORS).map((name) => name.toLowerCase()));
+COLOR_KEYWORDS.add("transparent");
+COLOR_KEYWORDS.add("currentcolor");
+const DECORATION_LINE_KEYWORDS = new Set(["underline", "overline", "line-through", "none"]);
+const DECORATION_STYLE_KEYWORDS = new Set(["solid", "double", "dotted", "dashed", "wavy"]);
+
+function extractTextDecorationStyle(value: string): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+  const tokens = value.trim().toLowerCase().split(/\s+/);
+  for (const token of tokens) {
+    if (DECORATION_STYLE_KEYWORDS.has(token)) {
+      return token;
+    }
+  }
+  return undefined;
+}
+
+function extractTextDecorationColor(value: string): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+  const functionalMatch = value.match(/\b(?:rgba?|hsla?)\([^)]*\)/i);
+  if (functionalMatch) {
+    return functionalMatch[0].trim();
+  }
+  const hexMatch = value.match(/#[0-9a-f]{3,8}\b/i);
+  if (hexMatch) {
+    return hexMatch[0];
+  }
+  const tokens = value.trim().split(/\s+/);
+  for (const token of tokens) {
+    const normalized = token.toLowerCase();
+    if (DECORATION_LINE_KEYWORDS.has(normalized)) {
+      continue;
+    }
+    if (COLOR_KEYWORDS.has(normalized)) {
+      return normalized;
+    }
+  }
+  return undefined;
+}

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

@@ -0,0 +1,25 @@
+// src/css/parsers/text-parser.ts
+
+export function parseTextDecorationLine(value: string): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+  const tokens = value
+    .trim()
+    .toLowerCase()
+    .split(/\s+/)
+    .filter(Boolean);
+  if (tokens.length === 0) {
+    return undefined;
+  }
+  if (tokens.includes("none")) {
+    return "none";
+  }
+  const allowed = new Set(["underline", "overline", "line-through"]);
+  const matches = tokens.filter((token) => allowed.has(token));
+  if (matches.length === 0) {
+    return undefined;
+  }
+  const unique = [...new Set(matches)];
+  return unique.join(" ");
+}

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

@@ -0,0 +1,94 @@
+import { type TextShadowInput, type StyleAccumulator } from "../style.js";
+import { clampNonNegative, splitCssCommaList, splitCssList } from "../utils.js";
+import { parseLength } from "./length-parser.js";
+
+export function parseTextShadowList(value: string): TextShadowInput[] | 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: TextShadowInput[] = [];
+  for (const layer of layers) {
+    const parsed = parseSingleTextShadow(layer);
+    if (parsed) {
+      result.push(parsed);
+    }
+  }
+  return result;
+}
+
+// Wrapper parser used by the declarations registry: assigns parsed value to the style accumulator
+export function parseTextShadow(value: string, target: StyleAccumulator): void {
+  const parsed = parseTextShadowList(value);
+  if (parsed !== undefined) {
+    target.textShadows = parsed;
+  }
+}
+
+function parseSingleTextShadow(input: string): TextShadowInput | null {
+  const tokens = splitCssList(input);
+  if (tokens.length === 0) {
+    return null;
+  }
+
+  const lengths = [];
+  let color: string | undefined;
+
+  for (const token of tokens) {
+    const length = parseLength(token);
+    if (length !== undefined) {
+      lengths.push(length);
+      continue;
+    }
+    if (color === undefined) {
+      // Heuristic for color tokens
+      const lowered = token.toLowerCase();
+      if (isColorLike(lowered)) {
+        color = token;
+        continue;
+      }
+    }
+    // ignore unknown tokens
+  }
+
+  if (lengths.length < 2) {
+    return null;
+  }
+
+  const asLength = (value: any, clamp = false) => {
+    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);
+
+  return {
+    offsetX,
+    offsetY,
+    blurRadius,
+    color,
+  };
+}
+
+function isColorLike(value: string): boolean {
+  if (!value) return false;
+  if (value.startsWith("#") || value.startsWith("rgb(") || value.startsWith("rgba(") || value.startsWith("hsl(") || value.startsWith("hsla(")) {
+    return true;
+  }
+  const colorNames = ['transparent', 'black', 'white', 'red', 'green', 'blue', 'yellow', 'gray', 'grey'];
+  return colorNames.includes(value.toLowerCase());
+}

package/src/css/properties/box-model.ts

@@ -0,0 +1,82 @@
+import type { LengthLike } from "../length.js";
+
+/**
+ * Box model CSS properties.
+ * Handles margins, padding, borders, and border radius.
+ */
+export interface BoxModelProperties {
+    /** Margin top */
+    marginTop: LengthLike;
+
+    /** Margin right */
+    marginRight: LengthLike;
+
+    /** Margin bottom */
+    marginBottom: LengthLike;
+
+    /** Margin left */
+    marginLeft: LengthLike;
+
+    /** Padding top */
+    paddingTop: LengthLike;
+
+    /** Padding right */
+    paddingRight: LengthLike;
+
+    /** Padding bottom */
+    paddingBottom: LengthLike;
+
+    /** Padding left */
+    paddingLeft: LengthLike;
+
+    /** Border width top */
+    borderTop: LengthLike;
+
+    /** Border width right */
+    borderRight: LengthLike;
+
+    /** Border width bottom */
+    borderBottom: LengthLike;
+
+    /** Border width left */
+    borderLeft: LengthLike;
+
+    /** Top-left corner horizontal radius */
+    borderTopLeftRadiusX: number;
+
+    /** Top-left corner vertical radius */
+    borderTopLeftRadiusY: number;
+
+    /** Top-right corner horizontal radius */
+    borderTopRightRadiusX: number;
+
+    /** Top-right corner vertical radius */
+    borderTopRightRadiusY: number;
+
+    /** Bottom-right corner horizontal radius */
+    borderBottomRightRadiusX: number;
+
+    /** Bottom-right corner vertical radius */
+    borderBottomRightRadiusY: number;
+
+    /** Bottom-left corner horizontal radius */
+    borderBottomLeftRadiusX: number;
+
+    /** Bottom-left corner vertical radius */
+    borderBottomLeftRadiusY: number;
+
+    /** Border style top (solid, dashed, etc.) */
+    borderStyleTop?: string;
+
+    /** Border style right */
+    borderStyleRight?: string;
+
+    /** Border style bottom */
+    borderStyleBottom?: string;
+
+    /** Border style left */
+    borderStyleLeft?: string;
+
+    /** Border color (applies to all sides) */
+    borderColor?: string;
+}