Fix declaration-block-no-shorthand-property-overrides false negatives for border after border-image

[ybiquitous]

What minimal example or steps are needed to reproduce the bug?

a {
    border-image: linear-gradient(blue, red) 1; /* ignored */
    border: 5px solid red;
}

What minimal configuration is needed to reproduce the bug?

{
  "rules": {
    "declaration-block-no-shorthand-property-overrides": true
  }
}

How did you run Stylelint?

Demo

Also, you can see the ignored border-image in CodePen.

Which Stylelint-related dependencies are you using?

{
  "stylelint": "16.3.1"
}

What did you expect to happen?

The following problem should be reported:

a {
    border-image: linear-gradient(blue, red) 1; /* ignored */
    border: 5px solid red;
 /* ^^^^^^ Unexpected shorthand "border" after "border-image" */
}

What actually happened?

No problems to be reported.

Do you have a proposal to fix the bug?

Instead of adding border-image to the border Map in reference.longhandSubPropertiesOfShorthandProperties, custom logic should be implemented in rules/declaration-block-no-shorthand-property-overrides/index.mjs because border-image is just reset by border, not a longhand property. See also the CSS spec.

Background: #7585 (comment)

[Mouvedia]

Should we fix grid at the same time?
see w3c/csswg-drafts#1036 (comment)

i.e. grid resets grid-column-gap/column-gap and grid-row-gap/row-gap

---

font is affected as well.

ref https://drafts.csswg.org/css-fonts-4/#reset-implicitly

[ybiquitous]

@Mouvedia Thanks for the info. But it seems grid-gap is not reset by the following grid. My example may be wrong, right? See my CodePen.

a {
  display: grid;
  grid-gap: 20px; /* unignored? */
  grid: 50px 50px / 100px 100px;
}

---

I suggest creating an issue for each property (e.g. grid, font etc.) so that we can minimize each PR. We can also write a PR to fix them together if we wish.

[Mouvedia]

But it seems grid-gap is not reset by the following grid.

I didn't say grid-gap.

cf

…grid-column-gap/column-gap and grid-row-gap/row-gap

ref
https://bugzilla.mozilla.org/show_bug.cgi?id=1387410
https://bugs.webkit.org/show_bug.cgi?id=176375
https://bugs.chromium.org/p/chromium/issues/detail?id=761905

I suggest creating an issue for each property…

👍