Skip to main content

property-layout-mappings

Specify flow-relative or physical layout mappings for properties.

a { margin-left: 0; }
/** ↑
 * This property */

Use this rule to enforce a convention. Physical properties like margin-left are tied to the screen, while flow-relative properties like margin-inline-start follow the writing mode.

Choose:

  • "flow-relative" to support right-to-left and vertical writing modes
  • "physical" if you support only one writing mode, or for older browsers

The fix option can automatically fix problems reported by this rule when both the primary option is "flow-relative" and the languageOptions.directionality configuration property is configured.

This rule supports up to 3 message arguments: the disallowed mapping and the property, or the physical property and its flow-relative equivalents.

Prior art:

Options​

"flow-relative"​

Layout mappings for properties must always be flow-relative.

note

If you want this rule to automatically fix problems, you must configure the languageOptions.directionality configuration property.

For example, for Latin-based languages such as English:

{
  "languageOptions": {
    "directionality": {
      "block": "top-to-bottom",
      "inline": "left-to-right"
    }
  }
}

Given:

{
  "property-layout-mappings": "flow-relative"
}

The following patterns are considered problems:

a { margin-left: 0; }
a { width: 0; }
a { margin: 0 1px; }
a { transition: margin-left 0 ease; }

The following patterns are not considered problems:

a { margin-inline-start: 0; }
a { inline-size: 0; }
a { margin: 0; }
a { transition: margin-inline-start 0 ease; }

"physical"​

Layout mappings for properties must always be physical.

Given:

{
  "property-layout-mappings": "physical"
}

The following patterns are considered problems:

a { margin-inline-start: 0; }
a { inline-size: 0; }
a { transition: margin-inline-start 0 ease; }

The following patterns are not considered problems:

a { margin-left: 0; }
a { width: 0; }
a { transition: margin-left 0 ease; }

Optional secondary options​

ignoreProperties​

Ignore the specified properties.

{ "ignoreProperties": ["array", "of", "properties", "/regex/"] }

Given:

{
  "property-layout-mappings": [
    "flow-relative",
    { "ignoreProperties": ["/^margin/", "width"] }
  ]
}

The following patterns are not considered problems:

a { margin-left: 0; }
a { width: 0; }
a { transition: margin-left 0 ease; }