margin-inline / padding-inline logical properties

[bakura10]

Hi :),

First of all thanks a lot for this wonderful library.

According to CanIUse, margin-inline and padding-inline are supported from Safari 14.5, but margin-inline-end/start and padding-inline-end/start from Safari 12.2.

I set the target for Safari 13. As of today, this:

p {
  margin-inline: auto;
  padding-inline: 2px;
}

is compiled to:

p {
  margin-inline: auto;
  padding-inline: 2px;
}

while it should compile to:

p {
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: 2px;
  padding-inline-end: 2px;
}

Thanks!

[bakura10]

Hi @devongovett ,

I am actually still having an issue here, and I wonder if it is due to my config or not. Here is the command I run:

npx parcel-css --nesting --custom-media --targets 'safari 13 or chrome 95 or firefox 90' css/theme.css -o dist/assets/theme.css --bundle

Normally, safari 13 should be covered in the target. However, the following code:

.footer {
   padding-block: var(--footer-padding-block);
}

Is still resolved to:

.footer {
   padding-block: var(--footer-padding-block);
}

Instead of for Safari 13 compatibility:

.footer {
   padding-block-start: var(--footer-padding-block);
   padding-block-end: var(--footer-padding-block);
}

Am I missing something here?