support for converting css logical properties

clshortfuse commented 1 year ago

CSS Logical Properties aren't rewritten for older browsers:

A working postcss plugin is available here:

https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical

Essentially:

.element {
    block-size: 100px;
    max-inline-size: 400px;
    inline-size: 200px;
    padding-block: 10px 20px;
    margin-inline: auto;
    border-block-width: 2px;
    border-block-style: solid;
}

/* becomes */

.element {
    height: 100px;
    max-width: 400px;
    width: 200px;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-top-style: solid;
    border-bottom-style: solid;
}

I'm current targeting Chrome 84. Chrome 87 supports the newer syntax. eg: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline

Try link:

https://esbuild.github.io/try/#YgAwLjE4LjE1AC0tYnVuZGxlIGVudHJ5LmpzIC0tb3V0ZmlsZT1vdXQuanMgLS10YXJnZXQ9Y2hyb21lODQAZQBlbnRyeS5qcwBpbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGVzLmNzcyc7AABzdHlsZXMuY3NzAC5sb2dpY2FsIHsKICBibG9jay1zaXplOiAxMDBweDsKICBtYXgtaW5saW5lLXNpemU6IDQwMHB4OwogIGlubGluZS1zaXplOiAyMDBweDsKICBwYWRkaW5nLWJsb2NrOiAxMHB4IDIwcHg7CiAgbWFyZ2luLWlubGluZTogYXV0bzsKICBib3JkZXItYmxvY2std2lkdGg6IDJweDsKICBib3JkZXItYmxvY2stc3R5bGU6IHNvbGlkOwp9CgoucmV3cml0ZS10ZXN0IHsKICBtYXNrLWltYWdlOiBub25lOwp9Cgo

evanw commented 1 year ago

Sorry, I'm confused. The CSS before and after doesn't seem to be equivalent. For example:

<!DOCTYPE html>
<style>
  body {
    background: green;
    writing-mode: vertical-rl;
  }

  .element1 {
    block-size: 100px;
    max-inline-size: 400px;
    inline-size: 200px;
    padding-block: 10px 20px;
    margin-inline: auto;
    border-block-width: 2px;
    border-block-style: solid;
  }

  .element2 {
    height: 100px;
    max-width: 400px;
    width: 200px;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-top-style: solid;
    border-bottom-style: solid;
  }

</style>
<div class="element1" style="background: yellow;">some text</div>
<div class="element2" style="background: yellow;">some text</div>

The two elements don't look the same to me (tested in Chrome, Firefox, and Safari).

clshortfuse commented 1 year ago

Sorry the delay. You're right. The postcss plugin adds a options for defaults (eg: ltr/vertical)

The blockDirection and inlineDirection options allow you to specify the direction of the block and inline axes. The default values are top-to-bottom and left-to-right respectively, which would match any latin language.

If authors wanted to try to fully backport for RTL and vertical languages, then they could possibly build a separate CSS file for RTL/vertical. But as of now, with no conversion, the rules aren't understood at all by the browser, so layouts would appear misaligned even in LTR environments.

evanw / esbuild

support for converting css logical properties #3258