CSS Internationalization

Convert physical CSS properties (left, right, margin-left) to logical equivalents (inset-inline-start, margin-inline-start) so layouts flip automatically in RTL contexts.

Why this matters: Physical properties are anchored to the viewport, not the text direction. A margin-left: 16px stays on the left even when dir="rtl" — breaking the visual flow for Arabic, Hebrew, and other RTL scripts. Logical properties follow the text direction automatically.

Step 1: Detect Styling Approach

Determine how the project writes CSS. This decides which patterns to scan for and which reference file to follow.

Check in order:

1. Tailwind CSS — tailwind.config.* exists, or @tailwind / @import "tailwindcss" appears in CSS files. See references/tailwind.md.
2. CSS Modules — files matching *.module.css or *.module.scss. See references/css-modules-and-vanilla.md.
3. CSS-in-JS — imports from styled-components, @emotion/styled, @emotion/css, stitches, vanilla-extract. Follow the same property mappings as vanilla CSS, but in camelCase (see Step 2 inline styles section).
4. Vanilla CSS — plain .css or .scss files. See references/css-modules-and-vanilla.md.
5. Inline styles — style={{ marginLeft: ... }} in JSX/TSX. Follow camelCase mappings in Step 2.