원문: https://github.com/facebook/astryx/wiki/Why-StyleX · 번역 기준: 2026-09-03
Astryx는 모든 컴포넌트 스타일링에 내부적으로 StyleX를 사용합니다. 소비자에게는 StyleX가 필요 없습니다 — 소비자는 사전 컴파일된 CSS를 사용하고, 원하는 무엇으로든 스타일링할 수 있습니다.
이 페이지는 왜 StyleX가 올바른 내부 authoring 도구인지, StyleX 없이 소비자 경험이 어떻게 작동하는지, 그리고 트레이드오프가 무엇인지 설명합니다.
StyleX는 Astryx 팀에게 컴파일 타임 강제, atomic CSS 출력, 그리고 내부 스타일 대부분을 private하게 유지할 수 있는 능력을 줍니다. 소비자는 StyleX를 결코 보지 않습니다 — CSS 파일을 import하고, 타입이 지정된 props를 사용하고, Tailwind, CSS modules, 순수 CSS 등 선호하는 무엇으로든 className으로 override합니다.
┌──────────────────────────────────────────────────────────┐
│ WHAT CONSUMERS SEE │
│ │
│ import '@astryxdesign/core/astryx.css'; │
│ <Button variant="primary" className="mt-4">Save</Button> │
│ │
│ • Pre-compiled CSS — no build plugin needed │
│ • className for overrides — any styling library works │
│ • CSS custom properties for theming │
│ • Stable class names (astryx-button, astryx-card) for selectors│
├──────────────────────────────────────────────────────────┤
│ WHAT Astryx AUTHORS SEE │
│ │
│ stylex.create({base: {color: colorVars['--color-text-primary']}}) │
│ │
│ • Compile-time token enforcement │
│ • Type-safe variants and themes │
│ • Atomic CSS deduplication │
│ • Internal styles stay internal │
└──────────────────────────────────────────────────────────┘
StyleX는 TypeScript를 사용해 유효한 token만 사용되도록 강제합니다. token이 존재하지 않으면 코드가 컴파일되지 않습니다.
// StyleX: invalid tokens are compile errors
import {colorVars} from './tokens.stylex';
const styles = stylex.create({
bad: {color: colorVars['--color-does-not-exist']}, // ← TypeScript error
});
design system에서 이것이 중요한 이유는 제약이 곧 제품이기 때문입니다. 모든 컴포넌트는 token 시스템을 사용해야 합니다 — 어딘가 문서에 그렇게 적어 놓았기 때문이 아니라, 컴파일러가 강제하기 때문입니다. 날것의 hex 값, 임의의 픽셀 값, 스케일을 벗어난 spacing은 몰래 끼어들 수 없습니다.
StyleX는 구현 세부사항인 atomic하고 결정적인 클래스 이름을 생성합니다. 소비자는 내부 CSS 클래스를 들여다보고 그것에 의존하는 방식이 아니라, 타입이 지정된 props와 className을 통해 컴포넌트와 상호작용합니다.
이는 Astryx가 내부 스타일링을 자유롭게 리팩터링할 수 있다는 뜻입니다 — token 참조를 재조직하고, hover 상태가 레이어링되는 방식을 바꾸고, cascade를 재구성해도 — 소비자를 깨뜨리지 않습니다. 내부 구현은 진정으로 private합니다.
StyleX token은 TypeScript 값입니다. 테마 override는 token 정의에 대해 타입 체크됩니다. token의 이름이 바뀌거나 제거되면, 모든 사용처가 컴파일 에러를 받습니다 — 조용한 시각적 회귀가 아니라요.
// Token definition
export const colorVars = stylex.defineVars({
'--color-accent': 'light-dark(#0064E0, #2694FE)',
'--color-text-primary': 'light-dark(#0A1317, #DFE2E5)',
});
// ← TypeScript catches typos and stale references