Skip to content

fix: keep style attributes that aren't valid CSS instead of throwing - #674

Merged
cossssmin merged 1 commit into
masterfrom
fix/tolerate-invalid-style-attributes
Sep 24, 2026
Merged

cossssmin merged 1 commit into
masterfrom
fix/tolerate-invalid-style-attributes

Conversation

@cossssmin

Copy link
Copy Markdown
Collaborator

Closes #582

I ran the repro from the issue against current master:

  • the original Cannot read properties of undefined (reading 'indexOf') in resolveCSSVariables doesn't happen anymore, the CSS variables in that document (--mermaid-font-family) resolve fine
  • but it now fails with CssSyntaxError: Unknown word undefined, with or without resolveCSSVariables. The input has 14 style="undefined;;;undefined" attributes (generated by the Mermaid SVG rendering), and Juice parses existing style attributes strictly, so a single invalid one throws for the whole document

Change

Juice already keeps a style attribute as-is when template tags make it unparseable (#672). This extends that to any style attribute that isn't valid CSS: it's kept exactly as written, and the inlined declarations are put in front of it.

<style>p { color: red; }</style>
<p style="undefined;;;undefined">x</p>
<p style="color: red; undefined;;;undefined">x</p>

That's what email clients and browsers do with invalid inline CSS anyway: ignore the bad parts and apply the rest. The attribute's own declarations still come last, so they still win over the stylesheet, same as when Juice merges them.

Behavior change

Invalid style attributes used to throw, now they're kept. The main one people hit is encoded quotes, like Chrome's style="font-family: &quot;Segoe UI&quot;" without decodeStyleAttributes:

<div style="color: red; font-family:&quot;Open Sans&quot;, sans-serif;"></div>

(browsers decode the &quot;, so the font still applies). Two existing tests asserted the throw and were updated. The tradeoffs: for an element whose own style attribute is kept as-is, Juice can't merge/dedupe against it or derive width/height attributes from sizes written in it. That only affects attributes that were already broken.

The full repro from the issue now inlines fine, with and without resolveCSSVariables.

About removing resolveCSSVariables in favor of postcss-custom-properties, as suggested in the issue: I'd rather keep it, it works (including on that document) and can already be turned off.

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@cossssmin
cossssmin merged commit de0698e into master Sep 24, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

resolveCSSVariables: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'indexOf')

1 participant