핵심 요약
우아한형제들이 Vite + VanillaExtract 환경에서 CSS 우선순위 문제를 해결하기 위해 BangCommentPlugin과 ReorderPlugin를 도입해 style.css의 청크 순서를 일관되게 재정렬했고, 리팩터링의 예측 가능성을 높였습니다.
구현 방법
- Vite Core CSS Plugin의 청크 합성 방식과 VanillaExtract 변환 흐름 분석
- 청크 앞에 뱅코멘트 /!ID/를 삽입하는 BangCommentPlugin 구현
- 뱅코멘트를 기준으로 청크를 재배열하는 ReorderPlugin 구현
주요 결과
- 스타일 우선순위가 일관되게 적용되어 컴포넌트 리팩터링 시 예측 가능성 향상
- 패키지 조합 간 다양한 시나리오에서도 재현 가능한 정렬 규칙 확립
