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

[vegawong]

Clearly describe the bug

There are some error tips in my selectors was not expected..
It flagged an error about rule no-descending-specificity when i use css-module presudo function like :global() with a selector.
Thought the selectors had not any relations ,it always flagged an error.
If i rewrite the same selectors without :global, then it works.

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

no-descending-specificity

What CSS is needed to reproduce the bug?

.componentName :global(.ant-modal) :global(.ant-btn) {
    color: #fff;
}
.componentName :global(.ant-menu) {
    color: #fff;
}

What stylelint configuration is needed to reproduce the bug?

e.g.

module.exports = {
    extends: ['stylelint-config-standard', 'stylelint-config-css-modules', 'stylelint-config-prettier'],
    rules: {
        'at-rule-no-unknown': [true, { ignoreAtRules: ['function', 'return'] }]
    }
}

Which version of stylelint are you using?

9.10.1

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

CLI with stylelint "**/*.css" --config .stylelintrc.js

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

Yes, it's related to css module pre-sudo function like :global()

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:

test.css
4:1  ✖  Expected selector ".componentName :global(.ant-menu)" to come before selector ".componentName :global(.ant-modal) :global(.ant-btn)"   no-descending-specificity

[jeddy3]

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

It looks like the rule struggles with functional pseudo-classes.

I can reproduce this with:

:fsc1() :fsc2() {}
:fsc3() {}

As the issue has been labelled "help wanted", please consider contributing a fix.

[vegawong]

@jeddy3 , Thanks for reply! I am tring to understand how to calculate the specificity by stylelint. I found that the specificity calculate result was not equal to the vscode tips.

[vegawong]

Hey guys! Maybe i had found the problem.

stylelint/lib/rules/no-descending-specificity/index.js

Line 75 in b6f3057

const referenceSelectorNode = lastCompoundSelectorWithoutPseudoClasses(

In this line of code, :global is treated as a pseudo selector so that all the last nodes that use :global are treated as the same comparisonContext. Right?
:global and :local are predefined keywords in css-module. I suggest adding these words to keywordSets.pseudoElements to compare them as separate items in comparisonContext.

[yoyo837]

@import '../../variable.less';

@imgSize: 32px;
@gutter: (@menu-collapsed-width - @imgSize) / 2;

.sider,
.logo,
.logo h1 {
  transition: all 0.2s;
}

.sider {
  padding-top: @layout-header-height;
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  :global(.ant-layout-sider-children) {
    padding-right: 20px;
    width: calc(~'100% + 20px');
    height: calc(~'100vh - @{layout-header-height}');
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none; // overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.logo {
  position: fixed;
  top: 0;
  left: 0;
  height: @layout-header-height;
  line-height: @layout-header-height;
  padding-left: @gutter;
  background: @header-background;
  width: 200px;
  color: @header-color;
  overflow: hidden;
  z-index: 1;
  img,
  h1 {
    display: inline-block;
    vertical-align: middle;
  }
  img {
    height: @imgSize;
  }
  h1 {
    color: #fff;
    font-size: 20px;
    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 600;
    margin: 0 0 0 @gutter;
  }
}

.siderCollapsed {
  .logo {
    padding-left: 24px;
    padding-right: 24px;
    width: auto;
    h1 {
      display: none;
    }
  }
 // here
 // `Expected selector ".siderCollapsed :global(.ant-menu-item-group-title)" to come before selector ".sider :global(.ant-layout-sider-children)::-webkit-scrollbar" (no-descending-specificity)stylelint(no-descending-specificity)`
  :global(.ant-menu-item-group-title) {
    text-align: center;
  }
}

[hazxy]

same problem

[ybiquitous]

The no-descending-specificity rule's implementation has now changed and improved by using heavily the @csstools/selector-specificity package. See #6131 and the following code for details.

stylelint/lib/rules/no-descending-specificity/index.js

Line 4 in 592b149

const { selectorSpecificity: calculate, compare } = require('@csstools/selector-specificity');

The false positive reported by the issue appears still on the demo, but I doubt if it's a false positive. 🤔
Because it seems @csstools/selector-specificity properly calculates specificities as below:

const parser = require('postcss-selector-parser');
const { selectorSpecificity } = require('@csstools/selector-specificity');

console.log(selectorSpecificity(parser().astSync('.componentName :global(.ant-modal) :global(.ant-btn)')));
//=> { a: 0, b: 3, c: 0 }

console.log(selectorSpecificity(parser().astSync('.componentName :global(.ant-menu)')));
//=> { a: 0, b: 2, c: 0 }

See also the @csstools/selector-specificity implementation.

What do you think?

[jeddy3]

The false positive reported by the issue appears still on the demo, but I doubt if it's a false positive. 🤔

I agree. Let's close.

[richex-cn]

Same error for me, How should fix it ?

[ybiquitous]

@richex-cn Could you reproduce an error on the demo and paste the demo URL here, please?

[richex-cn]

@ybiquitous Sure, It's demo.

[ybiquitous]

@richex-cn Thanks. I'll look into it. 👍🏼