개발 서버에서는 안 보이던 버그 — Lightning CSS가 내 접두사를 중복으로 봤다

로그인 화면에 노드망 배경을 올리고 카드를 유리(backdrop-filter)로 바꿨다. 개발 서버에서는 멀쩡했다. 배포 번들을 뜯어보고 나서야 알았다. 근거 커밋은 70ef0ec.

번들에 표준 선언이 0개였다

빌드 결과에서 backdrop-filter 를 세어 봤다.

내가 호환성을 챙긴다고 접두사를 손으로 같이 써 둔 것이 원인이었다. Lightning CSS 가 그 둘을 중복 선언으로 보고 표준 쪽을 지웠다. 남은 것은 접두사뿐이니, 접두사를 모르는 브라우저에서는 유리가 통째로 사라진다.

개발 서버는 미니파이를 하지 않는다. 그래서 내 CSS 가 그대로 살아 있었고, 화면은 정상으로 보였다. 프로덕션 빌드에서만 나는 버그였다.

고치는 건 간단했다 — 손으로 쓴 접두사 29개를 전부 걷고 도구에 맡겼다. 이제 번들에 표준 29 + 접두사 29 로 짝이 맞는다. 대상은 이 커밋의 로그인 카드만이 아니라 앞 커밋에서 만든 유리 전부였다.

여기서 배운 게 버그 자체보다 크다.

로그인과 공개 지원 폼은 개발 모드에서 아예 볼 수가 없다. DEV_USER 가 자동 로그인해버려서 그 라우트로 갈 수가 없기 때문이다. 그래서 그 화면들은 프로덕션 빌드를 4173 포트에 띄워 확인하기로 했다.

같은 방법으로 하나 더 실증했다 — 목 데이터와 ?preview 표본이 배포 번들에 남지 않는다는 것. import.meta.env.DEV 안에 두면 빌드에서 죽은 코드로 제거된다. 이건 “그럴 것이다”가 아니라 번들을 열어서 확인해야 하는 종류의 일이었다.

개발 서버와 프로덕션 빌드는 다른 프로그램이다. 미니파이·트리셰이킹·CSS 변환이 전부 프로덕션에만 붙는다. “로컬에서 되니까 됐다”가 통하지 않는 구간이 있고, 유리 효과처럼 눈에 보이는 것도 그 구간에 들어갈 수 있다.

그리고 호환성을 손으로 챙기지 말 것. 도구가 이미 하고 있고, 내가 거들면 도구가 내 것을 중복으로 보고 지운다.