Vanilla Extract - 설치 및 구현

서론

사실 나는 CSS-in-JS 라이브러리를 굉장히 좋아한다. (Emotion, styled-componets) 이유중 하나라면 다들 스파게티 코드라고 불리우는 JS 파일내에서 CSS를 처리할수 있으며 (colocation), 동적으로 CSS 처리도쉽기 때문에 좋아하였다.

그런데 최근 React 18에서 Server-component를 지원하기 시작하였고, 기존 CSR → SSR로 판도가 변하면서 많이 달라졌는데 그러면서 기존에 run-time 중에 생성한 CSS-in-JS는 자연스럽게 사용이 어려워졌다. (사실 태생부터 run-time과 함께 만들어지게 되었는데 SSR 지원은 굉장히 어려운 일이 였을 것이다.)

그러다가 대체제로 다양한 선택지가 있었는데 Tailwind는 굉장히 인기가 좋았지만 개인적으로는 DX측면에서는 좋다고 생각되지 않았다. (적용 등은 쉽긴하지만 className이 길어진다든가, classNaming을 외워야 된다는 단점이 있던 것 같다.)

그래서 이번에 전부터 눈독 들였던 Vanilla Extract에 대해서 한번 배워볼까한다.

Vanilla Extract

Zero-runtime Stylesheets in TypeScript. Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

공식문서에 적혀있는 그대로이다 typescript 의 zero-runtime 스타일 시트

zero-runtime? 그게 뭔데?

zero-runtime을 강조하는건 알겠는데 도대체 그게 뭔지 궁금하지 않은가? 기존 runtime 대비해서 왜 좋고, zero-runtime이 무엇인지 알아보자

1. Runtime CSS (Emotion, Styled-components)이것이 장점이자 단점이 되었던 것이 매번 동적으로 코드를 생성하다보니 지나치게 많은 데이터를 다룰시 렌더링일 오래 걸리는 단점이 있었다 (극단적이긴 했지만)
2. 또한 SSR의 경우 서버에서 렌더링 되어서 나오기 때문에 일단 javascript runtime을 거칠수 없게되므로 태생적으로 사용할수 없게 되었다.
3. javascript runtime에서 필요한 CSS를 동적으로 만들어 적용한다.
4. Zero-runtime CSS쉽게 이미 빌드시점에서 CSS를 생성해 버려서 첫로드는 빠르지만, 첫 페인트는 느릴수 있다(FP)
5. 빌드 시점에 CSS를 생성하고, 생성된 CSS를 브라우저에 전달하여 적용하는 작업의 개념

Runtime의 경우 개발적 측면에서는 굉장히 메리트가 있지만, 성능측면에서는 좋지 않다. 이러다보니 대부분 Zero-runtime으로 넘어가는 추세이며, 아니면 애초에 SASS나 CSS Module, Tailwind같이 CSS를 사용하는 것으로 넘어가는 추세 인 것 같다.

설치 및 구현 방법

설치 방법은 굉장히 쉽다

# npm
npm install @vanilla-extract/css

# yarn
yarn add @vanilla-extract/css

또 번들러마다 세팅 방법이 다르니 아래 참조바란다 현재 글에서는 vite 기준으로 설명할 예정이다

• vite - 이번 프로젝트
• esbuild
• webpack
• next
• parcel
• rollup
• gatsby

vite로 설명할 예정이므로 vite로 설치

# npm
npm install --save-dev @vanilla-extract/vite-plugin

# yarn
yarn add @vanilla-extract/vite-plugin --dev

vite.config.ts 파일내에서 아래와 같이 설정해준다

import { defineConfig } from "vite";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import react from "@vitejs/plugin-react";

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],
});

설정이 완료되었다면 간단하게 스타일링을 해봅시다

// style.css.ts
import { style } from "@vanilla-extract/css";

export const container = style({
  padding: 10,
  border: "1px solid red",
  color: "blue",
});

// app.ts

import { container } from "./styles.css";

function App() {
	// 생략 
  return (
    <>
			/* 생략 */
      <section className={container}>테스트</section>
    </>
  );
}

export default App;

아래와 같은 결과를 볼수있다.

간단하게 구현을 해봤는데 다음장에서는 자세하게 API에 대해서 살펴보도록한다.