CSS Logical Properties and Values

[stiekstra]

Is there a way to support the ordering of the CSS Logical Properties? At the moment is seems that properties like padding-inline are placed at the bottom instead of ordered with the other box-model properties?

[katiehartrick]

Second this, it is a much-needed addition.

There is an open PR from branch https://github.com/julienw/stylelint-config-idiomatic-order/tree/add-inline-stuff

[m4olivei]

This would be wonderful, as it is the linter forces a pretty frustrating non-intuitve ordering.

For example, what I want:

.my-rule {
  display: flex;
  inline-size: 12px;
  block-size: 24px;
  align-items: center;
  justify-content: space-between;
  background-color: $background;
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
  border-radius: unset;
  box-shadow: none;
  transform: translate(-100%, -50%);
  transition: none;
}

What it forces me into:

.my-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: $background;
  block-size: 24px;
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
  border-radius: unset;
  box-shadow: none;
  inline-size: 12px;
  transform: translate(-100%, -50%);
  transition: none;
}

In terms of idomatic CSS, CSS logical properties that would be part of positioning / display and box model, are pushed into the "Other" alphabetical grouping.

[m4olivei]

Linking the open PR: https://github.com/ream88/stylelint-config-idiomatic-order/pull/76