[core-docs] Remove the globalSelector stylis middleware - #49029
Conversation
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
Janpot
added
the
scope: docs-infra
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
The middleware compensated for emotion gluing the generated class onto nested selector keys that start with `:where(`/`:is(` (emotion-js/emotion#2836) by stripping any class it found in front of those pseudo-classes. That regex cannot tell the buggy glued prefix from an intentional one, so any component style using `&:where(...)`/`&:is(...)` loses its scoping in the docs -- most recently turning a TimelineItem `::before` rule into one that matched nearly every element on mui.com. It also only ran in the docs' emotion cache, so docs rendering silently diverged from every other consumer of the same components. The workaround end users already rely on covers the docs too: `theme.applyStyles` prefixes the selector with `*`, which emotion passes through untouched. All bare `':where(...) &'` keys -- the six typography ones plus the template-literal form in `MarkdownElement` and the ApiPage tables/lists -- now use that same `*:where()` shape, and the Paper `':is(a&), :is(button&)'` keys become `'&:is(a, button)'`: the same matched set and the same specificity the middleware used to produce, without depending on it. Verified by building the docs before and after and pixel-comparing a sample of pages (home, markdown docs, component pages, API pages, and a template, in light and dark): identical except the rotating ad slot. `docs/src/modules/utils/globalSelector.ts` was an unimported copy of the same middleware; deleted with it.
The one bare `:where()` key the sweep missed -- it lives under docs/data, which the glob didn't cover. Without the middleware it compiled to a self-glued selector that could never match, leaving the dark-mode switch track on the Default theme viewer at its light-mode grey.
4f92815 to
ace0644
Compare
|
1. DefaultTheme.js — Fixed and pushed. It sat in 2. Paper 3. mui-x — Done in mui/mui-x#23419, same |
2 participants
The docs' emotion cache ran a
globalSelectorstylis middleware that strips any class in front of:where(/:is(— a workaround for emotion-js/emotion#2836. It can't tell the buggy glued prefix from an intentional one, so any component style using&:where(…)/&:is(…)silently loses its scoping on mui.com (see #49028), and docs rendering diverged from every other consumer of the same components.theme.applyStylesalready dodges the emotion bug by prefixing with*. This converts all bare':where(…) &'keys to that form, rewrites Paper's':is(a&), :is(button&)'as'&:is(a, button)', and deletes the middleware plus an unimported copy. Verified by prod-building the docs before and after and pixel-comparing a sample of pages in light and dark: identical except the rotating ad slot. mui-x and base-ui docs don't use the bare form in their own sources (mui-x'sDemoPropsForm/PlaygroundCarddo and need the same conversion before the next core-docs bump).Two visible changes on mui.com, both restorations rather than regressions: component styles like ListItemText's
:where(& .MuiListItemText-primary)get their scoping back, and the dark-mode hover shadow on outlined Paper links comes back to life — on master the middleware-era:is(a&)insideapplyDarkStylesexpanded to an invalid:is()argument that matched nothing.