This package has been deprecated

Author message:

Use stylelint-use-logical-spec instead.

@adp-psych/stylelint-use-logical

Property Use Logical

Property Use Logical is a stylelint rule to enforce the usage of Logical Properties and Values in CSS.

This package is deprecated. Use stylelint-use-logical-spec instead.

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.

---

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;
}

Similarly, physical horizontal and vertical dimensions are described more succinctly using their logical counterparts.

h1, h2, h3 {
  margin-top: 1em;
  margin-bottom: 1em;
}

blockquote {
  margin-left: 1em;
  margin-right: 1em;
}

/* becomes */

h1, h2, h3 {
  margin-block: 1em;
}

blockquote {
  margin-inline: 1em;
}

Usage

Add stylelint and Property Use Logical to your project.

npm install stylelint stylelint-use-logical --save-dev

Add Property Use Logical to your stylelint configuration.

{
  "plugins": [
    "stylelint-use-logical"
  ],
  "rules": {
    "csstools/use-logical": ("always" || true) || ("ignore" || false || null)
  }
}

Options

always

The "always" option (alternatively true) requires logical properties and values to be used, and the following patterns are not considered violations:

.inset {
  inset: 0;
}

.margin {
  margin-inline-start: 0;
}

.padding {
  padding-inline: 0;
}

.float {
  float: inline-start;
}

.text-align {
  text-align: start;
}

.text-align-ignored:dir(ltr) {
  text-align: left;
}

While the following patterns are considered violations:

.inset {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.margin {
  margin-left: 0;
}

.padding {
  padding-left: 0;
  padding-right: 0;
}

.float {
  float: left;
}

.text-align {
  text-align: left;
}

ignore

The "ignore" option (alternatively false or null) disables the rule.

Secondary Options

except

The except option ignores reporting or autofixing properties and values matching a case-insensitive string or regular expression.

{
  "rules": {
    "csstools/use-logical": ["always", { "except": ['float', /^margin/i] }]
  }
}

direction

The direction option controls whether left to right or right to left properties and values should be reported or autofixed.

{
  "rules": {
    "csstools/use-logical": ["always", { "direction": "ltr" || "rtl" }]
  }
}

Property and Value Mapping

Assuming left to right directionality:

Physical Property	Logical Property
top	inset-block-start
right	inset-inline-end
bottom	inset-block-end
left	inset-inline-start

Physical Property	Logical Property
margin-top	margin-block-start
margin-right	margin-inline-end
margin-bottom	margin-block-end
margin-left	margin-inline-start

Physical Property	Logical Property
padding-top	padding-block-start
padding-right	padding-inline-end
padding-bottom	padding-block-end
padding-left	padding-inline-start