logo
PostsInvestingHomebarArticlesAbout

Zero-runtime stylesheet라니

2023.06.16 / 3min

Intro

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


TOC

어떻게 사용하나?

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 규칙 순서 우선순위에 따라 항상 다른 스타일보다 우선순위가 높다는 것이다.


Reference


avatar
snyungSoftware Engineer(from. 2018)
social-mailsocial-githubsocial-facebooksocial-book