What CSS features and properties does satori support?

What CSS features does satori support? What are all the supported CSS properties?

Perfect! I found comprehensive information about the CSS features supported by Satori. Let me provide you with a complete summary based on the README documentation.

##CSS Features Supported by Satori

Satori supports a subset of CSS properties that are static and visible. It uses the same Flexbox layout engine as React Native (Yoga Layout) and does not implement the complete CSS specification.

###Important Limitations:

• No 3D transforms
• No z-index support (elements later in document render on top)
• No calc() function
• currentColor only works for the color property
• RTL languages not supported
• Advanced typography features (kerning, ligatures, OpenType features) not supported

###Complete List of Supported CSS Properties:

####Layout & Display

• display: flex, contents, none (defaults to flex)
• position: relative, static, absolute (defaults to relative)

####Spacing

• margin, marginTop, marginRight, marginBottom, marginLeft
• top, right, bottom, left

####Sizing

• width, height
• minWidth, minHeight, maxWidth, maxHeight (except min-content, max-content, fit-content)

####Border

• Width: borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
• Style: borderStyle, borderTopStyle, etc. (solid, dashed)
• Color: borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
• Shorthand: border, borderTop, borderRight, borderBottom, borderLeft

####Border Radius

• borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius
• Shorthand: borderRadius (e.g., 5px, 50% / 5px)

####Flexbox

• flexDirection: column, row, row-reverse, column-reverse (defaults to row)
• flexWrap: wrap, nowrap, wrap-reverse (defaults to wrap)
• flexGrow, flexShrink
• flexBasis (except auto)
• alignItems: stretch, center, flex-start, flex-end, baseline, normal (defaults to stretch)
• alignContent, alignSelf
• justifyContent
• gap

####Font

• fontFamily
• fontSize
• fontWeight
• fontStyle

####Text

• color
• tabSize
• textAlign: start, end, left, right, center, justify (defaults to start)
• textTransform: none, lowercase, uppercase, capitalize (defaults to none)
• textOverflow: clip, ellipsis (defaults to clip)
• textDecoration: line types (underline, line-through), styles (dotted, dashed, double, solid)
• textShadow
• lineHeight
• letterSpacing
• whiteSpace: normal, pre, pre-wrap, pre-line, nowrap (defaults to normal)
• wordBreak: normal, break-all, break-word, keep-all (defaults to normal)
• textWrap: wrap, balance (defaults to wrap)

####Background

• backgroundColor (single value)
• backgroundImage: linear-gradient, repeating-linear-gradient, radial-gradient, repeating-radial-gradient, url()
• backgroundPosition (single value)
• backgroundSize (two-value size like 10px 20%)
• backgroundClip: border-box, text
• backgroundRepeat: repeat, repeat-x, repeat-y, no-repeat (defaults to repeat)

####Transform

• translate, translateX, translateY
• rotate
• scale, scaleX, scaleY
• skew, skewX, skewY
• transformOrigin (one-value and two-value syntax, both relative and absolute)

####Images

• objectFit: contain, cover, none (defaults to none)
• objectPosition: keywords (top, bottom, left, right, center) and combinations (defaults to center)

####Effects & Styling

• opacity
• boxSizing
• boxShadow
• overflow: visible, hidden (defaults to visible)
• filter
• clipPath
• lineClamp

####Mask

• maskImage: linear-gradient(), radial-gradient(), url()
• maskPosition
• maskSize (two-value size like 10px 20%)
• maskRepeat: repeat, repeat-x, repeat-y, no-repeat (defaults to repeat)

####WebKit Extensions

• WebkitTextStrokeWidth
• WebkitTextStrokeColor

You can find more details in the main documentation file at src/handler/presets.ts which contains the HTML element presets.