Code first for ltr / rtl

[splincode]

In our code base

// less
.banner {
  padding-inline: 20px 40px;
}

After building in bundle

/* css */
.banner:dir(ltr) {
  padding-left: 20px; 
  padding-right: 40px;
}

.banner:dir(rtl) {
  padding-right: 20px; 
  padding-left: 40px;
}

PostCSS plugin: https://github.com/csstools/postcss-logical

What do you think about migrate to https://drafts.csswg.org/css-logical/?

[waterplea]

Don't use padding-inline, use explicit padding-inline-start and padding-inline-end, shorthand version is not supported in Safari below 15:
https://caniuse.com/css-logical-props