이 문제를 재현할 수 있습니다. R2의 버그로 보입니다.
컴파일러에 :rtl 옵션이 전달되면 CSS가 R2를 통해 처리되어 RTL 관련 변경 사항이 적용됩니다.
이 방식은 잘 작동하지만, 어떤 이유로 인해 CSS가 뒤섞여 반환되는 엣지 케이스에 직면하는 것 같습니다. 모바일 내비게이션 메뉴의 페이드 효과를 생성하는 패턴을 사용하는데, 그 모습은 다음과 같습니다.
이것이 우리가 이 패턴을 사용하는 유일한 곳은 아니며, 단지 예시일 뿐입니다.
R2가 처리하기에는 이 패턴이 너무 복잡한 것 같습니다. RGBA 함수를 호출하고 CSS 변수를 전달한 후, 그 위에 스탑(stop)도 추가하고 있기 때문입니다.
R2를 통해 이 코드가 처리되면 다음과 같은 결과가 반환됩니다.
R2를 끄면 (RTL 로컬 환경에서도) 다음과 같은 결과가 나옵니다.
뒤섞인 CSS는 컴파일러를 혼란스럽게 하여 해당 규칙 이후의 모든 CSS를 적용되지 않는 무용한 코드로 압축시켜 버립니다.
따라서 그 스타일시트 이후에 위치한 여러 스타일시트가 모바일 RTL 환경에서 로드되지 않습니다. 사용자 카드 스타일시트가 그중 하나입니다.
스탑을 제거하여 해당 패턴의 복잡도를 낮추어 보았더니 작동하는 것 같습니다. 즉, 다음과 같은 코드를
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0) 0%,
rgba(var(--secondary-rgb), 1) 100%
);
다음과 같이 변경했습니다.
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
이는 시각적인 변화를 일으키지 않습니다. 왜냐하면 그것이 기본적으로 사용되는 스탑 값이기 때문입니다. 또한 이 방법으로 문제가 해결됩니다.
여기서 이 패턴을 사용하는 모든 곳에 업데이트를 적용하기 위해 PR을 보냈습니다.
문제를 보고해 주셔서 감사합니다 @nildarar 