디자인 시스템을 붙이자 반응형이 깨졌다 — CSS 캐스케이드 충돌을 @source로 푼 이야기
사내 디자인 시스템을 예약 앱에 도입하자 lg 반응형이 무력화돼 운영에서 롤백했다. 빌드 산출 CSS에서 규칙 위치로 원인을 확인하고, 세 가지 선택지를 비교해 앱 Tailwind가 DS 클래스를 직접 생성하는 방식으로 재도입한 기록.
2개의 글
사내 디자인 시스템을 예약 앱에 도입하자 lg 반응형이 무력화돼 운영에서 롤백했다. 빌드 산출 CSS에서 규칙 위치로 원인을 확인하고, 세 가지 선택지를 비교해 앱 Tailwind가 DS 클래스를 직접 생성하는 방식으로 재도입한 기록.
디자인 토큰 파이프라인을 갖춘 컴포넌트 라이브러리인데, 정작 컴포넌트 코드에는 Tailwind 임의값(`[16px]` 같은 대괄호 문법)이 100개 넘게 박혀 있었다. 전수조사로 토큰화 가능한 값과 예외로 남겨야 하는 값을 가른 과정.