0.1.20

$css 프롭의 staticProperties enum을 MDN 38개 페이지로 재검증해 확장합니다. display(list-item/flow-root/table*), overflow(clip), align/justify(start/end/anchor-center), textWrap, overscrollBehavior, touchAction, contain, contentVisibility 등 모던 CSS 속성을 strict union 타입으로 추가합니다.

이번 릴리즈는 $css 프롭이 받는 키워드 enum을 대거 확장합니다. 기존에 누락된 spec 키워드(display: list-item, overflow: clip 등)와 모던 CSS 속성(textWrap, overscrollBehavior, touchAction, contain 등)이 strict union 타입으로 자동완성에 노출됩니다. breaking 없음 — 기존에 통과하던 값은 그대로 통과합니다.

$css 자동완성 확장

packages/components/src/styles/rainbow-sprinkles.css.ts의 staticProperties에 MDN 38개 페이지로 검증한 canonical 키워드를 추가했습니다. Box / Flex / HStack / VStack / Typo / Center / Grid 등 $css를 받는 모든 컴포넌트에서 다음 값들이 자동완성·strict 타입체크 대상이 됩니다.

기존 프롭에 추가된 키워드

프롭	새로 추가된 값
`display`	`list-item`, `flow-root`, `table`, `inline-table`, `table-row`, `table-cell`, `table-row-group`, `table-header-group`, `table-footer-group`, `table-column`, `table-column-group`, `table-caption`
`overflow` / `overflowX` / `overflowY`	`clip`
`alignItems` / `alignContent` / `alignSelf`	`normal`, `start`, `end`, `self-start`, `self-end`, `anchor-center`
`justifyContent` / `justifyItems` / `justifySelf`	`normal`, `start`, `end`, `left`, `right`, `self-start`, `self-end`, `anchor-center`
`textAlign`	`start`, `end`, `match-parent`
`fontStyle`	`oblique`
`backgroundClip`	`text`
`outlineStyle`	`auto`, `groove`, `ridge`, `inset`, `outset` (※ `border-style`와 달리 `hidden`은 없습니다)
`listStyleType`	`decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-alpha`, `upper-alpha`, `lower-latin`, `upper-latin`, `lower-greek`, `hebrew`, `armenian`, `georgian`, `cjk-ideographic`, `hiragana`, `katakana`, `disclosure-open`, `disclosure-closed`
`cursor`	`context-menu`, `progress`, `cell`, `vertical-text`, `alias`, `copy`, `no-drop`, `all-scroll`, `col-resize`, `row-resize`, 8방향 `*-resize`, `nesw-resize`, `nwse-resize`
`textTransform`	`full-width`, `full-size-kana`

flex-start / flex-end도 그대로 유지되어 기존 코드는 영향을 받지 않습니다. Grid 컨텍스트에서는 layout-agnostic한 start / end 사용이 권장됩니다.

신규 등록된 프롭

프롭	값
`textWrap`	`wrap`, `nowrap`, `balance`, `pretty`, `stable`
`textDecorationLine`	`none`, `underline`, `overline`, `line-through`, `spelling-error`, `grammar-error`
`textDecorationStyle`	`solid`, `double`, `dotted`, `dashed`, `wavy`
`writingMode`	`horizontal-tb`, `vertical-rl`, `vertical-lr`, `sideways-rl`, `sideways-lr`
`direction`	`ltr`, `rtl`
`overscrollBehavior` / `overscrollBehaviorX` / `overscrollBehaviorY`	`auto`, `contain`, `none`
`scrollBehavior`	`auto`, `smooth`
`scrollSnapAlign`	`none`, `start`, `end`, `center`
`scrollSnapStop`	`normal`, `always`
`touchAction`	`auto`, `none`, `manipulation`
`imageRendering`	`auto`, `pixelated`, `crisp-edges`
`transformStyle`	`flat`, `preserve-3d`
`contain`	`none`, `strict`, `content`, `size`, `inline-size`, `layout`, `style`, `paint`
`contentVisibility`	`visible`, `hidden`, `auto`
`captionSide`	`top`, `bottom`
`emptyCells`	`show`, `hide`
`mixBlendMode`	`normal`, `multiply`, `screen`, `overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`, `hue`, `saturation`, `color`, `luminosity`
`backgroundBlendMode`	`mixBlendMode`와 동일
`WebkitFontSmoothing`	`auto`, `none`, `antialiased`, `subpixel-antialiased`
`MozOsxFontSmoothing`	`auto`, `grayscale`

의도적으로 제외된 값

다음은 spec엔 존재하지만 staticProperties로 받지 않습니다.

합성 문법

단일 키워드가 아닌 다중 토큰 조합이라 strict union으로 표현하기 부적합한 값들입니다. 필요한 경우 $css에서 raw string으로 작성합니다.

scroll-snap-type: x mandatory / y proximity 등 (축 + 강도 조합)
touch-action: pan-x pan-y pinch-zoom 등 (제스처 다중 조합 — 단일값 auto / none / manipulation만 enum)
color-scheme: light dark, only light 등 (다중 스킴/한정자)
align-items: safe center / unsafe center 등 (overflow 한정자)
display: block flex, inline flow-root 등 (multi-keyword form — 기존 precomposed 형태를 사용하세요)

csstype 미반영 값

CSS 표준이지만 TypeScript의 csstype 라이브러리가 아직 받지 않는 값들입니다. enum에 넣으면 컴파일 에러가 나므로 빠졌습니다. 필요한 경우 $css에서 raw string으로 작성합니다.

text-align: justify-all
image-rendering: smooth
mix-blend-mode: plus-darker, plus-lighter (Compositing Level 2)
background-blend-mode: plus-lighter

미구현 / 비실용 값

스펙엔 정의됐지만 어느 브라우저도 구현하지 않은 값입니다.

image-rendering: high-quality
user-select: contain
text-decoration-line: blink (deprecated, 무동작)
caption-side: block-start / block-end (logical 값 — 모든 브라우저 미구현)

SVG 전용 값

HTML 요소에 의미가 없어 혼란을 줄 수 있는 값입니다.

pointer-events: visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, bounding-box (SVG 전용)

정리

변경 위치는 rainbow-sprinkles.css.ts 단일 파일이며 런타임 동작 변화는 없습니다 — 타입 자동완성과 strict union 검증만 넓어집니다
반응형 조건(mobile / tablet / desktop / wide)도 동일하게 신규 프롭에 자동 적용됩니다 ($css={{ display: { mobile: 'block', desktop: 'flex' } }} 형태로 그대로 동작)
기존에 통과하던 모든 값은 그대로 통과합니다. 마이그레이션 불필요

On this page