Add support for CSS Logical Properties

[lachlanjc]

Pretty sure I got them all :)

Closes #794

[folz]

LGTM! One comment below. I'm also not a maintainer so feel free to disregard.

[folz]

This feels a bit nitpicky, but I think it'd be worthwhile to include all the logical properties in a test since any one of them could regress.

[peduarte]

Nice, good to see this 😍

Just today I created this issue in Styled System, since I use @styled-system/css instead of Theme UI's.

👉 styled-system/styled-system#1268

How do you feel about adding aliases to the margin and padding logical properties? I think since we have aliases for margin and padding it could make sense here too.

• mbs: marginBlockStart
• mbe: marginBlockEnd
• mis: marginInlineStart
• mie: marginInlineEnd
• pbs: paddingBlockStart
• pbe: paddingBlockEnd
• pis: paddingInlineStart
• pie: paddingInlineEnd

[lachlanjc]

@jxnblk Thoughts on this? Should we add aliases for spacial logical properties?

[folz]

A point of confusion I could see is that marginBlock is a valid rule, but marginBottom has already taken the mb abbreviation. mbk maybe?

marginInline could also be abbreviated mi if we go forward with logical abbreviations.

[jxnblk]

I don't think we should worry about shorthands for this PR. @peduarte note that @styled-system/css is deprecated in favor of @theme-ui/css so this feature probably won't land in the old package

[peduarte]

Ah, I had a feeling that this would be the case 🙂

SGTM 👍

[lachlanjc]

@jxnblk Are you looking for any changes here or is this good to merge?

[jxnblk]

Sorry for the delay! This looks great, thanks for getting this together!