Stylelint Plugin Logical CSS aims to enforce the use of logical CSS properties, values and units. The plugin provides two rules. But first, let's get set up.

Read more about Logical CSS on MDN

Before getting started with the plugin, you must first have Stylelint version 14.0.0 or greater installed

To get started using the plugin, it must first be installed.

npm i stylelint-plugin-logical-css --save-dev

yarn add stylelint-plugin-logical-css --dev

With the plugin installed, the rule(s) can be added to the project's Stylelint configuration.

{
  "plugins": ["stylelint-plugin-logical-css"],
  "rules": {
    "plugin/use-logical-properties-and-values": [
      true,
      { "severity": "warning" }
    ],
    "plugin/use-logical-units": [true, { "severity": "warning" }]
  }
}

• plugin/use-logical-properties-and-values
• plugin/use-logical-units

This rule is responsible for checking both CSS properties and values. When a physical property or value is found, it will be flagged.

{
  "rules": {
    "plugin/use-logical-properties-and-values": [
      true,
      { "severity": "warning" }
    ]
  }
}

Note: As of v0.13.0, the original disable-auto-fix option has been removed. Please use Stylelint's disableFix option instead.

{
  "rules": {
    "plugin/use-logical-properties-and-values": [
      true,
      {
        "severity": "warning",
        "ignore": ["overflow-y", "overflow-x"]
      }
    ]
  }
}

.heading {
  max-width: 90ch; /* Will flag the use of "width" */
  text-align: left; /* Will flag the use of "left" */
  opacity: 1;
  transition: opacity 1s ease, max-width 1s ease; /* Will flag the use of 'max-width' */
}

.heading {
  max-inline-size: 90ch;
  text-align: start;
  opacity: 1;
  transition: opacity 1s ease, max-inline-size: 1s ease;
}

This rule is responsible for checking that logical CSS units are used. Specifically, viewport units like vw and vh which stand for viewport width and viewport height respectively will not reflect different writing modes and directions. Instead, this rule will enforce the logical equivalents, vi and vb.

{
  "rules": {
    "plugin/use-logical-units": [true, { "severity": "warning" }]
  }
}

Note: As of v0.13.0, the original disable-auto-fix option has been removed. Please use Stylelint's disableFix option instead.

{
  "rules": {
    "plugin/use-logical-properties-and-values": [
      true,
      {
        "severity": "warning",
        "ignore": ["dvh", "dvw"]
      }
    ]
  }
}

body {
  max-block-size: 100vh; /* Will flag the physical use of viewport "height" */
}

.container {
  inline-size: clamp(10vw, 100%, 50vw); /* Will flag the physical use of viewport "width" */
}

body {
  max-block-size: 100vb;
}

Read about current browser support for logical viewport units.