Build a switch for logical properties

[ngdangtu-vn]

Recently I have replaced all the static ones with logical properties in personal projects. And I see no reasons to keep static properties in my website that much longer. Since CSS logical properties has reached to mature state but TW hasn't had a proper support for it, we have fews but not enough, I suggest we made a switch (a TW option) to allow us replace all the static direction properties to corresponding logical properties. Here is a few examples:

1. top-*: top → inset-block-start
2. mt-*: margin-top → margin-block-start
3. pr-*: padding-right → padding-block-end
4. px-*: ... → padding-inline
5. w-*: width → inline-size
6. etc.

Here is my config idea:

{ useLogicalProperties: boolean |LogicalPropertyOption }
interfact LogicialPropertyOption {
   inset: boolean
   border: boolean
   padding: boolean
   margin: boolean
   width: boolean
   height: boolean
}

The LogicialPropertyOption allow fine-grain control on which property you want to replace logical properties with.

I've done a search for similar discussion and found one. However I think my idea is different approach. So I think it suits for a separated thread.