TL;DR

  • Vanilla Extract는 TypeScript를 전처리기로 사용해 타입 안전하고 로컬 범위가 지정된 스타일을 작성하고, 빌드 시점에 정적 CSS 파일을 생성하는 도구임.
  • 스타일은 모두 빌드 시점에 생성되므로 사용자에게 동적 CSS 엔진을 전달하지 않고 일반 CSS 스타일시트를 제공함.
  • 중첩된 토큰 계약을 기반으로 타입 안전한 테마를 정의하고, 단일 전역 테마나 여러 테마를 사용할 수 있음.
  • 변수, 셀렉터, 의사 클래스, 미디어·기능·컨테이너 쿼리, 키프레임, 글꼴 얼굴, 전역 스타일 등 CSS 기능을 지원함.
  • 프레임워크에 종속되지 않으며 webpack, esbuild, Vite, Next.js 통합을 제공하고 Sprinkles, Recipes, Dessert Box 등으로 확장할 수 있음.

TypeScript 스타일시트 시작하기

  • @vanilla-extract/css 패키지를 설치하고 .css.ts 파일에서 createTheme와 style을 사용해 테마 토큰과 스타일을 정의함.
  • 예제에서는 브랜드 색상과 공백 값으로 테마를 구성하고, 테마 변수에 접근해 요소의 배경색, 글자색, 여백을 지정함.
  • TypeScript를 전처리기로 사용해 타입 안전하고 로컬 범위가 지정된 클래스, 변수, 테마를 작성한 뒤 빌드 시 정적 CSS 파일을 생성함.

타입 안전한 정적 CSS

  • Sass, LESS와 마찬가지로 모든 스타일을 빌드 시점에 생성하면서 TypeScript의 기능을 활용함.

우선적으로 지원하는 테마 기능

  • 하나의 전역 테마 또는 여러 테마를 만들 수 있으며, 모든 테마에 타입 안전한 토큰 계약을 적용함.

프레임워크 비종속성

  • webpack, esbuild, Vite, Next.js용 공식 통합을 제공함.

확장을 위한 설계

  • Sprinkles, Recipes, Dessert Box 같은 라이브러리를 사용하거나 자체 확장 기능을 만들 수 있음.

CSS와 TypeScript의 기능 활용

  • 플랫폼 기능을 포기하지 않고 대규모 코드베이스에서도 유지보수하기 쉬운 CSS를 작성할 수 있음.
  • 변수, 셀렉터, 의사 클래스, 미디어·기능·컨테이너 쿼리, 키프레임, font-face, 전역 스타일을 지원함.
  • 예제는 flex 레이아웃과 :nth-child(2n) 셀렉터를 지정하고, 화면 너비가 768px 이상일 때 방향을 행으로 바꾸는 스타일 구성임.

타입 안전한 테마 구성

  • 깊게 중첩된 토큰 계약으로 테마를 정의하고 TypeScript의 타입 검사를 활용해 변수 참조 오류를 방지함.
  • 예제에서는 색상 토큰을 정의한 뒤 스타일의 배경색에 브랜드 색상 변수를 연결함.

CSS 변수 활용

  • 추상화 계층 없이 CSS 변수를 정의하고 사용할 수 있으며, 익숙한 CSS 변수 패턴을 Vanilla Extract로 옮길 수 있음.
  • 예제에서는 그림자 색상 변수를 만들고, .light와 .dark 조상 셀렉터에 따라 검은색 또는 흰색 값을 지정함.

스타일 구성 정리

  • 스타일 변형을 별도 컬렉션으로 묶고 이름으로 조회할 수 있어 별도의 작명 규칙에 의존하지 않음.
  • 예제에서는 배경색 변형을 primary, secondary, tertiary로, 글자색 변형을 neutral, secondary, link로 구성함.

실제 스타일시트 생성

  • 런타임 비용 없이 개발자 경험을 제공하며, 사용자에게 동적 CSS 엔진 대신 일반 CSS를 전달함.
  • 출력 CSS 예제는 공백 토큰을 사용자 지정 속성으로 만들고, 클래스에서 var()로 해당 값을 참조하는 구조임.

monolisa.dev