New Rule: use-logical

[NateRadebaugh]

Rule details

Enforce the usage of Logical Properties and Values in CSS. Physical dimensions and directions are described left to right and top to bottom, while their logical counterparts are described start to end and inline or block.

What type of rule is this?

Warns about a potential problem

Example code

https://github.com/csstools/stylelint-use-logical

For example, to add spacing before the start of a paragraph, we might use the physical padding-left property.

p {
  padding-left: 2em;
}

Were the content Hebrew or Arabic — flowing right to left — then we might use alternating padding-left and padding-right properties.

p:dir(ltr) {
  padding-left: 2em;
}

p:dir(rtl) {
  padding-right: 2em;
}

Selector weight aside, we can instead use the logical padding-inline-start property.

p {
  padding-inline-start: 2em;
}

Participation

• I am willing to submit a pull request to implement this rule.

Additional comments

I'm not sure the quirks of the new css parser and context, but my current stylelint configuration for angular projects includes:

{
  "extends": "stylelint-config-standard-scss",
  "plugins": ["stylelint-use-logical"],
  "overrides": [
    {
      "files": ["*.html", "**/*.html"],
      "customSyntax": "postcss-html"
    },
    {
      "files": ["**/*.component.ts"],
      "customSyntax": "postcss-angular"
    }
  ],
  "rules": {
    "csstools/use-logical": [
      "always",
      {
        "except": [
          "min-width",
          "max-width",
          "width",
          "min-height",
          "height",
          "max-height",
          "top",
          "bottom",
          "margin-top",
          "margin-bottom",
          "padding-top",
          "padding-bottom",
          "border-top",
          "border-bottom",
          "border-top-color",
          "border-bottom-color"
        ]
      }
    ]
  }
}

[nzakas]

This sounds like a good idea. To follow ESLint naming conventions, I'd call this prefer-logical-properties.

We'd need to workshop the behavior a bit.

It looks like the Stylelint plugin automatically flags every property that has a logical equivalent and then allows you to opt-out using except? If so, it looks like you're excluding a lot of properties, and I wonder if there isn't some better default behavior?

Does it assume LTR so padding-left is always flagged to be padding-inset-start? Or is there some detection of LTR vs RTL?

[jeddy3]

There's an alternative Stylelint plugin called stylelint-plugin-logical-css that lists a fuller set of logical properties, values, size features and units in its README.

For example:

h1 { 
  font-size: 8vi;
  margin-block: 2vb;

  @container (inline-size > 30em) {
    text-align: start;
  }
}

These have inconsistent support across browsers. For example, padding-inline is supported, whereas overflow-inline from the overflow spec has very little support. Perhaps a better default is Baseline's widely available? It's a shifting target, though.

It may also be helpful to people if the rule flags physical four-directional shorthand properties like margin, padding, and border-width, as there is currently no logical equivalent for these shorthands.