False positive for non standard selectors in no-duplicate-selectors

[cookch10]

When using stylelint v7.6.0 as follows:

package.json (simplified):

{
  "scripts": {
    "lint:styles": "stylelint --syntax scss \"src/**/*.scss\""
  }
}

My .stylelintrc config (uses stylelint-config-standard v11.0.0):

{
  "extends": "stylelint-config-standard",
  "rules": {
    "function-url-quotes": "none",
    "selector-pseudo-element-colon-notation": "single"
  }
}

given the following Sass (scss file): Sassmeister gist

.widget-container {
  $variation-without-image: #{"&[data-variation^=without_image]"};
  $has-buttons: #{"&[data-has-buttons]"};

  #{$variation-without-image} {
    & {
      #{$has-buttons} {
        .grid.widget__grid {
          border: 1px solid red;
        }
      }
    }

    .grid.widget__grid {
      border: 1px solid orange;
    }
  }
}

npm run lint:styles

The following results in an error:

:5  ×  Unexpected duplicate selector ".widget-container #{$variation-without-image}"   no-duplicate-selectors

There is no duplicate selector here. If I change the Sass to the following (which yields the same output): given the following Sass (scss file), there is no error observed: Sassmeister gist

.widget-container {
  $variation-without-image: #{"&[data-variation^=without_image]"};
  $has-buttons: #{"&[data-has-buttons]"};

  #{$variation-without-image} {
    #{"#{$has-buttons}"} {
      .grid.widget__grid {
        border: 1px solid red;
      }
    }

    .grid.widget__grid {
      border: 1px solid orange;
    }
  }
}

[jeddy3]

:5 × Unexpected duplicate selector ".widget-container #{$variation-without-image}" no-duplicate-selectors

I think we should ignore any resolved non-standard selectors in this rule i.e. those with interpolation.

If there are no objections to this, I'll point @cookch10 in the direction of how to do this.

[cookch10]

@jeddy3 , what are your thoughts on this one? Is this a valid bug?

[jeddy3]

Whoops, I didn't notice those thumbs up.

@cookch10 Yes, this is a bug. Non-standard constructs should be ignored. Would you like to contribute a fix? It will involve checking that each resolved selector is of standard syntax. FYI, tests are run as so.

[cookch10]

@jeddy3, I would be interested in contributing a fix for this. I'll need a little time to get familiar with the project, so no promises on it being a quick turnaround :)

[jeddy3]

I would be interested in contributing a fix for this.

Awesome! Take your time, there's no rush on these things :)

[hudochenkov]

This issue is similar to #2198. The rule works as expected. Explanation why in #2198 (comment).

TL;DR: A rule with a parent selector & has the same selector as its ancestor. That is why the rule shows a warning.

.widget-container {
  $variation-without-image: #{"&[data-variation^=without_image]"};

  #{$variation-without-image} { // ← .widget-container #{$variation-without-image}
    & { // ← .widget-container #{$variation-without-image}
    }
  }
}