Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
데브옵스
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
두줄요약
Vite와 Vanilla Extract의 빌드 흐름을 추적해 CSS 우선순위가 import 순서에 따라 뒤바뀌는 원인을 파악했습니다. 뱅코멘트 기반 정렬 플러그인으로 청크를 재조합해 일관된 스타일 순서를 보장했습니다.
문제 상황
- Vite 환경에서 import 순서에 따라 CSS 우선순위가 뒤집혀 컴포넌트 스타일이 깨지는 현상
- reset CSS와 컴포넌트 스타일의 배치가 뒤섞이며 style.css 결과가 매번 달라지는 문제
- 임시로 import 및 build 엔트리 순서를 조정하는 코드가 누적되며 리팩터링 부담 증가
원인 분석
- Vite가 ESM import 규칙을 그대로 따라 모듈을 load하고 transform하는 구조
- Vanilla Extract가 각 *.css.ts 파일을 청크로 컴파일한 뒤, Vite Core CSS Plugin이 이를 순차적으로 결합하는 방식
- 청크 조립 순서가 곧 최종 CSS 우선순위로 이어지는 구조적 특성
해결 방법
- 청크 헤더에 뱅코멘트(/*!)로 ID를 남기는 BangCommentPlugin 적용
- Vite Core CSS Plugin 이후에 ID 기준으로 청크를 재정렬하는 ReorderPlugin 적용
- import 순서와 무관하게 고정된 CSS 우선순위 보장