storybookjs/storybook

Wrapping `:where` ignored when substituting pseudo-class selector with `.pseudo-*-all` class selector

開放

#31,411 建立於 2025年3月17日

 (0 則留言) (0 個反應) (0 位負責人)TypeScript (10,058 個分叉)batch import
addon: pseudo-statesbugcsshelp wantedsev:S3

倉庫指標

星標
 (89,909 顆星)
PR 合併指標
 (平均合併 7天 22小時) (30 天內合併 184 個 PR)

描述

Using storybook 8.3.5 / storybook-addon-pseudo-states 4.0.2 (also an issue in 3.1.1).

Problem

Our typography system has this CSS (only relevant parts shown):

.textLink:where(:focus-visible) { /* specificity 0-1-0 -- tie */
  outline: 1px solid var(--my-focus-ring-color);
  text-decoration: none;
}

.textLink {                      /* specificity 0-1-0 -- tie -- but winner due to source order */
  text-decoration: underline;
}

The add-on turns it into:

.textLink:where(:focus-visible),               /* specificity 0-1-0 */
.textLink:where(.pseudo-focus-visible),        /* specificity 0-1-0 */
.pseudo-focus-visible-all .textLink:where(*) { /* BUG 🐞 specificity 0-2-0 -- winner due to higher specificity */
  outline: 1px solid var(--my-focus-ring-color);
  text-decoration: none;
}

.textLink {
  text-decoration: underline;                 /* specificity 0-1-0 */
}

Which changes the styles, but shouldn't.

Rather, it should output:

.textLink:where(:focus-visible),              /* specificity 0-1-0 -- tie */
.textLink:where(.pseudo-focus-visible),       /* specificity 0-1-0 -- tie */
:where(.pseudo-focus-visible-all) .textLink { /* FIX 🛠️ specificity 0-1-0 -- tie */
  outline: 1px solid var(--my-focus-ring-color);
  text-decoration: none;
}

.textLink {
  text-decoration: underline;                 /* specificity 0-1-0 -- tie -- but winner due to source order */
}

Which doesn't change the resultant style.

Possibly relates to storybookjs/storybook-addon-pseudo-states#125 .

貢獻者指南