[system] Fix CSS variables undefined when theme contains URL values with //#48499
Open
starboyvarun wants to merge 2 commits into
Open
[system] Fix CSS variables undefined when theme contains URL values with //#48499starboyvarun wants to merge 2 commits into
starboyvarun wants to merge 2 commits into
Conversation
Stylis, the CSS preprocessor used by Emotion, treats `//` as a
single-line comment. When a theme value such as a background image URL
(`https://...`) is serialized into a `:root {}` block as a CSS variable,
stylis strips everything after `//`, corrupting all subsequent CSS
variable declarations and making them undefined in the browser.
Detect string values containing `//` in `cssVarsParser` and skip
generating CSS variables for them. In development, emit a `console.error`
that names the offending theme key and points users to
`shouldSkipGeneratingVar` as the escape hatch.
Deploy previewhttps://deploy-preview-48499--material-ui.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
Add a note to the CSS theme variables section explaining that Stylis
treats `//` as a CSS comment, so theme string values containing `//`
(e.g. background image URLs) must be excluded via `shouldSkipGeneratingVar`
to avoid corrupting the `:root {}` CSS variable block.
mj12albert
requested changes
May 8, 2026
| theme, | ||
| (keys, value: string | number | object, arrayKeys) => { | ||
| if (typeof value === 'string' || typeof value === 'number') { | ||
| if (typeof value === 'string' && value.includes('//')) { |
Member
There was a problem hiding this comment.
shouldSkipGeneratingVar doesn't seem to silence this new dev warning which contradicts the advice in the warning
zannager
added
the
scope: system
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #48267.
When a Material UI theme includes string values with
//— most commonly background image URLs likehttps://picsum.photos/200/300— all CSS custom properties (--mui-*) becomeundefinedin the browser.Root cause: Stylis (the CSS preprocessor used by Emotion) treats
//as a single-line comment. WhencssVarsParserserializes such a value into a:root {}block as a CSS variable declaration, Stylis strips everything from//to the end of the line, corrupting all subsequent--mui-*declarations in the block.Fix: In
cssVarsParser, detect string values containing//before generating the CSS variable. Skip the variable and, in development, emit aconsole.errorthat identifies the offending theme key and points users toshouldSkipGeneratingVaras the escape hatch.Changes:
cssVarsParser.ts– skip CSS var generation for string values containing//; emit a dev-modeconsole.errorcssVarsParser.test.ts– two new tests: one verifies the variable is skipped and the dev error is fired; the other verifies only the URL value is dropped while adjacent variables remain intactTest plan
pnpm test:unit -- --project "*:@mui/system"— all 549 tests passtsc --noEmitpasses with no errors