Stylelint: Fix false positives for functional pseudo classes in no-descending-specificity

Created on 24 Aug 2018  路  3Comments  路  Source: stylelint/stylelint

Clearly describe the bug

There are false positives for no-descending-specificity when using CSS Modules

Which rule, if any, is the bug related to?

no-descending-specificity

What CSS is needed to reproduce the bug?

:global(.buildResultsSummaryTable) span {
  color: #444;
}

:global(.buildResultsSummaryTable) span:nth-child(2) {
  color: #666;
}

What stylelint configuration is needed to reproduce the bug?

{
  "rules": {
    "no-descending-specificity": true
  }
}

Which version of stylelint are you using?

9.5.0

How are you running stylelint: CLI, PostCSS plugin, Node API?

CLI with stylelint --ignore-path .eslintignore \"src/**/*.css\"

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

CSS Modules

What did you expect to happen?

No warnings to be flagged.

What actually happened (e.g. what warnings or errors did you get)?

The following warnings were flagged:

Expected selector ":global(.buildResultsSummaryTable) span:nth-child(2)" to come before selector ":global(.buildResultsSummaryTable) span" (no-descending-specificity)
needs investigation ready to implement bug

Most helpful comment

Hey guys, specificity calc was designed for the CSS spec. I will look into adding support for CSS modules, i.e. :local and :global

All 3 comments

@Hypnosphi Thanks for the report and for using the template.

Yes, this appears to be a bug. Curiously, it's only triggered when there is both a _class selector_ within :global and a _functional_ pseudo-class at the end e.g.

This will trigger the bug.

:functional-pseudo(.class) type {}
:functional-pseudo(.class) type:functional-pseudo() {}

Whereas both these are fine:

:functional-pseudo(type) type {}
:functional-pseudo(type) type:functional-pseudo() {}
:functional-pseudo(.class) type {}
:functional-pseudo(.class) type:pseudo {}

This is likely a bug (or a limitation) in the upstream library this rule uses:

Do you want to raise an issue there too? If it can't be resolved there we can consider working around it in stylelint (or at least documenting this limitation).

Hey guys, specificity calc was designed for the CSS spec. I will look into adding support for CSS modules, i.e. :local and :global

Was this page helpful?
0 / 5 - 0 ratings