prefer-logical-properties

This rule reports a utility for a physical property that has a logical form, such as ml-4 (left) for ms-4 (start). A logical property follows the writing direction, so the layout also works in right-to-left languages. The stylistic preset enables this rule.

Reported

style("ml-4");prefer-logical-properties: prefer a logical declaration for `margin-left: calc(var(--spacing) * 4)`

Fixed

style("ms-4");

How to fix

• If the margin separates the element from the content before it, use the logical form, as in the example.
• If the side must stay on the left in every language, such as for an icon that points left, keep the physical form and add a suppression comment.
• For overflow-x-*, overflow-y-*, overscroll-x-*, overscroll-y-*, and divide-y-*, import the matching logical stylesheet. These utilities then keep their names and write logical properties.

Shorthands

A shorthand that gives every side the same value does not depend on the writing direction, so this rule does not report p-4 or overflow-hidden.

The rule reports a shorthand with different values for its sides, such as [padding:1rem_2rem]. It also reports a shorthand that sets only some sides, such as [border-top:var(--border)], for every value.

The rule does not report a single variable in a shorthand for all sides, such as [padding:var(--gap)], because the compiler cannot determine which values the variable holds. With a second value, as in [padding:var(--gap)_1rem], the two values differ, so the rule reports the shorthand.

Rule settings