stylelint: Add `"ignoreLonghands": []` to `declaration-block-no-redundant-longhand-properties`

use cases

• text-decoration
• background

rationale

If a browser doesn’t support the new arity for a given shorthand, it will drop it altogether. For example if we were to introduce an enhancement for the current fixer of text-decoration by adding support to text-decoration-thickness, for a lot of users of the rule it would introduce a hard to detect regression.
They would have to rely on "ignoreShorthands": ["text-decoration"] which is arguably a downgrade compared to the status quo. Hence a new option is required to be more granular and cross-browser.

text-decoration

rationale for new fix

https://github.com/stylelint/stylelint/pull/6580#discussion_r1095994177 #7060

without option

a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: green;
  text-decoration-thickness: 1px;
}

becomes

a {
  text-decoration: underline solid green 1px;
}

with "ignoreLonghands": ["text-decoration-thickness"]

a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: green;
  text-decoration-thickness: 1px;
}

becomes

a {
	text-decoration: underline solid green;
	text-decoration-thickness: 1px;
}

references

https://bugs.webkit.org/show_bug.cgi?id=190774 https://drafts.csswg.org/css-text-decor-4/#text-decoration-property

implementation details

Firefox 69 supports this feature (preffed off) under the name text-decoration-width, behind the pref layout.css.text-decoration-width.enabled. text-decoration-skip is not part of the shorthand but will have to be eventually added in a separate PR.

browser support

https://caniuse.com/?search=text-decoration-thickness

background

rationale

https://caniuse.com/background-img-opts

example

{
  "fix": true,
  "rules": {
    "declaration-block-no-redundant-longhand-properties": [
      true,
      { "ignoreLonghands": ["background-size", "background-origin", "background-clip"] }
    ],
  }
}

a {
  background-image: none;
  background-position: 0% 0%;
  background-size: auto auto;
  background-repeat: repeat;
  background-origin: padding-box;
  background-clip: border-box;
  background-attachment: scroll;
  background-color: transparent;
}

becomes

a {
  background: repeat scroll 0% 0% none transparent;
  background-size: auto auto;
  background-origin: padding-box;
  background-clip: border-box;
}