storybookjs/storybook
Wrapping `:where` ignored when substituting pseudo-class selector with `.pseudo-*-all` class selector
Offen
#31.411 geöffnet am 17.03.2025
addon: pseudo-statesbugcsshelp wantedsev:S3
Repository-Metriken
- Stars
- (89.909 Sterne)
- PR-Merge-Metriken
- (Durchschn. Merge 7T 22h) (184 gemergte PRs in 30 T)
Beschreibung
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 .