Shorthand properties

[ismay]

Currently (if I'm not mistaken) the plugin does not deal with shorthand properties like margin, padding, etc. In looking at the spec: https://www.w3.org/TR/css-logical-1/#logical-shorthand-keyword, it looks like this is still under discussion, so that's not surprising.

I was wondering what the opinions are on how to best deal with this. Would it be too invasive to do this for example, when autofixing with this plugin:

/* from this */
blockquote {
  margin: 1em 2em 3em 4em;
}

/* to this */
blockquote {
  margin-block-start:  1em;
  margin-inline-start: 2em;
  margin-block-end:    3em;
  margin-inline-end:   4em;
}

I suppose one could also outlaw the usage of shorthand via other rules, but was just curious on the recommended course of action.

[romainmenke]

I suppose one could also outlaw the usage of shorthand via other rules,

I think that is the best solution :)

[ismay]

All right, thanks for the quick reply. I agree that as long as the spec is in flux that makes the most sense. For those encountering this as well, https://stylelint.io/user-guide/rules/declaration-property-value-disallowed-list seems most appropriate. This should do the job:

{
  "declaration-property-value-disallowed-list": [
    {
      "border-color": [],
      "border-style": [],
      "border-width": [],
      inset: [],
      margin: [],
      padding: [],
      "scroll-margin": [],
      "scroll-padding": [],
    },
    {
      message: (prop) =>
        `Use longhand form of ${prop} so that it can be autofixed to logical properties and values`,
      severity: "warning",
    },
  ],
};