Search code examples
cssdisablestylelint

Stylelint what is syntax in css to ignore rule with no option but keep using rule with secondary options

I'm coding a plugin for an open source project, which has a set .stylelintrc, with the rule: "selector-type-no-unknown": true,

But I am styling with ion, e.g. ion-grid {} So thinking to add to my css, e.g.:

/* stylelint-disable selector-type-no-unknown -- ion styles not recognised */
ion-col.total {
    font-weight: bolder;
}
/* stylelint-enable */

But wouldn't it be better to instead of disabling the rule completely, add/apply a secondary option like ignoreTypes: ["/ion/"]? In which case how do I do it within the css?

Or am I missing something obvious here?!

Solution

  • In which case how do I do it within the css?

    It's not possible to configure rules from within the CSS. Rules are configured within the stylelint configuration object, e.g. .stylelintrc:

    {
  "rules": {
    "selector-type-no-unknown": [ true, { ignoreTypes: ["/^ion-/"] } ]
  }
}

    But wouldn't it be better to instead of disabling the rule completely, add/apply a secondary option like ignoreTypes: ["/ion/"]?

    If ion- custom type selectors are a common occurrence in the codebase, then yes it is better to use a secondary option. Otherwise, using the disable commands is more appropriate.