logical css properties seems not to resolve when conflicting with normal css properties

[lord007tn]

Describe the bug

When having a logical property like ps-2 and we add to it pl-4 they don't resolve and the two values are printed
as mentioned down in the pull request of shadcn-vue

To Reproduce

radix-vue/shadcn-vue#379 (comment)

Expected behavior

twMerge('pl-4', 'ps-6') ---> pl-4 ps-6 (directional + logical) the expected result should be ps-6 only as it come later
twMerge('pl-4', 'pl-6') ---> pl-6 (directional + directional)
twMerge('ps-4', 'ps-6') ---> ps-6 (logical+ logical)

[dcastil]

Hey @lord007tn! 👋

tailwind-merge doesn't resolve conflicts between normal and logical properties because it doesn't have access to the axis along which logical properties are being applied. This axis is dynamic and can be different for any node in the DOM.

E.g. ps-6 (applying the padding-inline-start property) would be in conflict with pl-4 without any other properties being set. But if a parent node applies the CSS direction: rtl, ps-6 wouldn't be in conflict with pl-4 anymore because ps-6 then gets applied to the right side instead. And if additionally writing-mode: vertical-lr is applied (to a parent), ps-6 gets applied to the bottom of the node.