@webstudio-is/css-data 0.90.0 → 0.266.0

package/lib/types/media-condition-simulator.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Parse a condition string like "prefers-color-scheme:dark" into feature and value.
+ */
+export declare const parseMediaCondition: (condition: string) => {
+    feature: string;
+    value: string;
+} | undefined;

package/lib/types/parse-css-value.d.ts

@@ -1,3 +1,8 @@
-import type { StyleProperty, StyleValue } from "./schema";
-export declare const isValidDeclaration: (property: string, value: string) => boolean;
-export declare const parseCssValue: (property: StyleProperty, input: string) => StyleValue;
+import { type CssNode, type FunctionNode } from "css-tree";
+import { type ColorValue, type StyleValue, type VarValue, type CssProperty } from "@webstudio-is/css-engine";
+export declare const cssTryParseValue: (input: string) => undefined | CssNode;
+export declare const isValidDeclaration: (property: CssProperty, value: string) => boolean;
+export declare const parseColor: (colorString: string) => undefined | ColorValue;
+export declare const parseCssVar: (node: FunctionNode) => undefined | VarValue;
+export declare const parseCssValue: (property: CssProperty, // Handles only long-hand values.
+input: string, topLevel?: boolean) => StyleValue;

package/lib/types/parse-css.d.ts

@@ -1,9 +1,78 @@
-import { StyleValue, type StyleProperty } from "./schema";
-type Selector = string;
-type Style = {
-    property: StyleProperty;
+import type { StyleValue, CssProperty, StyleProperty } from "@webstudio-is/css-engine";
+export type ParsedStyleDecl = {
+    breakpoint?: string;
+    selector: string;
+    state?: string;
+    property: CssProperty;
     value: StyleValue;
 };
-export type Styles = Record<Selector, Style[]>;
-export declare const parseCss: (css: string) => Styles;
+/**
+ * Store prefixed properties without change
+ * and convert to camel case only unprefixed properties
+ * @todo stop converting to camel case and use hyphenated format
+ */
+export declare const camelCaseProperty: (property: CssProperty | StyleProperty) => StyleProperty;
+export type ParseCssResult = {
+    styles: ParsedStyleDecl[];
+    errors: string[];
+};
+/**
+ * Extract all CSS custom property (--*) declarations from a CSS string,
+ * regardless of which selector rule they appear in.
+ * Useful when CSS from multiple rules (e.g. Tailwind utility classes) needs
+ * to be resolved together as if they apply to the same element.
+ */
+export declare const extractCssCustomProperties: (css: string) => Map<string, string>;
+export declare const parseCss: (css: string, cssVars: Map<string, string>) => ParseCssResult;
+export type ParsedClassSelector = {
+    /** Token name: "card" for .card, "card__title" for .card .title */
+    tokenName: string;
+    /** Target class names (the last segment): ["card"] or ["title"] */
+    classNames: string[];
+    /**
+     * Non-class selector suffixes on the target: attribute selectors, pseudo-classes, pseudo-elements.
+     * e.g. ["[disabled]"] for .btn[disabled], [":hover"] for .card:hover
+     */
+    states?: string[];
+    /**
+     * Ancestor constraints for nested selectors (e.g., .card .title).
+     * Ordered from outermost to innermost ancestor.
+     * Each entry's combinator describes the relationship to the next segment.
+     */
+    ancestors?: Array<{
+        classNames: string[];
+        combinator: "descendant" | "child";
+    }>;
+};
+/**
+ * Parse a selector string and determine if it's a class-based selector
+ * suitable for token extraction. Uses css-tree to handle the full CSS
+ * selector spec.
+ *
+ * Supports simple selectors, compound selectors, and nested selectors
+ * using descendant (" ") and child (">") combinators where ALL segments
+ * are class-based.
+ *
+ * Supported patterns:
+ *   .card                      → { tokenName: "card", classNames: ["card"] }
+ *   .card.active               → { tokenName: "card.active", classNames: ["card", "active"] }
+ *   .btn[disabled]             → { tokenName: "btn", ..., states: ["[disabled]"] }
+ *   .card:hover                → { tokenName: "card", ..., states: [":hover"] }
+ *   .card .title               → { tokenName: "card__title", ..., ancestors: [{classNames:["card"], combinator:"descendant"}] }
+ *   .card > .title             → { tokenName: "card__title", ..., ancestors: [{classNames:["card"], combinator:"child"}] }
+ *   .a .b .c                   → { tokenName: "a__b__c", ..., ancestors: [{..,"descendant"},{..,"descendant"}] }
+ *   .card > .title:hover       → { tokenName: "card__title", ..., states: [":hover"], ancestors: [...] }
+ *
+ * Returns undefined for:
+ * - Selectors with sibling combinators (+, ~)
+ * - Selectors with non-class nodes in ancestor segments (e.g., .card h1, h1 .card)
+ * - Pure element/id selectors
+ */
+export declare const parseClassBasedSelector: (selector: string) => ParsedClassSelector | undefined;
+type ParsedBreakpoint = {
+    minWidth?: number;
+    maxWidth?: number;
+    condition?: string;
+};
+export declare const parseMediaQuery: (mediaQuery: string) => undefined | ParsedBreakpoint;
 export {};

package/lib/types/property-parsers/conic-gradient.d.ts

@@ -0,0 +1,3 @@
+import type { ParsedConicGradient } from "./types";
+export declare const parseConicGradient: (gradient: string) => ParsedConicGradient | undefined;
+export declare const formatConicGradient: (parsed: ParsedConicGradient) => string;

package/lib/types/property-parsers/gradient-utils.d.ts

@@ -0,0 +1,20 @@
+import * as csstree from "css-tree";
+import { type UnitValue, type VarValue } from "@webstudio-is/css-engine";
+import type { GradientColorValue, GradientStop } from "./types";
+export declare const angleUnitIdentifiers: readonly ["deg", "grad", "rad", "turn"];
+export declare const isAngleUnit: (unit: string) => boolean;
+export declare const isAngleDimension: (node: csstree.CssNode) => node is csstree.Dimension;
+export declare const isAngleLikeFallback: (fallback: VarValue["fallback"]) => boolean;
+export declare const isVarAngle: (value: VarValue) => boolean;
+export declare const mapLengthPercentageOrVar: (node?: csstree.CssNode) => UnitValue | VarValue | undefined;
+export declare const getColor: (node: csstree.CssNode) => GradientColorValue | undefined;
+export declare const isColorStop: (node: csstree.CssNode) => boolean;
+export declare const withoutWhitespaceNodes: (nodes: csstree.CssNode[]) => csstree.CssNode[];
+export declare const parseGradientStopFromParts: (nodes: csstree.CssNode[]) => GradientStop | undefined;
+export declare const parseGradientHintFromParts: (nodes: csstree.CssNode[]) => GradientStop["hint"] | undefined;
+export declare const formatGradientStops: (stops: GradientStop[]) => string;
+export declare const normalizeRepeatingGradient: (gradient: string, repeatingName: string, baseName: string) => {
+    normalized: string;
+    isRepeating: boolean;
+};
+export declare const forEachGradientParts: (ast: csstree.CssNode, functionName: string, callback: (parts: csstree.CssNode[]) => void) => void;

package/lib/types/property-parsers/grid-template-areas.d.ts

@@ -0,0 +1,21 @@
+export type AreaInfo = {
+    name: string;
+    columnStart: number;
+    columnEnd: number;
+    rowStart: number;
+    rowEnd: number;
+};
+/**
+ * Parse grid-template-areas CSS string into structured area information.
+ * Uses css-tree to parse the value into String AST nodes,
+ * then extracts cell names from each row string.
+ *
+ * @example
+ * parseGridAreas('"header header" "sidebar main"')
+ * // Returns: [
+ * //   { name: 'header', columnStart: 1, columnEnd: 3, rowStart: 1, rowEnd: 2 },
+ * //   { name: 'sidebar', columnStart: 1, columnEnd: 2, rowStart: 2, rowEnd: 3 },
+ * //   { name: 'main', columnStart: 2, columnEnd: 3, rowStart: 2, rowEnd: 3 }
+ * // ]
+ */
+export declare const parseGridAreas: (value: string) => AreaInfo[];

package/lib/types/property-parsers/grid-template-tracks.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Represents a single grid track.
+ * Can be a simple value like "1fr", "100px", "auto"
+ * or a complex value like "minmax(100px, 1fr)"
+ */
+export type GridTrack = {
+    /** The raw CSS value of the track */
+    value: string;
+};
+/**
+ * Parse a grid-template-columns or grid-template-rows value into an array of tracks.
+ *
+ * Handles:
+ * - Simple values: "1fr", "100px", "auto", "min-content", "max-content"
+ * - Functions: "minmax(100px, 1fr)", "fit-content(200px)"
+ * - Repeat: "repeat(3, 1fr)" -> expands to ["1fr", "1fr", "1fr"]
+ * - Line names: "[header] 1fr [content] 2fr" -> ignores line names, returns ["1fr", "2fr"]
+ *
+ * @param value - The CSS value string for grid-template-columns/rows
+ * @returns Array of track values, or empty array if value is "none" or invalid
+ */
+export declare const parseGridTemplateTrackList: (value: string) => GridTrack[];
+/**
+ * Serialize an array of tracks back to a CSS value string.
+ *
+ * @param tracks - Array of track values
+ * @returns CSS string like "1fr 100px auto" or "none" if empty
+ */
+export declare const serializeGridTemplateTrackList: (tracks: GridTrack[]) => string;
+/**
+ * Represents a minmax() function with min and max values.
+ */
+export type Minmax = {
+    min: string;
+    max: string;
+};
+/**
+ * Parse a minmax() function value into its min and max parts.
+ * Returns undefined if the value is not a valid minmax() function.
+ *
+ * @example
+ * parseMinmax("minmax(100px, 1fr)") // { min: "100px", max: "1fr" }
+ * parseMinmax("1fr") // undefined
+ */
+export declare const parseMinmax: (value: string) => Minmax | undefined;
+/**
+ * Create a minmax() CSS value from min and max parts.
+ *
+ * @example
+ * serializeMinmax({ min: "100px", max: "1fr" }) // "minmax(100px,1fr)"
+ */
+export declare const serializeMinmax: (minmax: Minmax) => string;
+/**
+ * Result of checking if a grid template value is supported by the visual editor.
+ */
+export type GridTemplateSupport = {
+    supported: true;
+} | {
+    supported: false;
+    reason: string;
+    type: "subgrid" | "masonry" | "line-names" | "auto-fill" | "auto-fit";
+};
+/**
+ * Check if a grid-template-columns or grid-template-rows value can be
+ * represented and edited by the visual grid UI.
+ *
+ * Unsupported values:
+ * - `subgrid` - requires dedicated UI
+ * - `masonry` - experimental, not a track definition
+ * - `repeat(auto-fill, ...)` / `repeat(auto-fit, ...)` - dynamic track count
+ * - Line names like `[header]` - would be silently discarded on edit
+ *
+ * Note: CSS variables are supported - use computedValue which resolves them.
+ *
+ * @param value - The CSS value string for grid-template-columns/rows
+ * @returns Object indicating if supported, with reason and type if not
+ */
+export declare const checkGridTemplateSupport: (value: string) => GridTemplateSupport;
+/**
+ * Describes the mode of a grid axis (columns or rows).
+ *
+ * - "explicit": Regular explicit tracks (e.g., "1fr 2fr 100px")
+ * - "auto-fill": Dynamic tracks via repeat(auto-fill, ...)
+ * - "auto-fit": Dynamic tracks via repeat(auto-fit, ...)
+ * - "auto": Single "auto" keyword - implicit tracks based on children
+ * - "none": No explicit tracks defined
+ * - "subgrid": Subgrid inherits tracks from parent
+ * - "masonry": Experimental masonry layout
+ * - "line-names": Has named grid lines like [header]
+ */
+export type GridAxisMode = "explicit" | "auto-fill" | "auto-fit" | "auto" | "none" | "subgrid" | "masonry" | "line-names";
+/**
+ * Analyze a grid template value to determine its mode.
+ *
+ * @param value - The CSS value string for grid-template-columns/rows
+ * @returns The axis mode describing the type of grid track definition
+ *
+ * @example
+ * getGridAxisMode("1fr 2fr 100px") // "explicit"
+ * getGridAxisMode("repeat(auto-fill, minmax(200px, 1fr))") // "auto-fill"
+ * getGridAxisMode("none") // "none"
+ * getGridAxisMode("auto") // "auto"
+ * getGridAxisMode("subgrid") // "subgrid"
+ */
+export declare const getGridAxisMode: (value: string) => GridAxisMode;
+/**
+ * Check if a grid axis mode represents a dynamic/implicit grid that
+ * requires DOM probing to determine actual track count.
+ *
+ * @param mode - The grid axis mode
+ * @returns true if the mode requires DOM-based track counting
+ */
+export declare const isImplicitGridMode: (mode: GridAxisMode) => boolean;
+/**
+ * Check if a grid axis mode is editable in the visual grid UI.
+ *
+ * @param mode - The grid axis mode
+ * @returns true if the mode can be edited visually
+ */
+export declare const isEditableGridMode: (mode: GridAxisMode) => boolean;
+/**
+ * Get a display label for a grid axis mode (for the grid generator).
+ *
+ * @param mode - The grid axis mode
+ * @param trackCount - The actual track count (for explicit modes)
+ * @returns Display string like "3", "auto-fit", "none"
+ */
+export declare const getGridAxisLabel: (mode: GridAxisMode, trackCount: number) => string;

package/lib/types/property-parsers/index.d.ts

@@ -1,2 +1,6 @@
-export * from "./background";
-export * from "./box-shadow";
+export * from "./linear-gradient";
+export * from "./conic-gradient";
+export * from "./radial-gradient";
+export * from "./grid-template-tracks";
+export * from "./grid-template-areas";
+export * from "./types";

package/lib/types/property-parsers/linear-gradient.d.ts

@@ -0,0 +1,4 @@
+export type { GradientColorValue, GradientStop, ParsedGradient, ParsedLinearGradient, ParsedConicGradient, } from "./types";
+import type { ParsedLinearGradient } from "./types";
+export declare const parseLinearGradient: (gradient: string) => ParsedLinearGradient | undefined;
+export declare const formatLinearGradient: (parsed: ParsedLinearGradient) => string;

package/lib/types/property-parsers/radial-gradient.d.ts

@@ -0,0 +1,3 @@
+import type { ParsedRadialGradient } from "./types";
+export declare const parseRadialGradient: (gradient: string) => ParsedRadialGradient | undefined;
+export declare const formatRadialGradient: (parsed: ParsedRadialGradient) => string;

package/lib/types/property-parsers/types.d.ts

@@ -0,0 +1,28 @@
+import { type ColorValue, type KeywordValue, type RgbValue, type UnitValue, type VarValue } from "@webstudio-is/css-engine";
+export type GradientColorValue = ColorValue | RgbValue | KeywordValue | VarValue;
+export type GradientStop = {
+    color?: GradientColorValue;
+    position?: UnitValue | VarValue;
+    hint?: UnitValue | VarValue;
+};
+export type ParsedGradientBase = {
+    stops: GradientStop[];
+    repeating?: boolean;
+};
+export type ParsedLinearGradient = ParsedGradientBase & {
+    type: "linear";
+    angle?: UnitValue | VarValue;
+    sideOrCorner?: KeywordValue;
+};
+export type ParsedConicGradient = ParsedGradientBase & {
+    type: "conic";
+    angle?: UnitValue | VarValue;
+    position?: string;
+};
+export type ParsedRadialGradient = ParsedGradientBase & {
+    type: "radial";
+    shape?: KeywordValue;
+    size?: string;
+    position?: string;
+};
+export type ParsedGradient = ParsedLinearGradient | ParsedConicGradient | ParsedRadialGradient;

package/lib/types/selector-validation.d.ts

@@ -0,0 +1,13 @@
+export type SelectorValidationResult = {
+    success: false;
+    error: string;
+} | {
+    success: true;
+    type: "pseudo-class" | "pseudo-element" | "attribute";
+};
+/**
+ * Validates a CSS pseudo-class, pseudo-element, or attribute selector
+ * @param selector - The selector to validate (e.g., ":hover", "::before", "[data-state=open]")
+ * @returns SelectorValidationResult with success status and type or error message
+ */
+export declare const validateSelector: (selector: string) => SelectorValidationResult;

package/lib/types/shorthands.d.ts

@@ -0,0 +1,2 @@
+import { type CssProperty } from "@webstudio-is/css-engine";
+export declare const expandShorthands: (shorthands: [property: string, value: string][]) => [property: CssProperty, value: string][];

package/package.json

@@ -1,56 +1,52 @@
 {
   "name": "@webstudio-is/css-data",
-  "version": "0.90.0",
+  "version": "0.266.0",
   "description": "CSS Data",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
-    "@types/css-tree": "^2.3.1",
-    "camelcase": "^7.0.1",
-    "html-tags": "^3.3.1",
-    "jest": "^29.6.2",
-    "mdn-data": "2.0.32",
-    "tsx": "^3.12.6",
-    "type-fest": "^4.2.0",
-    "typescript": "5.1.6",
-    "zod": "^3.21.4",
-    "@webstudio-is/jest-config": "^1.0.7",
-    "@webstudio-is/scripts": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.7"
+    "esbuild": "^0.25.3",
+    "html-tags": "^4.0.0",
+    "mdn-data": "2.28.0",
+    "openai": "^3.2.1",
+    "p-retry": "^6.2.1",
+    "typescript": "5.8.2",
+    "vitest": "^3.1.2",
+    "zod": "^3.24.2",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
     "zod": "^3.19.1"
   },
   "exports": {
-    "source": "./src/index.ts",
-    "types": "./lib/types/index.d.ts",
-    "import": "./lib/index.js",
-    "require": "./lib/cjs/index.js"
+    ".": {
+      "webstudio": "./src/index.ts",
+      "types": "./lib/types/index.d.ts",
+      "import": "./lib/index.js"
+    }
   },
   "files": [
     "lib/*",
-    "src/*",
-    "!*.test.*"
+    "!*.{test,stories}.*"
   ],
   "license": "AGPL-3.0-or-later",
-  "private": false,
   "sideEffects": false,
   "dependencies": {
-    "colord": "^2.9.3",
-    "css-tree": "^2.3.1",
-    "hyphenate-style-name": "^1.0.4",
-    "openai": "^3.2.1",
-    "warn-once": "^0.1.1"
+    "change-case": "^5.4.4",
+    "css-tree": "^3.1.0",
+    "warn-once": "^0.1.1",
+    "@webstudio-is/css-engine": "0.266.0"
   },
   "scripts": {
-    "typecheck": "tsc",
-    "checks": "pnpm typecheck",
-    "dev": "build-package --watch",
-    "build": "build-package",
-    "build:mdn-data": "tsx ./bin/mdn-data.ts ./src/__generated__ &&  prettier --write \"./src/__generated__/**/*.ts\"",
-    "build:descriptions": "tsx ./bin/property-value-descriptions.ts",
-    "dts": "tsc --project tsconfig.dts.json",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
+    "typecheck": "tsgo --noEmit",
+    "build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
+    "dts": "tsc --project tsconfig.dts.json && node ./scripts/prepare-dts.mjs",
+    "build:html.css": "tsx ./bin/html.css.ts && prettier --write ./src/__generated__/html.ts",
+    "build:mdn-data": "tsx ./bin/mdn-data.ts ./src/__generated__ &&  prettier --write \"./src/__generated__/\" \"../css-engine/src/__generated__/\"",
+    "build:descriptions": "tsx ./bin/property-value-descriptions.ts && prettier --write ./src/__generated__/property-value-descriptions.ts",
+    "build:property-var-fixtures": "tsx ./bin/property-var-test-fixtures.ts && prettier --write ./src/__generated__/property-var-test-fixtures.ts",
+    "build:all": "pnpm build:html.css && pnpm build:mdn-data && pnpm build:descriptions && pnpm build:property-var-fixtures",
+    "test": "vitest run"
   }
 }