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