@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
TypeScript
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 {};