Build(deps-dev): Bump stylelint from 16.7.0 to 16.8.0

[dependabot]

Bumps stylelint from 16.7.0 to 16.8.0.

Release notes

Sourced from stylelint's releases.

16.8.0

• Deprecated: github formatter (#7865) (@​marcalexiei).
• Fixed: function-url-quotes false positives for SCSS variables and #/? characters (#7874) (@​vimalloc).
• Fixed: keyframe-selector-notation false positives for entry-crossing and exit-crossing (#7859) (@​romainmenke).
• Fixed: no-descending-specificity false positives for nested rules without declarations (#7850) (@​romainmenke).
• Fixed: no-duplicate-selectors end positions (#7867) (@​romainmenke).
• Fixed: no-duplicate-selectors false negatives for three or more duplicates (#7867) (@​romainmenke).
• Fixed: selector-max-compound-selectors error for @nest (#7875) (@​romainmenke).
• Fixed: selector-pseudo-class-no-unknown false positives for :active-view-transition and :active-view-transition-type() (#7868) (@​Mouvedia).
• Fixed: selector-type-*, selector-max-type and selector-class-pattern false positives for <timeline-range-name> in keyframe selectors (#7856) (@​romainmenke).
• Fixed: stylelint.utils.checkAgainstRule() regression when reportNeedlessDisables and quiet are both enabled (#7879) (@​ybiquitous).
• Fixed: configuration comments within selector and value lists being ignored (#7839) (@​romainmenke).

Changelog

Sourced from stylelint's changelog.

16.8.0

• Deprecated: github formatter (#7865) (@​marcalexiei).
• Fixed: function-url-quotes false positives for SCSS variables and #/? characters (#7874) (@​vimalloc).
• Fixed: keyframe-selector-notation false positives for entry-crossing and exit-crossing (#7859) (@​romainmenke).
• Fixed: no-descending-specificity false positives for nested rules without declarations (#7850) (@​romainmenke).
• Fixed: no-duplicate-selectors end positions (#7867) (@​romainmenke).
• Fixed: no-duplicate-selectors false negatives for three or more duplicates (#7867) (@​romainmenke).
• Fixed: selector-max-compound-selectors error for @nest (#7875) (@​romainmenke).
• Fixed: selector-pseudo-class-no-unknown false positives for :active-view-transition and :active-view-transition-type() (#7868) (@​Mouvedia).
• Fixed: selector-type-*, selector-max-type and selector-class-pattern false positives for <timeline-range-name> in keyframe selectors (#7856) (@​romainmenke).
• Fixed: stylelint.utils.checkAgainstRule() regression when reportNeedlessDisables and quiet are both enabled (#7879) (@​ybiquitous).
• Fixed: configuration comments within selector and value lists being ignored (#7839) (@​romainmenke).

Commits

• 19365ca 16.8.0
• 50478e6 Prepare 16.8.0 (#7870)
• 8e5c8a3 Fix function-url-quotes false positives for SCSS variables and #/? char...
• 2d04511 Bump husky from 9.1.2 to 9.1.3 (#7886)
• 118fe2b Bump debug from 4.3.5 to 4.3.6 (#7885)
• 1905e41 Bump rollup from 4.19.0 to 4.19.1 (#7884)
• ac73451 Document to add ecosystem test check in releasing task list (#7883)
• 8fefd14 Refactor to use severity constants (#7882)
• cfe2bcf Fix stylelint.utils.checkAgainstRule() regression when both `reportNeedless...
• 3024d75 Fix configuration comments within selector and value lists being ignored (#7839)
• Additional commits viewable in compare view

You can trigger a rebase of this PR by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

[XhmikosR]

@julien-deramond these are the new warnings. It's OK to ignore some of them, but it might be a good chance to revisit the duplicate selectors and its ignores in case we can reduce them.

[julien-deramond]

We analyzed the new warnings with @louismaximepiton. They are all false positives, as they are not duplicate selectors. They are all linked to dynamic selector names built with Sass variables, for instance .list-group-item-#{$state}.

Analysis

Let's consider the following code that raises a warning:

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

🟢 If we use in our Sass code instead the generated CSS selectors, it works, for instance:

.dropdown-menu-sm-start {
  --bs-position: start;
}
.dropdown-menu-sm-start[data-bs-popper] {
  right: auto;
  left: 0;
}
.dropdown-menu-sm-end {
  --bs-position: end;
}
.dropdown-menu-sm-end[data-bs-popper] {
  right: 0;
  left: auto;
}

🟢 If we insert back the @include, it still works:

@include media-breakpoint-up(map-get($grid-breakpoints, sm)) {
  .dropdown-menu-sm-start {
    --bs-position: start;

    &[data-bs-popper] {
      right: auto;
      left: 0;
    }
  }

  .dropdown-menu-sm-end {
    --bs-position: end;

    &[data-bs-popper] {
      right: 0;
      left: auto;
    }
  }
}

🔴 Then, the real issue can be reproduced by using a Sass variable to create a dynamic selector:

$var-test: "fodjsifdsj" !default;

.dropdown-menu#{$var-test}-start {
  --bs-position: start;

  &[data-bs-popper] {
    right: auto;
    left: 0;
  }
}

.dropdown-menu#{$var-test}-end {
  --bs-position: end;

  &[data-bs-popper] {
    right: 0;
    left: auto;
  }
}

A reduced reproduction use case:

$var-test: "x" !default;

.a#{$var-test}-a {
  &.b {
    color: #fd0;
  }
}

.a#{$var-test}-b {
  &.b {
    color: #fd0;
  }
}

We don't know what is the exact source of the issue, but an assumption would be that the parsing consider .dropdown-menu#{$var-test}-start and .dropdown-menu#{$var-test}-end the same selector (maybe because it stops at the # character or something like that), and so the selector would be the same and raise a warning.

@XhmikosR We've created an issue in stylelint repo at stylelint/stylelint#7891.
In the meantime, for this PR, we could either wait for a patch or add stylelint disable rules for each use cases.

[julien-deramond]

@XhmikosR Latest news, there's already a fix (see stylelint/stylelint#7891 (comment)). We just have to wait for the next release, and the warnings/errors will disappear without any modifications on our side.

[XhmikosR]

Thanks for the insights!

I'm gonna go ahead and close this PR and wait for the upstream fix.

[dependabot]

OK, I won't notify you again about this release, but will get in touch when a new version is available. If you'd rather skip all updates until the next major or minor version, let me know by commenting @dependabot ignore this major version or @dependabot ignore this minor version. You can also ignore all major, minor, or patch releases for a dependency by adding an ignore condition with the desired update_types to your config file.

If you change your mind, just re-open this PR and I'll resolve any conflicts on it.