css-i18n

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.

Projects often use multiple approaches. Scan for all that apply.

---

Step 2: Scan and Convert

Work file-by-file. For each file, find physical directional properties and convert them to logical equivalents.

Always convert (high confidence)

These are safe to convert in virtually all cases:

Margin and padding

Physical	Logical
margin-left	margin-inline-start
margin-right	margin-inline-end
padding-left	padding-inline-start
padding-right	padding-inline-end

Shorthands with explicit left/right values:

/* Before — 4-value shorthand: top right bottom left */
margin: 0 24px 0 16px;

/* After — use longhand logical properties */
margin-block: 0;
margin-inline-start: 16px;
margin-inline-end: 24px;