RTL support

[alizeait]

Is there a plan to support RTL? something like swapping all directional values with each other, as an example change margin-right to margin-left and vice-versa for RTL markets. This solution works pretty well for runtime css-in-js libraries but I am not sure how that would be achieved at build time only. CSS logical properties still doesn't have full support but maybe vanilla-extract could handle switching this with a minimal runtime dependency? Something worth a discussion

[mattcompiles]

Hey Bud 👋

I don't think this is something we'd ever bake into vanilla-extract directly, however you could create your own abstraction to solve this.

Very naive example:

import { style } from '@vanilla-extract/css';

interface RtlMargins {
	marginLeft: number | string;
	marginRight: number | string;
}
function rtlMargin({ marginLeft, marginRight }: RtlMargins) {
	return style({
		marginLeft, 
		marginRight,
		selectors: {
			'[dir="rtl"] &': {
				marginLeft: marginRight,
				marginRight: marginLeft,
			}
		}
	});
}

export const myMargin = rtlMargin({ marginLeft: '10px', marginRight: '10px' })