391 lines
15 KiB
TypeScript
391 lines
15 KiB
TypeScript
export type TagDef = {
|
|
className?: string
|
|
base?: string
|
|
states?: Record<string, TagDef>,
|
|
selectors?: Record<string, TagDef>,
|
|
parts?: Record<string, TagDef>
|
|
variants?: Record<string, TagDef | Record<string, TagDef>>
|
|
render?: (obj: any) => any
|
|
alignContent?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline'
|
|
alignItems?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end'
|
|
alignSelf?: 'auto' | 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end'
|
|
aspectRatio?: number | string
|
|
|
|
bottom?: number | string
|
|
left?: number | string
|
|
right?: number | string
|
|
top?: number | string
|
|
inset?: number | string
|
|
|
|
// logical positioning / sizing
|
|
insetBlock?: number | string
|
|
insetInline?: number | string
|
|
insetBlockStart?: number | string
|
|
insetBlockEnd?: number | string
|
|
insetInlineStart?: number | string
|
|
insetInlineEnd?: number | string
|
|
|
|
boxSizing?: 'content-box' | 'border-box'
|
|
|
|
columnGap?: number | string
|
|
rowGap?: number | string
|
|
gap?: number | string
|
|
|
|
// multi-column layout
|
|
columns?: string
|
|
columnCount?: number | 'auto'
|
|
columnWidth?: number | string
|
|
columnRule?: string
|
|
columnRuleColor?: string
|
|
columnRuleStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
|
|
columnRuleWidth?: number | string
|
|
columnFill?: 'auto' | 'balance' | 'balance-all'
|
|
columnSpan?: 'none' | 'all'
|
|
|
|
contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint'
|
|
contentVisibility?: 'visible' | 'hidden' | 'auto'
|
|
|
|
// container queries
|
|
container?: string
|
|
containerType?: 'normal' | 'size' | 'inline-size'
|
|
containerName?: string
|
|
|
|
display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell'
|
|
|
|
// float layout
|
|
float?: 'left' | 'right' | 'inline-start' | 'inline-end' | 'none'
|
|
clear?: 'left' | 'right' | 'both' | 'inline-start' | 'inline-end' | 'none'
|
|
|
|
flex?: number | string
|
|
flexBasis?: number | string
|
|
flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
|
|
flexGrow?: number
|
|
flexShrink?: number
|
|
flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
|
|
flexFlow?: string
|
|
|
|
gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense'
|
|
gridAutoColumns?: string
|
|
gridAutoRows?: string
|
|
gridColumn?: string
|
|
gridColumnStart?: string | number
|
|
gridColumnEnd?: string | number
|
|
gridRow?: string
|
|
gridRowStart?: string | number
|
|
gridRowEnd?: string | number
|
|
gridArea?: string
|
|
gridGap?: number | string
|
|
gridTemplateColumns?: string
|
|
gridTemplateRows?: string
|
|
gridTemplateAreas?: string
|
|
|
|
height?: number | string
|
|
width?: number | string
|
|
maxHeight?: number | string
|
|
maxWidth?: number | string
|
|
minHeight?: number | string
|
|
minWidth?: number | string
|
|
|
|
// logical sizes
|
|
blockSize?: number | string
|
|
inlineSize?: number | string
|
|
minBlockSize?: number | string
|
|
maxBlockSize?: number | string
|
|
minInlineSize?: number | string
|
|
maxInlineSize?: number | string
|
|
|
|
margin?: number | string
|
|
marginBottom?: number | string
|
|
marginLeft?: number | string
|
|
marginRight?: number | string
|
|
marginTop?: number | string
|
|
|
|
padding?: number | string
|
|
paddingBottom?: number | string
|
|
paddingLeft?: number | string
|
|
paddingRight?: number | string
|
|
paddingTop?: number | string
|
|
|
|
order?: number
|
|
|
|
overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip'
|
|
overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip'
|
|
overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip'
|
|
overflowWrap?: 'normal' | 'break-word' | 'anywhere'
|
|
|
|
// overscroll / snap / scrolling ergonomics
|
|
overscrollBehavior?: 'auto' | 'contain' | 'none'
|
|
overscrollBehaviorX?: 'auto' | 'contain' | 'none'
|
|
overscrollBehaviorY?: 'auto' | 'contain' | 'none'
|
|
scrollBehavior?: 'auto' | 'smooth'
|
|
scrollSnapType?: 'none' | 'x' | 'y' | 'block' | 'inline' | 'both' | string
|
|
scrollSnapAlign?: 'none' | 'start' | 'end' | 'center'
|
|
scrollSnapStop?: 'normal' | 'always'
|
|
scrollMargin?: number | string
|
|
scrollMarginTop?: number | string
|
|
scrollMarginRight?: number | string
|
|
scrollMarginBottom?: number | string
|
|
scrollMarginLeft?: number | string
|
|
scrollPadding?: number | string
|
|
scrollPaddingTop?: number | string
|
|
scrollPaddingRight?: number | string
|
|
scrollPaddingBottom?: number | string
|
|
scrollPaddingLeft?: number | string
|
|
scrollbarWidth?: 'auto' | 'thin' | 'none'
|
|
scrollbarColor?: string
|
|
|
|
placeContent?: string
|
|
placeItems?: string
|
|
placeSelf?: string
|
|
|
|
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'
|
|
|
|
justifyContent?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'left' | 'right' | 'stretch'
|
|
justifyItems?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end' | 'left' | 'right'
|
|
justifySelf?: 'auto' | 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end' | 'left' | 'right'
|
|
|
|
verticalAlign?: 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'sub' | 'super'
|
|
|
|
zIndex?: number
|
|
|
|
// visual/theme-related
|
|
animation?: string
|
|
animationName?: string
|
|
animationDuration?: string
|
|
animationTimingFunction?: string
|
|
animationDelay?: string
|
|
animationIterationCount?: number | 'infinite'
|
|
animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'
|
|
animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both'
|
|
animationPlayState?: 'running' | 'paused'
|
|
appearance?: 'none' | 'auto' | 'button' | 'textfield' | 'searchfield' | 'textarea' | 'checkbox' | 'radio'
|
|
backdropFilter?: string
|
|
|
|
background?: string
|
|
backgroundAttachment?: 'scroll' | 'fixed' | 'local'
|
|
backgroundClip?: 'border-box' | 'padding-box' | 'content-box' | 'text'
|
|
backgroundColor?: string
|
|
backgroundImage?: string
|
|
backgroundPosition?: string
|
|
backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round'
|
|
backgroundSize?: 'auto' | 'cover' | 'contain'
|
|
|
|
border?: string
|
|
borderBottom?: string
|
|
borderBottomColor?: string
|
|
borderBottomLeftRadius?: number | string
|
|
borderBottomRightRadius?: number | string
|
|
borderBottomStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
|
|
borderBottomWidth?: number | string
|
|
borderColor?: string
|
|
borderLeft?: string
|
|
borderLeftColor?: string
|
|
borderLeftStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
|
|
borderLeftWidth?: number | string
|
|
borderRadius?: number | string
|
|
borderRight?: string
|
|
borderRightColor?: string
|
|
borderRightStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
|
|
borderRightWidth?: number | string
|
|
borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
|
|
borderTop?: string
|
|
borderTopColor?: string
|
|
borderTopLeftRadius?: number | string
|
|
borderTopRightRadius?: number | string
|
|
borderTopStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
|
|
borderTopWidth?: number | string
|
|
borderWidth?: number | string
|
|
borderImage?: string
|
|
borderImageSource?: string
|
|
borderImageSlice?: number | string
|
|
borderImageWidth?: number | string
|
|
borderImageOutset?: number | string
|
|
borderImageRepeat?: 'stretch' | 'repeat' | 'round' | 'space' | string
|
|
|
|
// table-ish
|
|
borderCollapse?: 'collapse' | 'separate'
|
|
borderSpacing?: number | string
|
|
captionSide?: 'top' | 'bottom'
|
|
emptyCells?: 'show' | 'hide'
|
|
tableLayout?: 'auto' | 'fixed'
|
|
|
|
boxShadow?: string
|
|
clipPath?: string
|
|
|
|
color?: string
|
|
colorScheme?: 'normal' | 'light' | 'dark' | 'light dark' | string
|
|
content?: string
|
|
counterReset?: string
|
|
counterIncrement?: string
|
|
cursor?: 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'grab' | 'grabbing' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out'
|
|
|
|
filter?: string
|
|
imageRendering?: 'auto' | 'crisp-edges' | 'pixelated'
|
|
|
|
font?: string
|
|
fontFamily?: string
|
|
fontSize?: number | string
|
|
fontStyle?: 'normal' | 'italic' | 'oblique'
|
|
fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'normal' | 'bold' | 'bolder' | 'lighter' | number
|
|
fontStretch?: string
|
|
fontVariant?: string
|
|
fontKerning?: 'auto' | 'normal' | 'none'
|
|
|
|
isolation?: 'auto' | 'isolate'
|
|
letterSpacing?: number | string
|
|
lineHeight?: number | string
|
|
|
|
listStyle?: string
|
|
listStyleImage?: string
|
|
listStylePosition?: 'inside' | 'outside'
|
|
listStyleType?: 'none' | 'disc' | 'circle' | 'square' | 'decimal' | 'decimal-leading-zero' | 'lower-roman' | 'upper-roman' | 'lower-alpha' | 'upper-alpha' | 'lower-greek' | 'lower-latin' | 'upper-latin'
|
|
|
|
mixBlendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity'
|
|
|
|
objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
|
|
objectPosition?: string
|
|
|
|
opacity?: number
|
|
|
|
outline?: string
|
|
outlineColor?: string
|
|
outlineOffset?: number | string
|
|
outlineStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'
|
|
outlineWidth?: number | string
|
|
|
|
// form / selection / interaction
|
|
caretColor?: string
|
|
accentColor?: string
|
|
pointerEvents?: 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all'
|
|
resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline'
|
|
touchAction?: 'auto' | 'none' | 'pan-x' | 'pan-y' | 'manipulation' | string
|
|
userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all'
|
|
|
|
// writing / bidi / hyphenation
|
|
direction?: 'ltr' | 'rtl'
|
|
writingMode?: 'horizontal-tb' | 'vertical-rl' | 'vertical-lr' | string
|
|
unicodeBidi?: 'normal' | 'embed' | 'bidi-override' | 'isolate' | 'isolate-override' | 'plaintext'
|
|
hyphens?: 'none' | 'manual' | 'auto'
|
|
tabSize?: number | string
|
|
|
|
textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end'
|
|
textDecoration?: string
|
|
textDecorationColor?: string
|
|
textDecorationLine?: 'none' | 'underline' | 'overline' | 'line-through' | 'blink'
|
|
textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy'
|
|
textDecorationThickness?: number | string
|
|
textUnderlineOffset?: number | string
|
|
textIndent?: number | string
|
|
textOverflow?: 'clip' | 'ellipsis' | string
|
|
textShadow?: string
|
|
textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | 'full-width' | 'full-size-kana'
|
|
whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces'
|
|
wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word'
|
|
wordSpacing?: number | string
|
|
wordWrap?: 'normal' | 'break-word' | 'anywhere'
|
|
textRendering?: 'auto' | 'optimizeSpeed' | 'optimizeLegibility' | 'geometricPrecision'
|
|
textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable'
|
|
|
|
// CSS shapes
|
|
shapeOutside?: string
|
|
shapeMargin?: number | string
|
|
shapeImageThreshold?: number
|
|
|
|
// fragmentation / breaks
|
|
breakBefore?: 'auto' | 'avoid' | 'always' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'recto' | 'verso' | 'avoid-column' | 'column' | 'avoid-region' | 'region'
|
|
breakAfter?: 'auto' | 'avoid' | 'always' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'recto' | 'verso' | 'avoid-column' | 'column' | 'avoid-region' | 'region'
|
|
breakInside?: 'auto' | 'avoid' | 'avoid-page' | 'avoid-column' | 'avoid-region'
|
|
orphans?: number
|
|
widows?: number
|
|
|
|
transform?: string
|
|
transformOrigin?: string
|
|
transformStyle?: 'flat' | 'preserve-3d'
|
|
transformBox?: 'content-box' | 'border-box' | 'fill-box' | 'stroke-box' | 'view-box'
|
|
rotate?: string
|
|
scale?: string | number
|
|
translate?: string
|
|
perspective?: number | string
|
|
perspectiveOrigin?: string
|
|
backfaceVisibility?: 'visible' | 'hidden'
|
|
|
|
transition?: string
|
|
transitionProperty?: string
|
|
transitionDuration?: string
|
|
transitionTimingFunction?: string
|
|
transitionDelay?: string
|
|
visibility?: 'visible' | 'hidden' | 'collapse'
|
|
willChange?: 'auto' | 'scroll-position' | 'contents'
|
|
|
|
// masks (if you want modern visual effects)
|
|
mask?: string
|
|
maskImage?: string
|
|
maskSize?: string
|
|
maskPosition?: string
|
|
maskRepeat?: string
|
|
|
|
// svg styling (if you want these supported)
|
|
fill?: string
|
|
stroke?: string
|
|
strokeWidth?: number | string
|
|
strokeLinecap?: 'butt' | 'round' | 'square'
|
|
strokeLinejoin?: 'miter' | 'round' | 'bevel'
|
|
strokeDasharray?: number | string
|
|
strokeDashoffset?: number | string
|
|
}
|
|
|
|
export const NonStyleKeys = new Set([
|
|
'className',
|
|
'base',
|
|
'states',
|
|
'css',
|
|
'parts',
|
|
'variants',
|
|
'render',
|
|
'styles',
|
|
'selectors',
|
|
])
|
|
|
|
export const UnitlessProps = new Set([
|
|
'animationIterationCount',
|
|
'aspectRatio',
|
|
'columnCount',
|
|
'flex',
|
|
'flexGrow',
|
|
'flexShrink',
|
|
'fontWeight',
|
|
'lineHeight',
|
|
'opacity',
|
|
'order',
|
|
'orphans',
|
|
'scale',
|
|
'shapeImageThreshold',
|
|
'widows',
|
|
'zIndex'
|
|
])
|
|
|
|
// All standard HTML element tag names
|
|
export type HTMLTag =
|
|
| 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio'
|
|
| 'b' | 'base' | 'bdi' | 'bdo' | 'blockquote' | 'body' | 'br' | 'button'
|
|
| 'canvas' | 'caption' | 'cite' | 'code' | 'col' | 'colgroup'
|
|
| 'data' | 'datalist' | 'dd' | 'del' | 'details' | 'dfn' | 'dialog' | 'div' | 'dl' | 'dt'
|
|
| 'em' | 'embed'
|
|
| 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form'
|
|
| 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hgroup' | 'hr' | 'html'
|
|
| 'i' | 'iframe' | 'img' | 'input' | 'ins'
|
|
| 'kbd'
|
|
| 'label' | 'legend' | 'li' | 'link'
|
|
| 'main' | 'map' | 'mark' | 'menu' | 'meta' | 'meter'
|
|
| 'nav' | 'noscript'
|
|
| 'object' | 'ol' | 'optgroup' | 'option' | 'output'
|
|
| 'p' | 'picture' | 'pre' | 'progress'
|
|
| 'q'
|
|
| 'rp' | 'rt' | 'ruby'
|
|
| 's' | 'samp' | 'script' | 'search' | 'section' | 'select' | 'slot' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup'
|
|
| 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'title' | 'tr' | 'track'
|
|
| 'u' | 'ul'
|
|
| 'var' | 'video'
|
|
| 'wbr'
|
|
// SVG elements
|
|
| 'svg' | 'path' | 'circle' | 'ellipse' | 'line' | 'polygon' | 'polyline' | 'rect' | 'g' | 'defs' | 'use' | 'text' | 'tspan' | 'image' | 'clipPath' | 'mask' | 'pattern' | 'linearGradient' | 'radialGradient' | 'stop' | 'filter' | 'feBlend' | 'feColorMatrix' | 'feGaussianBlur' | 'symbol' |