Vite에서 CSS 우선순위 문제 해결

이 게시물은 우아한공방 디자인 시스템에서 Vite 환경 하 CSS 우선순위 문제를 해결한 과정을 다룹니다.

문제 발생 원인

• Vite는 ESM import 규칙에 따라 모듈을 로드
• VanillaExtract Plugin이 *.css.ts 파일을 청크로 컴파일
• Vite Core CSS Plugin이 청크를 순차적으로 합쳐 style.css를 생성
• import 순서에 따라 style.css 내 스타일 순서가 달라짐

해결 방법

• 각 청크 앞에 뱅코멘트(/*!)로 ID를 삽입하는 BangComment Plugin 개발
• 뱅코멘트 ID 기준으로 청크를 재정렬하는 Reorder Plugin 개발
• 이를 통해 import 순서와 무관하게 일관된 CSS 우선순위 보장

추가 고려사항

• 동일 클래스명이 중복되는 패키지 스타일 병합 문제도 같은 방법으로 해결
• 스타일 적용 순서 가시성 및 유지보수성 향상

이 과정을 통해 우아한공방은 CSS 우선순위 문제를 근본적으로 해결하고 리팩터링 부담을 줄였습니다.