Proposal for `postcss-logical`

[romainmenke]

The current plugin re-writes selectors with :dir().
But it is incorrect because it only considers ltr and rtl and it also changes selector specificity which can lead to bugs.

I don't think the goal must be to have a true polyfill.
This will never work without causing issues.

We can however create a really good fallback.

https://drafts.csswg.org/css-logical/#intro

The plugin inputs are :

• block direction
• inline direction

For English this is :

• block: top to bottom
• inline: left to right

For Chinese :

• block: right to left
• inline: top to bottom

---

For this CSS in English

magin-block-start: 20px;

• block -> top to bottom
• start -> top
• top -> margin-top: 20px;

In Chinese :

• block -> right to left
• start -> right
• right -> margin-right: 20px;

---

The plugin doesn't do anything more than this :

• user configures their fallback mode
• plugin maps to that fallback

---

The downside is that you can not switch modes in the same document.
But here it is important to remember that it is a fallback.
The aim is to have a readable document in both old and new browsers, not to match the full feature.

[Antonio-Laguna]

How should we handle block-size which is handled by the writing-mode?

[romainmenke]

How should we handle block-size which is handled by the writing-mode?

• blockDirection is TopToBottom or BottomToTop -> height
• blockDirection is RightToLeft or LeftToRight -> width

---

writing-mode and direction have the added complexity of being able to influence the layout of text (rotation, order of characters)

The mapping we have in the plugin options should cover what we need from writing-mode to correctly handle properties like block-size.

I never really get a clear picture of everything involved with logical. It is too large and any plugin that inverses values is confusing to me. So I might be overlooking things :)

I found this helpful : https://gist.github.com/romainmenke/18f6a3bdeabaa94186fa468ad974040e

[Antonio-Laguna]

@romainmenke thanks a ton. This is always very confusing and hard to gauge. Thanks for creating that gist too!

[romainmenke]

Going to close this one as all the work has been done :)