Zero-runtime stylesheet라니

Intro

vanilla-extract는 타입스크립트를 전처리기로 사용하여, Type-Safe하고 작성한 scoped 클래스, 변수, 테마들이 빌드시전에 static CSS로 만들어진다.

어떻게 사용하나?

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

style 만들기

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

export const container = style({
  padding: 10
});

Importantly, this does two things:

creates a locally scoped class
exports the generated class name.

Apply the style
CSS Properties
CSS 스타일을 정의하는 방법과 유사하지만 여느 CSS in JS처럼 kebab-case가 아닌 camelCase를 사용한다.
Unitless Properties
Unitless Properties로 단위를 붙이지 않고 숫자만 입력하더라도 자동으로 단위를 추가해준다.
Vendor Prefixes
특정 벤더에서 사용되는 CSS Properties는 PascalCase를 사용해서 대문자로 시작하면 된다.
CSS Variables

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

const myStyle = style({
  vars: {
    '--my-global-variable': 'purple'
  }
});

함수를 사용해서 변수명을 만들 수도 있다.

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

const myVar = createVar();

const myStyle = style({
  vars: {
    [myVar]: 'purple'
  }
});

실제로 사용해보니 직접 이름을 정해서 하는 방식은 export가 되지 않아서 이름을 까먹게 되면 문제가 발생하는데 createVar를 사용하게 되면 이름을 정해야하는 고민을 하지 않고 만들어서 export를 하고 원하는 곳에서 재사용할 수 있다는 장점을 가진다.

Media Queries
@media 키를 사용해서 스타일 정의내에 추가할 수 있다.

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

const myStyle = style({
  '@media': {
    'screen and (min-width: 768px)': {
      padding: 10
    },
    '(prefers-reduced-motion)': {
      transitionProperty: 'color'
    }
  }
});

media queriess 부분이 전처리되고 나서는 파일의 제일 하단부에 추가된다. 즉, @media 키 안의 스타일은 CSS 규칙 순서 우선순위에 따라 항상 다른 스타일보다 우선순위가 높다는 것이다.

Zero-runtime stylesheet라니

Intro

TOC

어떻게 사용하나?

Reference