ignore -webkit-box-shadow and -moz-box-shadow while using stylelint in angular

Question

How can I remove stylelint rule for CSS properties like -webkit-box-shadow and -moz-box-shadow? Because it is overwriting to box-shadow when I run --fix command.

Below is my .stylelintrc.json file rule list:

{
  "extends": "stylelint-config-recommended-scss",
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true,
    "at-rule-no-unknown": null,
    "no-eol-whitespace": null,
    "indentation": 2,
    "number-leading-zero": null,
    "at-rule-no-vendor-prefix": true,
    "media-feature-name-no-vendor-prefix": true,
    "property-no-vendor-prefix": true,
    "selector-no-vendor-prefix": true,
    "value-no-vendor-prefix": true,
    "string-quotes": "single",
    "at-rule-name-case": null,
    "no-invalid-position-at-import-rule": null,
    "scss/at-import-partial-extension": null,
    "no-empty-source": null,
    "no-descending-specificity": null,
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": ["ng-deep", "input-placeholder"]
      }
    ]
  }
}

Any option to add a rule for particular CSS property? Any help will be appreciated.

Answer 1

You can use the ignoreProperties secondary option of the property-no-vendor-prefix rule to specify which properties you don't want to unprefix.

For example, to ignore box-shadow:

{
  "rules": {
    "property-no-vendor-prefix": [true, { "ignoreProperties": ["box-shadow"] }]
  }
}