Support for 4 value css in a css variable

[Brian Schlenker]

I have css where the padding is set via a css variable, and that css variable contains the 4 padding values:

:root {
  --padding: 1rem 1rem 1.5rem 1.5rem;
}

.my-class {
  padding: var(--padding);
}

Is there any way to make this do the flip? I'd expect it to output something like this:

[dir=ltr] :root {
  --padding: 1rem 1rem 1.5rem 1.5rem;
}

[dir=rtl] :root {
  --padding: 1rem 1.5rem 1.5rem 1rem;
}

I don't think every 4 value css (is that what they're called) operates in the same order as padding (top right bottom left), so I can see why this would not be trivial. Maybe some more comment directives need to be supported, something like /* treat-like-padding */. I'd be down to submit a pull request for the work, but it definitely needs some discussion.

[Vladimir Kalinichev]

@bschlenk

Released in 1.6.0 as as directive:

:root {
    --padding /* rtl:as:padding */: 1rem 2rem 3rem 4rem;
}

↓

[dir=ltr]:root {
    --padding /* rtl:as:padding */: 1rem 2rem 3rem 4rem;
}

[dir=rtl]:root {
    --padding /* rtl:as:padding */: 1rem 4rem 3rem 2rem;
}

Thanks for feedback!

https://github.com/vkalinichev/postcss-rtl#property-directives