Next.js - styling for 2 languages

I have 2 languages in 1 site, English and Arabic, and the only difference in terms of styling between these 2 sites is that for example, the padding-left becomes padding-right, same thing applies for margins and positions, so I am trying to avoid any CSS duplication and I thought to myself that i should create some sorts of variables in my SCSS modules, has anyone ever encountered this issue? I didn't find any resources that tackle this issue (The language thingy is being handled by next-intl, I am using next.js and scss modules for my styling).

I am using scss modules and as usual each component has its own scss.module files.

Solution

CSS provides built-in support for Logical Properties. This feature simplifies styling by allowing you to define properties once, with the browser automatically adjusting them based on the parent's dir attribute.

For instance, instead of specifying padding-left: 1rem, you should opt for padding-inline-start: 1rem.

Syntax:

[property]-[axis]-[direction]: [value]

The axis can be either inline or block.
The direction can be start or end. The supported properties include:
padding
margin
inset (top, left, bottom, right)
text-align
border
border-radius
scroll-padding
scroll-margin

To utilize logical properties, set the parent's page direction (or the html tag) as follows:

// This is a JSX code
<html dir={lang === "ar" ? "rtl" : "ltr"}>

Subsequently, employ logical properties instead of physical ones. For example:

Don't	Do
`padding-left`	`padding-inline-start`
`padding-right`	`padding-inline-end`
`padding-top`	`padding-block-start`
`padding-bottom`	`padding-block-end`
`margin-left`	`margin-inline-start`
`margin-right`	`margin-inline-end`
`border-left`	`border-inline-start`
`border-right`	`border-inline-end`
`border-top-left-radius`	`border-start-start-radius`, `border-start-end-radius`, `border-end-start-radius`, `border-end-end-radius`
`text-align: left`	`text-align: start`
`scroll-padding-left`	`scroll-padding-inline-start`
`scroll-padding-right`	`scroll-padding-inline-end`
`scroll-margin-left`	`scroll-margin-inline-start`
`scroll-margin-right`	`scroll-margin-inline-end`

By doing this, padding-inline-start functions as padding-left in LTR languages and as padding-right in RTL languages. For top-to-down languages like Japanese, use padding-block-start instead of padding-top.

If you're working with tailwindcss, I've developed eslint plugin that warns if you write physical property class and suggest you use its logical equivalent. I don't know if there is a similar styleLint plugin for CSS and SCSS.