UNPKG

@wix/css-property-parser

Version:

A comprehensive TypeScript library for parsing and serializing CSS property values with full MDN specification compliance

974 lines (973 loc) 45.8 kB
export declare const FONT_STYLE_KEYWORDS: readonly ["normal", "italic", "oblique"]; export declare const FONT_VARIANT_KEYWORDS: readonly ["normal", "small-caps"]; export declare const FONT_WEIGHT_KEYWORDS: readonly ["normal", "bold", "bolder", "lighter"]; export declare const FONT_STRETCH_KEYWORDS: readonly ["normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"]; export declare const FONT_SIZE_KEYWORDS: readonly ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "larger", "smaller", "math"]; export declare const SYSTEM_FONT_KEYWORDS: readonly ["caption", "icon", "menu", "message-box", "small-caption", "status-bar"]; export declare const TEXT_ALIGN_KEYWORDS: readonly ["left", "right", "center", "justify", "justify-all", "start", "end", "match-parent"]; export declare const TEXT_TRANSFORM_KEYWORDS: readonly ["none", "capitalize", "uppercase", "lowercase", "full-width", "full-size-kana"]; export declare const TEXT_DECORATION_LINE_KEYWORDS: readonly ["none", "underline", "overline", "line-through", "blink"]; export declare const TEXT_DECORATION_STYLE_KEYWORDS: readonly ["solid", "double", "dotted", "dashed", "wavy"]; export declare const TEXT_DECORATION_THICKNESS_KEYWORDS: readonly ["auto", "from-font", "thin", "medium", "thick"]; export declare const LETTER_SPACING_KEYWORDS: readonly ["normal"]; export declare const TEXT_OVERFLOW_KEYWORDS: readonly ["clip", "ellipsis"]; export declare const OBJECT_FIT_KEYWORDS: readonly ["fill", "contain", "cover", "none", "scale-down"]; export declare const TEXT_INDENT_KEYWORDS: readonly ["each-line", "hanging"]; export declare const WHITE_SPACE_KEYWORDS: readonly ["normal", "nowrap", "pre", "pre-wrap", "pre-line", "break-spaces"]; export declare const WORD_BREAK_KEYWORDS: readonly ["normal", "break-all", "keep-all", "break-word"]; export declare const OVERFLOW_WRAP_KEYWORDS: readonly ["normal", "anywhere", "break-word"]; export declare const WRITING_MODE_KEYWORDS: readonly ["horizontal-tb", "vertical-rl", "vertical-lr"]; export declare const BLEND_MODE_KEYWORDS: readonly ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]; export declare const BOX_KEYWORDS: readonly ["border-box", "padding-box", "content-box"]; export declare const BACKGROUND_ATTACHMENT_KEYWORDS: readonly ["scroll", "fixed", "local"]; export declare const BACKGROUND_REPEAT_KEYWORDS: readonly ["repeat", "no-repeat", "repeat-x", "repeat-y", "space", "round"]; export declare const BACKGROUND_SIZE_KEYWORDS: readonly ["auto", "cover", "contain"]; export declare const BACKGROUND_COLOR_KEYWORDS: readonly ["transparent"]; export declare const BACKGROUND_IMAGE_KEYWORDS: readonly ["none"]; export declare const BORDER_STYLE_KEYWORDS: readonly ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"]; export declare const BORDER_WIDTH_KEYWORDS: readonly ["thin", "medium", "thick"]; export declare const FLEX_DIRECTION_KEYWORDS: readonly ["row", "row-reverse", "column", "column-reverse"]; export declare const BASIC_ALIGNMENT_KEYWORDS: readonly ["normal", "stretch"]; export declare const BASIC_ALIGNMENT_WITH_AUTO_KEYWORDS: readonly ["auto", "normal", "stretch"]; export declare const POSITIONAL_ALIGNMENT_KEYWORDS: readonly ["center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "left", "right", "anchor-center"]; export declare const BASELINE_ALIGNMENT_KEYWORDS: readonly ["baseline", "first baseline", "last baseline"]; export declare const OVERFLOW_ALIGNMENT_KEYWORDS: readonly ["safe", "unsafe"]; export declare const SIZING_KEYWORDS: readonly ["max-content", "min-content", "fit-content", "fill-available", "available"]; export declare const AUTO_KEYWORD: "auto"; export declare const NONE_KEYWORD: "none"; export declare const BASIC_SIZING_KEYWORDS: readonly ["auto", "max-content", "min-content", "fit-content", "fill-available", "available"]; export declare const MAX_SIZING_KEYWORDS: readonly ["none", "max-content", "min-content", "fit-content", "fill-available", "available"]; export declare const JUSTIFY_CONTENT_NORMAL_KEYWORDS: readonly ["normal"]; export declare const JUSTIFY_CONTENT_DISTRIBUTED_KEYWORDS: readonly ["space-between", "space-around", "space-evenly", "stretch"]; export declare const DISPLAY_KEYWORDS: readonly ["block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "table", "inline-table", "table-row", "table-column", "table-row-group", "table-column-group", "table-header-group", "table-footer-group", "table-cell", "table-caption", "list-item", "none", "contents", "flow-root", "ruby", "ruby-base", "ruby-text", "ruby-base-container", "ruby-text-container"]; export declare const OVERFLOW_KEYWORDS: readonly ["visible", "hidden", "scroll", "auto", "clip"]; export declare const VISIBILITY_KEYWORDS: readonly ["visible", "hidden", "collapse"]; export declare const Z_INDEX_KEYWORDS: readonly ["auto"]; /** * Global CSS keywords that are valid for all CSS properties */ export type GlobalKeyword = 'inherit' | 'initial' | 'unset' | 'revert' | 'revert-layer'; /** * Standard CSS Function Expression format * ALL expression types must follow this pattern: * - expression: the value inside the brackets () * - function: the function name (calc, clamp, min, max, etc.) */ export type CSSFunctionName = 'calc' | 'min' | 'max' | 'clamp' | 'anchor-size'; export interface CSSFunctionExpression { type?: 'function' | undefined; expression: string; function: CSSFunctionName; } interface BaseKeyword { type: 'keyword'; } /** * CSS Number value (no unit) - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/number */ export interface NumberValue { type: 'number'; value: number; } /** * CSS Number keyword support */ export type NumberKeyword = GlobalOnlyKeyword; /** * Union type for all CSS number values per MDN */ export type Number = NumberValue | CSSFunction | NumberKeyword | CSSVariableValue; /** * CSS Length value (with unit) - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/length */ export interface Length { type: 'length'; value: number; unit: string; } /** * CSS Length calc expression - standardized format */ export type LengthCalcExpression = CSSFunction; /** * Union type for all CSS length values per MDN */ export type LengthValue = Length | LengthCalcExpression | CSSVariableValue; /** * CSS Percentage value (with % unit) - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/percentage */ export interface Percentage { type: 'percentage'; value: number; unit: '%'; } /** * CSS Percentage calc expression - standardized format */ export type PercentageCalcExpression = CSSFunction; /** * Union type for all CSS percentage values per MDN */ export type PercentageValue = Percentage | PercentageCalcExpression | CSSVariableValue; /** * CSS Angle units - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/angle */ export type AngleUnit = 'deg' | 'grad' | 'rad' | 'turn'; /** * CSS Angle value (with unit) - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/angle */ export interface Angle { type: 'angle'; value: number; unit: AngleUnit; } /** * CSS Angle calc expression - standardized format */ export type AngleCalcExpression = CSSFunction; /** * Union type for all CSS angle values per MDN */ export type AngleValue = Angle | AngleCalcExpression | CSSVariableValue; /** * CSS Time units - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/time */ export type TimeUnit = 's' | 'ms'; /** * CSS Time value (with unit) - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/time */ export interface Time { type: 'time'; value: number; unit: TimeUnit; } /** * CSS Time calc expression - standardized format */ export type TimeCalcExpression = CSSFunction; /** * Union type for all CSS time values per MDN */ export type TimeValue = Time | TimeCalcExpression | CSSVariableValue; /** * CSS String value (quoted string) - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/string */ export interface CSSString { type: 'string'; value: string; quote: '"' | "'"; } /** * Union type for all CSS string values per MDN */ export type StringValue = CSSString | CSSVariableValue; /** * CSS Variable (Custom Property) - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */ export interface CSSVariable { type: 'variable'; CSSvariable: string; defaultValue?: string; } /** * Union type for all CSS variable values per MDN */ export type CSSVariableValue = CSSVariable; /** * Simple type aliases that match what evaluators actually use * These refer to the centralized atomic types defined above */ export type CSSLengthValue = LengthValue; export type CSSPercentageValue = PercentageValue; export type CSSLengthPercentageValue = LengthValue | PercentageValue | AnchorSizeValue; export type CSSNumberValue = Number; export type CSSAngleValue = AngleValue; export type CSSTimeValue = TimeValue; export type CSSStringValue = StringValue; export type LengthPercentageValue = CSSLengthValue | CSSPercentageValue | CSSVariableValue; export type ColorValue = CSSColorValue | CSSVariableValue; /** * CSS Color value - MDN specification compliant * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value */ export interface CSSColorValue { type: 'color'; format: 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'named' | 'transparent' | 'currentColor' | 'keyword'; values: { r?: number; g?: number; b?: number; h?: number; s?: number; l?: number; a?: number; name?: string; }; } /** * CSS Position value for background-position, object-position, etc. * Supports both numeric positions and keyword positions with optional offsets */ export interface CSSPositionValue { type: 'position'; x: string; y: string; xOffset?: string; yOffset?: string; } /** * CSS Function type - follows standardized expression format * Legacy alias for CSSFunctionExpression */ export interface CSSFunction { type: 'function'; expression: string; function: CSSFunctionName; } export type AnchorName = string; export type AnchorSizeKeyword = 'width' | 'height' | 'block' | 'inline' | 'self-block' | 'self-inline'; export declare const ANCHOR_SIZE_KEYWORDS: readonly ["width", "height", "block", "inline", "self-block", "self-inline"]; export interface AnchorSizeFunction { function: 'anchor-size'; anchorName?: AnchorName; sizeKeyword?: AnchorSizeKeyword; fallback?: CSSLengthValue | CSSPercentageValue; } export type AnchorSizeValue = AnchorSizeFunction | CSSVariableValue; export type AutoKeyword = 'auto'; export type NormalKeyword = 'normal'; export type NoneKeyword = 'none'; export type MaxContentKeyword = 'max-content'; export type MinContentKeyword = 'min-content'; export type FitContentKeyword = 'fit-content'; export type FillAvailableKeyword = 'fill-available'; export type AvailableKeyword = 'available'; export type ContentSizingKeyword = MaxContentKeyword | MinContentKeyword | FitContentKeyword | FillAvailableKeyword | AvailableKeyword; export type BorderBoxKeyword = 'border-box'; export type PaddingBoxKeyword = 'padding-box'; export type ContentBoxKeyword = 'content-box'; export type BoxKeyword = BorderBoxKeyword | PaddingBoxKeyword | ContentBoxKeyword; export type CenterKeyword = 'center'; export type StartKeyword = 'start'; export type EndKeyword = 'end'; export type LeftKeyword = 'left'; export type RightKeyword = 'right'; export type TopKeyword = 'top'; export type BottomKeyword = 'bottom'; export type SafeKeyword = 'safe'; export type UnsafeKeyword = 'unsafe'; export type BaselineKeyword = 'baseline'; export type FirstBaselineKeyword = 'first baseline'; export type LastBaselineKeyword = 'last baseline'; export type StretchKeyword = 'stretch'; export type BoldKeyword = 'bold'; export type BolderKeyword = 'bolder'; export type LighterKeyword = 'lighter'; export type ItalicKeyword = 'italic'; export type ObliqueKeyword = 'oblique'; export type ThinKeyword = 'thin'; export type MediumKeyword = 'medium'; export type ThickKeyword = 'thick'; export type RepeatKeyword = 'repeat'; export type SpaceKeyword = 'space'; export type RoundKeyword = 'round'; export type NoRepeatKeyword = 'no-repeat'; /** * Shared keyword interface for properties that only accept global keywords * Used by: NumberKeyword, PaddingKeyword, OpacityKeyword, BorderRadiusKeyword, TextDecorationLineGlobalKeyword */ export interface GlobalOnlyKeyword extends BaseKeyword { keyword: GlobalKeyword; } /** * Shared keyword interface for properties that accept normal + global keywords * Used by: ColumnGapKeyword, RowGapKeyword, GapKeyword, LetterSpacingKeyword, LineHeightKeyword */ export interface NormalGlobalKeyword extends BaseKeyword { keyword: NormalKeyword | GlobalKeyword; } /** * Shared keyword interface for properties that accept none + global keywords * Used by: BackgroundImageKeyword, BackgroundKeyword, TextShadowKeyword */ export interface NoneGlobalKeyword extends BaseKeyword { keyword: NoneKeyword | GlobalKeyword; } /** * Shared keyword interface for properties that accept box model + global keywords * Used by: BackgroundClipKeyword, BackgroundOriginKeyword */ export interface BoxGlobalKeyword extends BaseKeyword { keyword: BoxKeyword | GlobalKeyword; } /** * Shared keyword interface for properties that accept sizing + global keywords * Used by: HeightKeyword, WidthKeyword */ export interface SizingGlobalKeyword extends BaseKeyword { keyword: SizingKeyword | GlobalKeyword; } /** * Shared keyword interface for properties that accept auto + content sizing + global keywords * Used by: MinHeightKeyword, MinWidthKeyword */ export interface AutoContentSizingGlobalKeyword extends BaseKeyword { keyword: AutoKeyword | ContentSizingKeyword | GlobalKeyword; } /** * Shared keyword interface for properties that accept none + content sizing + global keywords * Used by: MaxHeightKeyword, MaxWidthKeyword */ export interface NoneContentSizingGlobalKeyword extends BaseKeyword { keyword: NoneKeyword | ContentSizingKeyword | GlobalKeyword; } export type BasicAlignmentKeyword = NormalKeyword | StretchKeyword; export type PositionalAlignmentKeyword = CenterKeyword | StartKeyword | EndKeyword | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | LeftKeyword | RightKeyword; export type BaselineAlignmentKeyword = BaselineKeyword | FirstBaselineKeyword | LastBaselineKeyword; export type OverflowAlignmentKeyword = UnsafeKeyword | SafeKeyword; export type AlignmentKeyword = BasicAlignmentKeyword | PositionalAlignmentKeyword | BaselineAlignmentKeyword | `${OverflowAlignmentKeyword} ${PositionalAlignmentKeyword}`; export interface AlignItemsKeyword extends BaseKeyword { keyword: AlignmentKeyword | GlobalKeyword; } export interface AlignSelfKeyword extends BaseKeyword { keyword: AutoKeyword | AlignmentKeyword | GlobalKeyword; } export type JustifyContentDistributedKeyword = 'space-between' | 'space-around' | 'space-evenly' | StretchKeyword; export type JustifyContentKeyword = NormalKeyword | PositionalAlignmentKeyword | JustifyContentDistributedKeyword | `${OverflowAlignmentKeyword} ${PositionalAlignmentKeyword}`; export interface JustifyContentKeywordValue extends BaseKeyword { keyword: JustifyContentKeyword | GlobalKeyword; } export type FlexDirectionKeyword = 'row' | 'row-reverse' | 'column' | 'column-reverse'; export interface FlexDirectionKeywordValue extends BaseKeyword { keyword: FlexDirectionKeyword | GlobalKeyword; } export type SizingKeyword = AutoKeyword | ContentSizingKeyword; export type HeightKeyword = SizingGlobalKeyword; export type WidthKeyword = SizingGlobalKeyword; export type MaxHeightKeyword = NoneContentSizingGlobalKeyword; export type MaxWidthKeyword = NoneContentSizingGlobalKeyword; export type MinHeightKeyword = AutoContentSizingGlobalKeyword; export type MinWidthKeyword = AutoContentSizingGlobalKeyword; export type InlineSizeKeyword = SizingGlobalKeyword; export type BlockSizeKeyword = SizingGlobalKeyword; export type MinInlineSizeKeyword = AutoContentSizingGlobalKeyword; export type MinBlockSizeKeyword = AutoContentSizingGlobalKeyword; export type MaxInlineSizeKeyword = NoneContentSizingGlobalKeyword; export type MaxBlockSizeKeyword = NoneContentSizingGlobalKeyword; export type ColumnGapKeyword = NormalGlobalKeyword; export type RowGapKeyword = NormalGlobalKeyword; export type GapKeyword = NormalGlobalKeyword; export interface GapExpanded { rowGap: CSSLengthValue | CSSPercentageValue | GapKeyword | CSSVariableValue; columnGap: CSSLengthValue | CSSPercentageValue | GapKeyword | CSSVariableValue; } export interface MarginKeyword extends BaseKeyword { keyword: AutoKeyword | GlobalKeyword; } export interface MarginExpanded { type?: 'margin' | undefined; marginTop: CSSLengthPercentageValue | MarginKeyword | CSSVariableValue; marginRight: CSSLengthPercentageValue | MarginKeyword | CSSVariableValue; marginBottom: CSSLengthPercentageValue | MarginKeyword | CSSVariableValue; marginLeft: CSSLengthPercentageValue | MarginKeyword | CSSVariableValue; } export type PaddingKeyword = GlobalOnlyKeyword; export interface PaddingExpanded { type: 'padding-expanded'; paddingTop: CSSLengthValue | CSSPercentageValue | PaddingKeyword | CSSVariableValue; paddingRight: CSSLengthValue | CSSPercentageValue | PaddingKeyword | CSSVariableValue; paddingBottom: CSSLengthValue | CSSPercentageValue | PaddingKeyword | CSSVariableValue; paddingLeft: CSSLengthValue | CSSPercentageValue | PaddingKeyword | CSSVariableValue; } export type OpacityKeyword = GlobalOnlyKeyword; export type LetterSpacingKeyword = NormalGlobalKeyword; export type LineHeightKeyword = NormalGlobalKeyword; export type TextAlignKeyword = LeftKeyword | RightKeyword | CenterKeyword | 'justify' | 'justify-all' | StartKeyword | EndKeyword | 'match-parent'; export interface TextAlignKeywordValue extends BaseKeyword { keyword: TextAlignKeyword | GlobalKeyword; } export type TextTransformKeyword = NoneKeyword | 'capitalize' | 'uppercase' | 'lowercase' | 'full-width' | 'full-size-kana'; export interface TextTransformKeywordValue extends BaseKeyword { keyword: TextTransformKeyword | GlobalKeyword; } export type BorderRadiusKeyword = GlobalOnlyKeyword; export interface BorderRadiusExpanded { type?: 'border-radius' | undefined; borderTopLeftRadius: CSSLengthValue | CSSPercentageValue | BorderRadiusKeyword | CSSVariableValue; borderTopRightRadius: CSSLengthValue | CSSPercentageValue | BorderRadiusKeyword | CSSVariableValue; borderBottomRightRadius: CSSLengthValue | CSSPercentageValue | BorderRadiusKeyword | CSSVariableValue; borderBottomLeftRadius: CSSLengthValue | CSSPercentageValue | BorderRadiusKeyword | CSSVariableValue; } export type BackgroundAttachmentKeyword = 'scroll' | 'fixed' | 'local'; export interface BackgroundAttachmentKeywordValue extends BaseKeyword { keyword: BackgroundAttachmentKeyword | GlobalKeyword; } export type BackgroundClipKeyword = BoxGlobalKeyword; export interface BackgroundColorKeyword extends BaseKeyword { keyword: 'transparent' | GlobalKeyword; } export type BackgroundImageKeyword = NoneGlobalKeyword; export interface BackgroundImageUrl { type: 'url'; url: string; quoted: boolean; } export interface BackgroundImageGradient { type: 'gradient'; function: string; value: string; } export type BackgroundOriginKeyword = BoxGlobalKeyword; export interface BackgroundPositionKeyword extends BaseKeyword { keyword: LeftKeyword | CenterKeyword | RightKeyword | TopKeyword | BottomKeyword | GlobalKeyword; } export type BackgroundRepeatKeyword = RepeatKeyword | SpaceKeyword | RoundKeyword | NoRepeatKeyword | 'repeat-x' | 'repeat-y'; export interface BackgroundRepeatKeywordValue extends BaseKeyword { keyword: BackgroundRepeatKeyword | GlobalKeyword; } export type BackgroundSizeKeyword = AutoKeyword | 'cover' | 'contain'; export interface BackgroundSizeKeywordValue extends BaseKeyword { keyword: BackgroundSizeKeyword | GlobalKeyword; } export interface BackgroundSizeValues { width: CSSLengthValue | CSSPercentageValue | BackgroundSizeKeywordValue; height?: CSSLengthValue | CSSPercentageValue | BackgroundSizeKeywordValue; } export interface BackgroundExpanded { type?: 'background' | undefined; backgroundAttachment: BackgroundAttachmentValue; backgroundClip: BackgroundClipValue; backgroundColor: BackgroundColorValue; backgroundImage: BackgroundImageValue; backgroundOrigin: BackgroundOriginValue; backgroundPosition: BackgroundPositionValue; backgroundRepeat: BackgroundRepeatValue; backgroundSize: BackgroundSizeValue; } export type BackgroundKeyword = NoneGlobalKeyword; export interface BackgroundMultiLayer { layers: BackgroundExpanded[]; } export type BorderWidthKeyword = ThinKeyword | MediumKeyword | ThickKeyword; export interface BorderWidthKeywordValue extends BaseKeyword { keyword: BorderWidthKeyword | GlobalKeyword; } export type BorderStyleKeyword = NoneKeyword | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'; export interface BorderStyleKeywordValue extends BaseKeyword { keyword: BorderStyleKeyword | GlobalKeyword; } export interface BorderColorKeyword extends BaseKeyword { keyword: 'currentcolor' | GlobalKeyword; } export interface BorderWidthExpanded { type?: 'border-width' | undefined; borderTopWidth: CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; borderRightWidth: CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; borderBottomWidth: CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; borderLeftWidth: CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; } export interface BorderStyleExpanded { type?: 'border-style' | undefined; borderTopStyle: BorderStyleKeywordValue | CSSVariableValue; borderRightStyle: BorderStyleKeywordValue | CSSVariableValue; borderBottomStyle: BorderStyleKeywordValue | CSSVariableValue; borderLeftStyle: BorderStyleKeywordValue | CSSVariableValue; } export interface BorderColorExpanded { type?: 'border-color' | undefined; borderTopColor: CSSColorValue | BorderColorKeyword | CSSVariableValue; borderRightColor: CSSColorValue | BorderColorKeyword | CSSVariableValue; borderBottomColor: CSSColorValue | BorderColorKeyword | CSSVariableValue; borderLeftColor: CSSColorValue | BorderColorKeyword | CSSVariableValue; } export interface BorderExpanded { type?: 'border' | undefined; width?: CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; style?: BorderStyleKeywordValue | CSSVariableValue; color?: CSSColorValue | BorderColorKeyword | CSSVariableValue; } export type BorderValue = BorderExpanded | CSSVariableValue; export interface BorderIndividualExpanded { width?: CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; style?: BorderStyleKeywordValue | CSSVariableValue; color?: CSSColorValue | BorderColorKeyword | CSSVariableValue; } export type BorderIndividualValue = { type: 'border-individual'; } & BorderIndividualExpanded | { type: 'keyword'; keyword: GlobalKeyword; } | CSSVariableValue; export type FontStyleKeyword = NormalKeyword | ItalicKeyword | ObliqueKeyword; export interface FontStyleKeywordValue extends BaseKeyword { keyword: FontStyleKeyword | GlobalKeyword; } export interface FontStyleAngleValue { angle: CSSNumberValue; unit: 'deg'; } export type FontVariantKeyword = NormalKeyword | 'small-caps'; export interface FontVariantKeywordValue extends BaseKeyword { keyword: FontVariantKeyword | GlobalKeyword; } export type FontWeightKeyword = NormalKeyword | BoldKeyword | BolderKeyword | LighterKeyword; export interface FontWeightKeywordValue extends BaseKeyword { keyword: FontWeightKeyword | GlobalKeyword; } export interface FontWeightNumberValue { value: number; } export type FontStretchKeyword = NormalKeyword | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded'; export interface FontStretchKeywordValue extends BaseKeyword { keyword: FontStretchKeyword | GlobalKeyword; } export type FontSizeKeyword = 'xx-small' | 'x-small' | 'small' | MediumKeyword | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'larger' | 'smaller' | 'math'; export interface FontSizeKeywordValue extends BaseKeyword { keyword: FontSizeKeyword | GlobalKeyword; } export interface FontFamilyValue { type: 'font-list'; families: string[]; } export type FontFamilyValueWithVariables = FontFamilyValue | CSSVariableValue; export interface FontExpanded { type?: 'font' | undefined; fontStyle?: FontStyleKeywordValue | FontStyleAngleValue | CSSVariableValue; fontVariant?: FontVariantKeywordValue | CSSVariableValue; fontWeight?: FontWeightKeywordValue | FontWeightNumberValue | CSSVariableValue; fontStretch?: FontStretchKeywordValue | CSSPercentageValue | CSSVariableValue; fontSize: CSSLengthValue | CSSPercentageValue | FontSizeKeywordValue | CSSVariableValue; lineHeight?: NumberValue | Length | Percentage | LineHeightKeyword | CSSFunctionExpression | CSSVariableValue; fontFamily: FontFamilyValueWithVariables; } export type SystemFontKeyword = 'caption' | 'icon' | 'menu' | 'message-box' | 'small-caption' | 'status-bar'; export interface FontSystemKeyword extends BaseKeyword { keyword: SystemFontKeyword | GlobalKeyword; } export type TextDecorationLineKeywords = NoneKeyword | 'underline' | 'overline' | 'line-through' | 'blink'; export type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy'; export type TextDecorationThicknessKeyword = AutoKeyword | 'from-font' | ThinKeyword | MediumKeyword | ThickKeyword; export interface TextDecorationLineKeyword extends BaseKeyword { lines: TextDecorationLineKeywords[]; } export type TextDecorationLineGlobalKeyword = GlobalOnlyKeyword; export interface TextDecorationStyleKeyword extends BaseKeyword { keyword: TextDecorationStyle | GlobalKeyword; } export interface TextDecorationThicknessKeywordValue extends BaseKeyword { keyword: TextDecorationThicknessKeyword | GlobalKeyword; } export interface TextDecorationColorKeyword extends BaseKeyword { keyword: 'currentcolor' | GlobalKeyword; } export interface TextDecorationExpanded { type?: 'text-decoration' | undefined; textDecorationLine: TextDecorationLineKeyword | TextDecorationLineGlobalKeyword | CSSVariableValue; textDecorationStyle: TextDecorationStyleKeyword | CSSVariableValue; textDecorationColor: CSSColorValue | TextDecorationColorKeyword | CSSVariableValue; textDecorationThickness: CSSLengthValue | CSSPercentageValue | TextDecorationThicknessKeywordValue | CSSVariableValue; } export interface TextShadowComponent { type?: 'text-shadow' | undefined; offsetX: CSSLengthValue; offsetY: CSSLengthValue; blurRadius?: CSSLengthValue; color?: CSSColorValue | CSSVariableValue; } export type TextShadowKeyword = NoneGlobalKeyword; export interface TextShadowExpanded { type?: 'text-shadow' | undefined; shadows: TextShadowComponent[]; } export interface BoxShadowComponent { offsetX: CSSLengthValue; offsetY: CSSLengthValue; blurRadius?: CSSLengthValue; spreadRadius?: CSSLengthValue; color?: CSSColorValue | CSSVariableValue; inset?: boolean; } export type BoxShadowKeyword = NoneGlobalKeyword; export interface BoxShadowExpanded { type?: 'box-shadow' | undefined; shadows: BoxShadowComponent[]; } export type AtomicValue = CSSAngleValue | CSSColorValue | CSSVariableValue | CSSLengthValue | CSSNumberValue | CSSPercentageValue | CSSPositionValue | CSSStringValue | CSSTimeValue; /** * Base type for sizing properties (width, height, min-*, max-*, inline-size, block-size) * Pattern: CSSLengthValue | CSSPercentageValue | [SizingKeyword] | CSSVariableValue */ export type SizingBase<TKeyword> = CSSLengthValue | CSSPercentageValue | TKeyword | CSSVariableValue; /** * Base type for border radius properties * Pattern: CSSLengthValue | CSSPercentageValue | BorderRadiusKeyword | CSSVariableValue */ export type BorderRadiusBase = CSSLengthValue | CSSPercentageValue | BorderRadiusKeyword | CSSVariableValue; /** * Base type for gap properties (column-gap, row-gap) * Pattern: CSSLengthValue | CSSPercentageValue | [GapKeyword] | CSSVariableValue */ export type GapBase<TKeyword> = CSSLengthValue | CSSPercentageValue | TKeyword | CSSVariableValue; /** * Base type for margin/padding logical properties * Pattern: CSSLengthPercentageValue | [SpacingKeyword] | CSSVariableValue */ export type LogicalSpacingBase<TKeyword> = CSSLengthPercentageValue | TKeyword | CSSVariableValue; /** * Base type for simple keyword + variable properties * Pattern: [Keyword] | CSSVariableValue */ export type KeywordVariableBase<TKeyword> = TKeyword | CSSVariableValue; /** * Base type for font sizing properties * Pattern: CSSLengthValue | CSSPercentageValue | [FontKeyword] | CSSVariableValue */ export type FontSizingBase<TKeyword> = CSSLengthValue | CSSPercentageValue | TKeyword | CSSVariableValue; export type HeightValue = SizingBase<HeightKeyword>; export type WidthValue = SizingBase<WidthKeyword>; export type MaxHeightValue = SizingBase<MaxHeightKeyword>; export type MaxWidthValue = SizingBase<MaxWidthKeyword>; export type MinHeightValue = SizingBase<MinHeightKeyword>; export type MinWidthValue = SizingBase<MinWidthKeyword>; export type InlineSizeValue = SizingBase<InlineSizeKeyword>; export type BlockSizeValue = SizingBase<BlockSizeKeyword>; export type MinInlineSizeValue = SizingBase<MinInlineSizeKeyword>; export type MinBlockSizeValue = SizingBase<MinBlockSizeKeyword>; export type MaxInlineSizeValue = SizingBase<MaxInlineSizeKeyword>; export type MaxBlockSizeValue = SizingBase<MaxBlockSizeKeyword>; export type OpacityValue = NumberValue | Percentage | OpacityKeyword | CSSVariableValue; export type LetterSpacingValue = CSSLengthValue | LetterSpacingKeyword | CSSVariableValue; export type LineHeightValue = NumberValue | Length | Percentage | LineHeightKeyword | CSSFunctionExpression | CSSVariableValue; export type TextAlignValue = CSSStringValue | TextAlignKeywordValue | CSSVariableValue; export type TextTransformValue = KeywordVariableBase<TextTransformKeywordValue>; export type FlexDirectionValue = KeywordVariableBase<FlexDirectionKeywordValue>; export type AlignItemsValue = KeywordVariableBase<AlignItemsKeyword>; export type AlignSelfValue = KeywordVariableBase<AlignSelfKeyword>; export type JustifyContentValue = KeywordVariableBase<JustifyContentKeywordValue>; export type DisplayKeyword = typeof DISPLAY_KEYWORDS[number]; export type DisplayKeywordValue = { type: 'keyword'; keyword: DisplayKeyword | GlobalKeyword; }; export type DisplayValue = DisplayKeywordValue | CSSVariableValue; export type OverflowKeyword = typeof OVERFLOW_KEYWORDS[number]; export type OverflowKeywordValue = { type: 'keyword'; keyword: OverflowKeyword | GlobalKeyword; }; export type OverflowValue = OverflowKeywordValue | CSSVariableValue; export type TextOverflowKeyword = typeof TEXT_OVERFLOW_KEYWORDS[number]; export type TextOverflowKeywordValue = { type: 'keyword'; keyword: TextOverflowKeyword | GlobalKeyword; }; export type TextOverflowValue = TextOverflowKeywordValue | CSSVariableValue; export type TextIndentKeyword = typeof TEXT_INDENT_KEYWORDS[number]; export type TextIndentKeywordValue = { type: 'keyword'; keyword: TextIndentKeyword | GlobalKeyword; }; export type TextIndentValue = CSSLengthValue | CSSPercentageValue | TextIndentKeywordValue | CSSVariableValue; export type WhiteSpaceKeyword = typeof WHITE_SPACE_KEYWORDS[number]; export type WhiteSpaceKeywordValue = { type: 'keyword'; keyword: WhiteSpaceKeyword | GlobalKeyword; }; export type WhiteSpaceValue = WhiteSpaceKeywordValue | CSSVariableValue; export type WordBreakKeyword = typeof WORD_BREAK_KEYWORDS[number]; export type WordBreakKeywordValue = { type: 'keyword'; keyword: WordBreakKeyword | GlobalKeyword; }; export type WordBreakValue = WordBreakKeywordValue | CSSVariableValue; export type OverflowWrapKeyword = typeof OVERFLOW_WRAP_KEYWORDS[number]; export type OverflowWrapKeywordValue = { type: 'keyword'; keyword: OverflowWrapKeyword | GlobalKeyword; }; export type OverflowWrapValue = OverflowWrapKeywordValue | CSSVariableValue; export type VisibilityValue = CSSVariableValue | { type: 'keyword'; keyword: typeof VISIBILITY_KEYWORDS[number] | GlobalKeyword; }; export type ZIndexValue = CSSVariableValue | CSSNumberValue | { type: 'keyword'; keyword: typeof Z_INDEX_KEYWORDS[number] | GlobalKeyword; }; export type ObjectFitKeyword = typeof OBJECT_FIT_KEYWORDS[number]; export type ObjectFitValue = CSSVariableValue | { type: 'keyword'; keyword: ObjectFitKeyword | GlobalKeyword; }; export type WritingModeKeyword = typeof WRITING_MODE_KEYWORDS[number]; export type WritingModeKeywordValue = { type: 'keyword'; keyword: WritingModeKeyword | GlobalKeyword; }; export type WritingModeValue = WritingModeKeywordValue | CSSVariableValue; export type BlendModeKeyword = typeof BLEND_MODE_KEYWORDS[number]; export type BlendModeKeywordValue = { type: 'keyword'; keyword: BlendModeKeyword | GlobalKeyword; }; export type BlendModeValue = BlendModeKeywordValue | CSSVariableValue; export type TextDecorationLineValue = TextDecorationLineKeyword | TextDecorationLineGlobalKeyword | CSSVariableValue; export type ColumnGapValue = GapBase<ColumnGapKeyword>; export type RowGapValue = GapBase<RowGapKeyword>; export type GapValue = GapExpanded | CSSVariableValue; export type MarginValue = MarginExpanded | CSSVariableValue; export type PaddingValue = PaddingExpanded | CSSVariableValue; export type MarginInput = MarginValue | CSSLengthPercentageValue | MarginKeyword; export type PaddingInput = PaddingValue | CSSLengthValue | CSSPercentageValue | PaddingKeyword; export type BorderWidthValue = BorderWidthExpanded | CSSVariableValue; export type BorderStyleValue = BorderStyleExpanded | CSSVariableValue; export type BorderColorValue = BorderColorExpanded | CSSVariableValue; export type BorderRadiusValue = BorderRadiusExpanded | CSSVariableValue; export type BorderStartStartRadiusValue = BorderRadiusBase; export type BorderStartEndRadiusValue = BorderRadiusBase; export type BorderEndStartRadiusValue = BorderRadiusBase; export type BorderEndEndRadiusValue = BorderRadiusBase; export type BorderTopLeftRadiusValue = BorderRadiusBase; export type BorderTopRightRadiusValue = BorderRadiusBase; export type BorderBottomRightRadiusValue = BorderRadiusBase; export type BorderBottomLeftRadiusValue = BorderRadiusBase; export type BorderInlineStartWidthValue = CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; export type BorderInlineEndWidthValue = CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; export type BorderBlockStartWidthValue = CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; export type BorderBlockEndWidthValue = CSSLengthValue | BorderWidthKeywordValue | CSSVariableValue; export type BorderInlineStartStyleValue = BorderStyleKeywordValue | CSSVariableValue; export type BorderInlineEndStyleValue = BorderStyleKeywordValue | CSSVariableValue; export type BorderBlockStartStyleValue = BorderStyleKeywordValue | CSSVariableValue; export type BorderBlockEndStyleValue = BorderStyleKeywordValue | CSSVariableValue; export type BorderInlineStartColorValue = CSSColorValue | BorderColorKeyword | CSSVariableValue; export type BorderInlineEndColorValue = CSSColorValue | BorderColorKeyword | CSSVariableValue; export type BorderBlockStartColorValue = CSSColorValue | BorderColorKeyword | CSSVariableValue; export type BorderBlockEndColorValue = CSSColorValue | BorderColorKeyword | CSSVariableValue; export type BorderInlineStartValue = BorderIndividualValue; export type BorderInlineEndValue = BorderIndividualValue; export type BorderBlockStartValue = BorderIndividualValue; export type BorderBlockEndValue = BorderIndividualValue; export type BorderInlineValue = BorderIndividualValue; export type BorderBlockValue = BorderIndividualValue; export type MarginInlineStartValue = LogicalSpacingBase<MarginKeyword>; export type MarginInlineEndValue = LogicalSpacingBase<MarginKeyword>; export type PaddingInlineStartValue = LogicalSpacingBase<PaddingKeyword>; export type PaddingInlineEndValue = LogicalSpacingBase<PaddingKeyword>; export type BackgroundAttachmentValue = BackgroundAttachmentKeywordValue | CSSVariableValue; export type BackgroundClipValue = BackgroundClipKeyword | CSSVariableValue; export type BackgroundColorValue = CSSColorValue | BackgroundColorKeyword | CSSVariableValue; export type BackgroundImageValue = BackgroundImageKeyword | BackgroundImageUrl | BackgroundImageGradient | CSSVariableValue; export type BackgroundOriginValue = BackgroundOriginKeyword | CSSVariableValue; export type PositionValue = CSSPositionValue | CSSVariableValue; export type BackgroundPositionValue = CSSPositionValue | BackgroundPositionKeyword | CSSVariableValue; export type BackgroundRepeatValue = BackgroundRepeatKeywordValue | CSSVariableValue; export type BackgroundSizeValue = BackgroundSizeKeywordValue | BackgroundSizeValues | CSSVariableValue; export type BackgroundValue = BackgroundExpanded | BackgroundKeyword | BackgroundMultiLayer | CSSVariableValue; export type FontStyleValue = FontStyleKeywordValue | FontStyleAngleValue | CSSVariableValue; export type FontVariantValue = KeywordVariableBase<FontVariantKeywordValue>; export type FontWeightValue = FontWeightKeywordValue | FontWeightNumberValue | CSSVariableValue; export type FontStretchValue = FontStretchKeywordValue | CSSPercentageValue | CSSVariableValue; export type FontSizeValue = FontSizingBase<FontSizeKeywordValue>; export type FontValue = FontExpanded | FontSystemKeyword | CSSVariableValue; export type TextDecorationValue = TextDecorationExpanded | CSSVariableValue; export type TextShadowValue = TextShadowKeyword | TextShadowExpanded | CSSVariableValue; export type BackdropFilterValue = { dropShadow?: TextShadowComponent; }; export type FilterValue = BackdropFilterValue; export type BoxShadowValue = BoxShadowKeyword | BoxShadowExpanded | CSSVariableValue; export type GridColumnGapValue = ColumnGapValue; export type GridRowGapValue = RowGapValue; export type GridGapValue = GapValue; /** * Union of all property values supported by the parser */ export type PropertyValue = AtomicValue | CSSFunction | HeightValue | WidthValue | MaxHeightValue | MaxWidthValue | MinHeightValue | MinWidthValue | OpacityValue | LetterSpacingValue | LineHeightValue | TextAlignValue | TextTransformValue | FlexDirectionValue | AlignItemsValue | AlignSelfValue | JustifyContentValue | DisplayValue | OverflowValue | TextOverflowValue | TextIndentValue | WhiteSpaceValue | WordBreakValue | OverflowWrapValue | VisibilityValue | ZIndexValue | ObjectFitValue | WritingModeValue | ColumnGapValue | RowGapValue | GapValue | MarginValue | PaddingValue | BorderValue | BorderRadiusValue | BorderStartStartRadiusValue | BorderStartEndRadiusValue | BorderEndStartRadiusValue | BorderEndEndRadiusValue | MarginInlineStartValue | MarginInlineEndValue | PaddingInlineStartValue | PaddingInlineEndValue | BorderBlockStartWidthValue | BorderBlockEndWidthValue | BorderBlockStartStyleValue | BorderBlockEndStyleValue | BorderBlockStartColorValue | BorderBlockEndColorValue | BorderInlineStartValue | BorderInlineEndValue | BorderBlockStartValue | BorderBlockEndValue | BorderInlineValue | BorderBlockValue | BackgroundValue | FontValue | TextDecorationValue | TextShadowValue | GridTemplateColumnsValueUnion | GridTemplateRowsValue | GridTemplateValue | GridColumnValue | GridRowValue | GridAreaValue; /** * CSS Grid Track Sizing Keywords - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns */ export declare const GRID_TRACK_SIZING_KEYWORDS: readonly ["auto", "max-content", "min-content"]; export type GridTrackSizingKeyword = typeof GRID_TRACK_SIZING_KEYWORDS[number]; /** * CSS Grid Template Keywords */ export declare const GRID_TEMPLATE_KEYWORDS: readonly ["none", "subgrid", "masonry"]; export type GridTemplateKeyword = typeof GRID_TEMPLATE_KEYWORDS[number]; /** * CSS Grid Column Keywords (for shorthand property) */ export declare const GRID_COLUMN_KEYWORDS: readonly ["auto"]; export type GridColumnKeyword = typeof GRID_COLUMN_KEYWORDS[number]; /** * CSS Grid Row Keywords (for shorthand property) */ export declare const GRID_ROW_KEYWORDS: readonly ["auto"]; export type GridRowKeyword = typeof GRID_ROW_KEYWORDS[number]; /** * CSS Flex (fr) unit value - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value */ export interface CSSFlexValue { type: 'flex'; value: number; unit: 'fr'; } /** * CSS Grid Line Name - MDN specification * Represents named grid lines like [line-name] or [line-1 line-2] */ export interface GridLineName { type: 'line-name'; names: string[]; } /** * CSS Grid Track Sizing Value * Represents individual track sizes in grid-template-columns/rows */ export type GridTrackSize = CSSLengthValue | CSSPercentageValue | CSSFlexValue | { type: 'keyword'; keyword: GridTrackSizingKeyword | GlobalKeyword; } | GridMinMaxFunction | GridFitContentFunction | CSSVariableValue; /** * CSS Grid minmax() function - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/minmax */ export interface GridMinMaxFunction { type: 'function'; function: 'minmax'; min: GridTrackSize; max: GridTrackSize; } /** * CSS Grid fit-content() function - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content_function */ export interface GridFitContentFunction { type: 'function'; function: 'fit-content'; size: CSSLengthValue | CSSPercentageValue; } /** * CSS Grid repeat() function - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/repeat */ export interface GridRepeatFunction { type: 'function'; function: 'repeat'; count: number | 'auto-fill' | 'auto-fit'; values: (GridTrackSize | GridLineName)[]; } /** * CSS Grid Track List Item * Can be a track size or line name */ export type GridTrackListItem = GridTrackSize | GridLineName | GridRepeatFunction; /** * CSS Grid Template Columns Value - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns */ export interface GridTemplateColumnsValue { type: 'grid-template'; tracks: GridTrackListItem[]; } /** * Union type for all grid-template-columns values */ export type GridTemplateColumnsValueUnion = GridTemplateColumnsValue | { type: 'keyword'; keyword: GridTemplateKeyword | GlobalKeyword; } | CSSVariableValue; /** * CSS Grid Template Rows Value - same structure as columns */ export type GridTemplateRowsValue = GridTemplateColumnsValueUnion; /** * CSS Grid Template with Areas value - combines areas, rows, and columns */ export interface GridTemplateWithAreasValue { type: 'grid-template-with-areas'; areas: string[]; rows?: GridTrackSize[]; columns?: GridTrackSize[]; lineNames?: { [key: string]: string[]; }; } /** * CSS Grid Line Value - for grid-column-start, grid-row-start, etc. */ export type GridLineValue = { type: 'keyword'; keyword: 'auto' | GlobalKeyword; } | { type: 'integer'; value: number; } | { type: 'span'; count: number; name?: string; } | { type: 'named-line'; name: string; count?: number; } | CSSVariableValue; /** * CSS Grid Column Value - shorthand for grid-column-start/end */ export type GridColumnValue = { type: 'keyword'; keyword: GridColumnKeyword | GlobalKeyword; } | { type: 'grid-placement'; start?: GridLineValue; end?: GridLineValue; } | CSSVariableValue; /** * CSS Grid Row Value - shorthand for grid-row-start/end */ export type GridRowValue = GridColumnValue; /** * CSS Grid Area Value - shorthand for grid-row-start/end + grid-column-start/end */ export interface GridAreaValue { type: 'grid-area'; rowStart?: GridLineValue; columnStart?: GridLineValue; rowEnd?: GridLineValue; columnEnd?: GridLineValue; } /** * CSS Grid Template Areas Value - MDN specification * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas */ export interface GridTemplateAreasValue { type: 'grid-template-areas'; areas: string[][]; } /** * CSS Grid Template Value - shorthand for rows/columns/areas */ export type GridTemplateValue = { type: 'grid-template-shorthand'; rows?: GridTemplateRowsValue; columns?: GridTemplateColumnsValueUnion; areas?: GridTemplateAreasValue; } | { type: 'grid-template-rows-columns'; rows: GridTemplateRowsValue; columns: GridTemplateColumnsValueUnion; } | GridTemplateWithAreasValue | { type: 'keyword'; keyword: 'none' | GlobalKeyword; } | CSSVariableValue; export {};