nextjs로 진행하면서 익숙하던 styled-compoennts를 냅두고 tailwind css냐 module.css냐를 고민하다가 vanilla-extract라는 라이브러리를 알게되서 이번에 한번 사용해보기로 했다.
어차피 css 라이브러리라 러닝커브가 낮을 것 같다는 생각과 typescript를 사용하고 빌드 타임에 정적 css를 만든다는 점에서 사용하게 됐다.
낯설지 않은 사용
우선 css라고 생각해서 파일 확장자도 css로 끝날 줄 알았으나 ts로 끝난다는 점에서 굉장히 낯설었고, 방식은 styled-component처럼 style이라는 함수를 이용하여 이 안에 css 객체를 넣으면 정적으로 css를 만들어주는 그런 시스템으로 동작하고 있다. 컴포넌트에 적용이 될 때는 클래스 이름에 유니크한 이름을 주어서 다른 css와 충돌을 피하게 만든다.
//layout.css.ts
import {style} from '@vanilla-extract/css"
export const wrapper = style({
width: '100%',
height: '100%',
});
// layout.tsx
import {wrapper} from 'layout.css.ts';
export default function RootLayout({children}:PropsWithChildren) {
return (
<html lang="ko">
<body>
<div id="root" className={wrapper}>
{children}}
</div>
</body>
</html>
)
}셀렉터 적용
Styled components를 사용할 때에는 상위 컴포넌트에서 하위 컴포넌트로 css를 주는 방식을 선호했는데 이번 라이브러리에서는
사용하는 곳에서 상위 셀렉터를 적용을 시켜줘야 한다. 그래서 이 부분에서 한참 애먹었다.
export const headerNavUl = style({
selectors: {
[`${header} nav &`]: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1.32rem",
alignItems: "flex-end",
},
},
});위 코드 처럼 header는 같은 style 스타일 객체를 의미하며 저런식으로 넣어줘야 하며 '&'은 항상 마지막에 위치를 하여야 한다.
여기까지 한번 써봤는데 사실 내가 사용하기에는 좀 불편한 점이 있어서 뭔가 마음에 들지 않는다. 다른 CSS도 한번 씩 겪어보고 공부를 해봐야겠다.
dygmm4288