Search code examples
javascriptstyled-componentsstylelint

Stylelint not warning about !important

I have a project that make use of styled-components and I just have installed Stylelint following the official guide[1].

My .stylelintrc.json already have declaration-no-important set to true but seems have no effect, because I have one component that make use of !important (see bellow)

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": ["stylelint-config-recommended", "stylelint-config-styled-components"],
  "rules": {
      "declaration-no-important": true
  }
}

$ ag important
lib/components/molecules/Checkbox/Checkbox.styles.ts
24:      border-color: #7e77a1 !important;

What I need to do to Stylelint warn me about the use of !important?

1 - https://styled-components.com/docs/tooling#stylelint

Solution

  • Could you try this instead?

    'declaration-no-important': [true, { 'severity': 'warning' }]