Ensure individual logical property utilities are sorted later than left/right pair utilities

[adamwathan]

Resolves #14772.

This PR fixes an issue where utilities like ps-2 were sorted earlier in the generated CSS than px-3, causing ps-2 to not override px-3 as expected.

This happened because px-3 uses padding-left and padding-right, and ps-2 uses padding-inline-start, and in property-order.ts we sort those properties as follows:

  ...
  'padding',
  'padding-inline',
  'padding-block',
  'padding-inline-start',
  'padding-inline-end',
  'padding-top',
  'padding-right',
  'padding-bottom',
  'padding-left',
  ...

Since padding-left and padding-right both appear later than padding-inline-start, the px-3 utility is sorted later in the CSS since all of its properties are later in the sort order than all of properties in ps-2.

To fix this, I'm using our internal --tw-sort property to tell Tailwind to sort the px-3 utility as if it used padding-inline to ensure that it's sorted earlier in the CSS.

This PR applies this same fix for the padding utilities, scroll-margin utilities, and scroll-padding utilities. No changes have been made to the margin utilities because we were already handling this correctly there.

Here you can see that pl-2 overrides px-6 as you'd expect:

…and now with the change in this PR, ps-2 also overrides px-6 as you'd expect:

[philipp-spiess]

I’m not sure I understand the changes in this file. Why was x and y swapped?

[adamwathan]

This is a side effect of px-* and py-* not previously sorting based on padding-inline and padding-block respectively.

For individual sides we sort in TRBL order, so since top comes before right, py-* came before px-*.

Now that we sort based on inline and block, px-* comes first because inline is before block in our sort order.

This actually fixes an inconsistency where margin and padding utilities were sorted differently already because margin was already doing this and padding wasn't:

<!-- Currently -->
<div class="mx-3 my-2"></div>
<div class="py-2 px-3"></div>

<!-- After this PR -->
<div class="mx-3 my-2"></div>
<div class="px-3 py-2"></div>

[philipp-spiess]

Ah yeah gotcha this makes sense 👍

[adamwathan]

Going to merge this even with the test failures since they are an upstream problem unrelated to these changes.