Skip to main content

property-layout-mappings

Specify flow-relative or physical layout mappings for properties.

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

Physical layout properties like margin-left are tied to the physical dimensions of the screen. Flow-relative properties like margin-inline-start adapt to different writing modes and text directions, making them useful for internationalization. They are also consistent with other layout concepts like flexbox and grid, which already use flow-relative logic.

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.

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

The following patterns are not considered problems:

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

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

The following patterns are not considered problems:

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

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