Package Exports

stylelint-plugin-logical-css
stylelint-plugin-logical-css/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stylelint-plugin-logical-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🛸 Stylelint Plugin Logical CSS

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

Getting Started

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

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" }
    ]
  }
}

Options

Option	Description
disable-auto-fix	Use this option to prevent auto-fixing warnings and errors while saving.
ignore	Pass an array of physical properties to ignore while linting.

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

Usage

Not Allowed

.heading {
  max-width: 90ch; /* Will flag the use of "width" */
  text-align: left; /* Will flag the use of "left" */
}

Allowed

.heading {
  max-inline-size: 90ch;
  text-align: start;
}

Supported Properties and Values

Properties for sizing

Physical Property	Logical Property
`height`	`block-size`
`width`	`inline-size`
`max-height`	`max-block-size`
`max-width`	`max-inline-size`
`min-height`	`min-block-size`
`min-width`	`min-inline-size`

Properties for margins, borders, and padding

Physical Property	Logical Property
`border-top` & `border-bottom`	`border-block`
`border-top-color` & `border-bottom-color`	`border-block-color`
`border-top-style` & `border-bottom-style`	`border-block-style`
`border-top-width` & `border-bottom-width`	`border-block-width`
`border-left` & `border-right`	`border-inline`
`border-left-color` & `border-right-color`	`border-inline-color`
`border-left-style` & `border-right-style`	`border-inline-style`
`border-left-width` & `border-right-width`	`border-inline-width`
`border-bottom`	`border-block-end`
`border-bottom-color`	`border-block-end-color`
`border-bottom-style`	`border-block-end-style`
`border-bottom-width`	`border-block-end-width`
`border-top`	`border-block-start`
`border-top-color`	`border-block-start-color`
`border-top-style`	`border-block-start-style`
`border-top-width`	`border-block-start-width`
`border-right`	`border-inline-end`
`border-right-color`	`border-inline-end-color`
`border-right-style`	`border-inline-end-style`
`border-right-width`	`border-inline-end-width`
`border-left`	`border-inline-start`
`border-left-color`	`border-inline-start-color`
`border-left-style`	`border-inline-start-style`
`border-left-width`	`border-inline-start-width`
`border-bottom-left-radius`	`border-end-start-radius`
`border-bottom-right-radius`	`border-end-end-radius`
`border-top-left-radius`	`border-start-start-radius`
`border-top-right-radius`	`border-start-end-radius`
`margin-top` & `margin-bottom`	`margin-block`
`margin-top`	`margin-block-start`
`margin-bottom`	`margin-block-end`
`margin-left` & `margin-right`	`margin-inline`
`margin-left`	`margin-inline-start`
`margin-right`	`margin-inline-end`
`padding-top` & `padding-bottom`	`padding-block`
`padding-top`	`padding-block-start`
`padding-bottom`	`padding-block-end`
`padding-left` & `padding-right`	`padding-inline`
`padding-left`	`padding-inline-start`
`padding-right`	`padding-inline-end`

Properties for floating and positioning

Physical Property	Logical Property
`clear: left`	`clear: inline-start`
`clear: right`	`clear: inline-end`
`float: left`	`float: inline-start`
`float: right`	`float: inline-end`
`top` & `bottom`	`inset-block`
`top`	`inset-block-start`
`bottom`	`inset-block-end`
`left` & `right`	`inset-inline`
`left`	`inset-inline-start`
`right`	`inset-inline-end`

Properties for size containment

Physical Property	Logical Property
`contain-intrinsic-height`	`contain-intrinsic-block-size`
`contain-intrinsic-width`	`contain-intrinsic-inline-size`

Other properties

Physical Property	Logical Property
`(-webkit-)box-orient: vertical`	`(-webkit-)box-orient: block-axis`
`(-webkit-)box-orient: horizontal`	`(-webkit-)box-orient: inline-axis`
`caption-side: top`	`caption-side: block-start`
`caption-side: bottom`	`caption-side: block-end`
`caption-side: right`	`caption-side: inline-end`
`caption-side: left`	`caption-side: inline-start`
`overflow-y`	`overflow-block`
`overflow-x`	`overflow-inline`
`overscroll-behavior-x`	`overscroll-behavior-inline`
`overscroll-behavior-y`	`overscroll-behavior-block`
`resize: horizontal`	`resize: inline`
`resize: vertical`	`resize: block`
`scroll-margin-bottom`	`scroll-margin-block-end`
`scroll-margin-bottom` & `scroll-margin-top`	`scroll-margin-block`
`scroll-margin-left`	`scroll-margin-inline-start`
`scroll-margin-left` & `scroll-margin-right`	`scroll-margin-inline`
`scroll-margin-right`	`scroll-margin-inline-end`
`scroll-margin-top`	`scroll-margin-block-start`
`scroll-padding-bottom`	`scroll-padding-block-end`
`scroll-padding-bottom` & `scroll-padding-top`	`scroll-padding-block`
`scroll-padding-left`	`scroll-padding-inline-start`
`scroll-padding-left` & `scroll-padding-right`	`scroll-padding-inline`
`scroll-padding-right`	`scroll-padding-inline-end`
`scroll-padding-top`	`scroll-padding-block-start`
`text-align: left`	`text-align: start`
`text-align: right`	`text-align: end`

plugin/use-logical-units

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" }]
  }
}

Options

Option	Description
disable-auto-fix	Use this option to prevent auto-fixing warnings and errors while saving.
ignore	Pass an array of physical units to ignore while linting.

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

Usage

Not Allowed

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

Allowed

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

Supported Units

Read about current browser support for logical viewport units.

Physical Unit	Logical Unit
dvh	dvb
dvw	dvi
lvh	lvb
lvw	lvi
svh	svb
svw	svi
vh	vb
vw	vi