Vanilla Extract?
CSS in JS의 단점
react를 사용해봤다면 한 번 쯤은 css in js 라이브러리인
styled-component와 emotion을 사용해본 경험이 있으실거라고 생각합니다. css in js는 다음과 같은 장점들을 제공합니다.- className이 겹치지 않음
- css에 js문법을 사용할 수 있어, js를 통해 직접적으로 스타일을 조정할 수 있음
- 컴포넌트 파일내에 관련된 코드들을 함께 두고 관리 할 수 있음. js와 css를 따로 분리하지 않아도 됨
위 장점들은 개발자들에게 css를 기존과 다르게 js를 통하여 관리할 수 있게 해주며 클래스명 중복도 해결해줘 개발자 경험을 크게 상승시켜줍니다. 하지만 단점 또한 명확합니다.
css-in-js 는 런타임에 js가 실행되면서 style이 생성된다는 특징을 가지고 있습니다. 이는 style의 규모가 크면 클수록 번들 크기가 증가하게 되어 성능에 영향을 미치게 됩니다. Vanilla Extract
vanilla extract은 zero-runtime css tool로 공식문서에 다음과 같이 작성이 되어 있습니다. Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.
typescript을 전처리기로 사용하여 타입 세이프하고 로컬 스코프가 지정되어 있는 클래스명, 변수 그리고 테마를 작성하고 빌드타임에 css 파일들을 생성한다. 라고 설명을 하고 있으며 아래 주요 특징들을 가지고 있습니다.zero runtime
vanilla extract은 빌드 타임에 미리 css를 생성하는 방식(
zero runtime)을 사용하고 있어 번들 사이즈에 영향을 주지 않습니다. - 필요한 css를 빌드타임에 미리 생성하며 생성된 css는 link 태그를 기반으로 브라우저에 제공합니다.
동적 스타일링의 경우 css variable를 runtime 환경에서 생성할 수 없습니다. 빌드 타임에 미리 생성한 variable들을 상황에 맞춰 적용해야 되기 때문에 동적인 스타일링에는 css-in-js 보다 제한이 있습니다.
물론
@vanilla-extract/dynamic 을 사용하여 런타임에 필요한 variable을 생성하면 가능은 합니다. typescript
typescript를 통해 css 속성들을 쉽게 찾을 수 있으며 오타 같은 실수를 방지 할 수 있습니다. 추가적으로 속성에 대한 타입과 설명 그리고 mdn 링크를 제공 해줍니다.
사용 방법
모든 스타일들은 적용하기 위해서는
.css.ts postfix 파일 내에 css코드를 작성해야 됩니다. - 다음과 같이 style object를 사용하여 스타일을 적용하며, 전역 스타일의 경우
globalStyle을 사용하면 됩니다.
- 클래스이름의 경우
.css.ts내 작성된 변수들을 및 파일이름 기반으로 난수화된 클래스 이름을 생성하기 때문에 css-in-js를 사용하는것과 같이 클래스 이름 충돌을 걱정 하지 않아도 됩니다.
css properties
모든 css 변수들은 vars 키워드 내에 선언되어야 하며
createVar 를 통해 임의 변수명을 생성해 참조 할 수도 있습니다. createVar 없이 직접 작성해도 됩니다.export 된 css 변수들을
.css.ts 다른 파일내에서 참조하여 사용 할 수 있습니다.theming
프로젝트 내 전역적으로 테마를 활용하기 위해서는
createTheme 를 사용하며 반환되는 themeClass와 vars는 다음과 같은 의미를 가집니다.- themeClass: 테마 변수에 대한 컨테이너 클래스
- vars: 테마가 가지고 있는 변수들에 대한 정보 객체
vars에 이미 정해놓은 값들이 아닌 다른 값들을 사용하고 싶다면 추가적으로 테마를 하나 더 생성하고 제공하는 className을 변경해주기만 하면 테마를 변경 할 수 있습니다.이 외에 추가적으로
sprinkles, recipes를 활용하면 좀 더 편하고 깔끔하게 스타일을 진행 및 관리 할 수 있습니다.Sprinkles:
Sprinkles는 스타일 선언을 축약하는 도구로, 런타임이나 컴파일 타임에 관계없이 사용 가능합니다.
Tailwind CSS와 같이 Atomic CSS를 구성하는 것이 가능해집니다. Atomic CSS는 각 CSS 클래스가 단일 스타일 속성을 가지고, 이러한 클래스들을 조합하여 스타일을 구성하는 방식을 나타냅니다.
이렇게 하면 런타임에서 스타일을 동적으로 생성하는 것이 아니라 미리 정의된 클래스를 조합해 스타일을 적용할 수 있으므로, 스타일의 런타임 비용을 줄이고 스타일의 재사용성을 높일 수 있습니다.
Recipes:
variant 기반 스타일링을 구성할 수 있도록 지원해줍니다. 이를 이용하면 다양한 스타일을 쉽게 관리하고, 필요에 따라 적용할 수 있습니다.
예를 들어, 버튼의 상태에 따라 다른 스타일을 적용하고 싶다면 다음과 같이 작성할 수 있습니다.
button 컴포넌트는 size와 variant를 인자로 받아, recipes 에 전달하여 각각에 맞는 스타일을 적용합니다.