아이스크림 어떤 맛 좋아하세요? 엄마는 외계인? 사빠딸? 녹차? 민트초코😍? 딸기? 망고? 블루베리? 레몬? 복숭아? 라즈베리? 피스타치오? 호두? 아몬드 봉봉? 쿠키 앤 크림? 그 중에서 하나를 고르자면...

엄나는 외계인?

사빠딸?

녹차?

민트초코?

딸기?

망고?

블루베리?

레몬?

복숭아?

라즈베리?

피스타치오?

호두?

아몬드 봉봉?

쿠키 앤 크림?

 

 

저는 Vanilla-extract를 고르겠습니다.

https://vanilla-extract.style/

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

 

이번 합동 세미나에서 Vanilla-extract를 사용하기로 해서 공부 겸 작성해 볼 생각입니다.

 

Vanilla-Extract란?

Vanilla-extract는 TypeScript를 전처리기로 사용해 빌드 시점에 정적 CSS 파일을 생성하는 제로 런타임 스타일링 라이브러리입니다. 이를 통해 타입 안전하게 클래스, 변수, 테마를 정의하고 별도의 런타임 오버헤드 없이 일반 CSS를 배포할 수 있습니다.

 

설치 및 시작하기

npm install @vanilla-extract/css
pnpm add @vanilla-extract/css
yarn add @vanilla-extract/css

styles.css.ts 같은 파일에서 style, createTheme 등의 API를 불러와 사용합니다.

 

주요 특징

1. 타입 안전 정적 CSS

모든 스타일이 빌드 시점에 생성되어 런타임이 아닌 컴파일 타임에 오류를 잡아줍니다. 즉, TypeScript의 타입 시스템을 활용할 수 있습니다.

 

2. 퍼스트 클래스 테마 지원

createTheme를 통해 글로벌 또는 다중 테마를 안전하게 정의하고 토큰 계약을 관리할 수 있습니다.

 

3. 프레임워크 무관

공식 통합 플러그인을 통해 Vite, Next.js, esbuild 등 다양한 빌드 도구와 바로 연동됩니다.

 

4. 확장성

Sprinkles, Recipes 등의 확장 라이브러리를 지원하며, 필요에 따라 커스텀 확장도 가능합니다.

 

주요 사용법

1. 스타일 정의 심화

- globalStyle

import { globalStyle } from '@vanilla-extract/css';

// reset.css.ts
globalStyle('html, body', {
	margin: 0,
    padding: 0,
    boxSizing: 'border-box',
});

전역 규칙을 모듈화해서 관리할 수 있습니다.

 

- 미디어,컨테이너,서포트 쿼리

스타일 객체 안에 @media, @container, @supports를 중첩해 선언합니다.

import { style } from '@vanilla-extract/css';

export const card = style({
  padding: 16,
    '@media': {
   	  '(min-width: 600px)': { padding: 24 },
    },
    '@supports': {
      '(display: grid)': { display: 'grid' },
    },
    '@container': {
      '(min-width: 400px)': { margin: 'auto' },
    },
});

이처럼 파일 안에서 반응형, 기능 감지, 컨테이너 기준 스타일을 한 곳에 모아둘 수 있습니다.

 

2. 타입 안전 테마 관리

- createThemeContract + createTheme

디자인 토큰(색상, 간격 등)의 형태를 정의하고 실제 값을 주입합니다.

// themeContract.css.ts
import { createThemeContract } from '@vanilla-extract/css';

export const themeContract = createThemeContract({
  color: {
    primary: null,
    secondary: null,
  },
  space: {
    small: null,
    medium: null,
  }
});

// theme.css.ts
import { createTheme } from '@vanilla-extract/css';
import { themeContract } from './themeContract.css';

export const [lightThemeClass, lightVars] = createTheme(themeContract, {
  color: { primary: '#0070f3', secondary: '#ff4081' },
  space: { small: '4px', medium: '8px' },
});

이렇게 하면 vars.color.primary 등으로 안전하게 테마 변수를 사용할 수 있습니다.

 

음... 사용법만 나열하였지만 다른 글도 참고 하면서 이해하면 될것 같습니다.

 

참고 자료

https://velog.io/@keumky1/Vanilla-Extract%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

Vanilla Extract란 무엇인가

 

https://jgjgill-blog.netlify.app/post/css-in-ts-vanilla-extract/

CSS에 타입을 입히다 (vanilla-extract)

 

이번 합동 세미나 프로젝트를 하며 Vanilla Extract를 제대로 사용해보고 후기글을 남기고 글을 수정해보겠습니다. 아직 안 써봐서 글이 난잡한점 인점 양해 부탁드립니다.

 

---

후기

(To be continued...)