Zero-Runtime CSS 구현을 통한 JS Bundle Overhead 제거

Context

브라우저 내 CSS 스타일 계산으로 인한 JavaScript Bundle 크기 증가 및 Core Web Vitals 성능 저하 문제 발생. 런타임 오버헤드를 제거하기 위해 컴파일 타임에 스타일을 확정하는 구조적 전환 필요.

Technical Solution

• tl.create API를 통한 스타일 정의 객체 기반의 선언적 아키텍처 채택
• Literal-only AST Parser를 통한 빌드 타임 스타일 분석 및 유효성 검증
• Property-Value 쌍을 8-character base36 클래스 이름으로 변환하는 Hashing 메커니즘 적용
• 런타임 동적 변수 사용을 배제하고 tl.defineTokens를 통한 컴파일 타임 디자인 토큰 해결
• Pseudo-classes, Breakpoints, Dark mode 등 특수 케이스를 객체 키 기반의 정적 구조로 처리
• 컴파일 후 원본 스타일 객체를 제거하고 순수 String Hash로 대체하는 Bundle Stripping 전략 수행