Skip to content

Comments

Fix SCSSParsingError on unicode characters in SCSS selectors#14071

Merged
cderv merged 7 commits intomainfrom
fix/issue-14065
Feb 20, 2026
Merged

Fix SCSSParsingError on unicode characters in SCSS selectors#14071
cderv merged 7 commits intomainfrom
fix/issue-14065

Conversation

@cderv
Copy link
Collaborator

@cderv cderv commented Feb 20, 2026

When custom SCSS contains non-ASCII characters in selectors (e.g., #présentation), rendering emits a SCSSParsingError: Can't handle character warning and CSS variable exports are lost.

Root Cause

scss-parser@1.0.6's tokenizer uses an ASCII-only regex (/[a-z_]/i) for identifier characters, rejecting valid non-ASCII CSS identifier characters like accented letters.

Fix

Encode non-ASCII characters as ASCII codepoint placeholders (e.g., é_ue9_) before passing SCSS to the parser. The parser is only used for variable analysis (color extraction for CSS custom property export), not CSS generation — dart-sass compiles the original unmodified SCSS. This follows the existing pattern of 6 other scss-parser workarounds in parse.ts.

Fixes #14065

@posit-snyk-bot
Copy link
Collaborator

posit-snyk-bot commented Feb 20, 2026

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@cscheid
Copy link
Collaborator

cscheid commented Feb 20, 2026

It's not clear to me that these selectors are actually valid, but it's good to be more permissive here.

@cderv
Copy link
Collaborator Author

cderv commented Feb 20, 2026

Yeah I wasn't sure but my search and lead to believe they were, even if this seems really edge case.

cderv and others added 7 commits February 20, 2026 18:49
scss-parser@1.0.6 tokenizer uses ASCII-only regex for identifiers,
rejecting valid non-ASCII CSS characters (e.g., #présentation).
Encode non-ASCII characters as ASCII codepoint placeholders before
parsing since the parser is only used for variable analysis, not
CSS generation.

Fixes #14065

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The SCSS analyzer encodes non-ASCII characters as _u<hex>_ for parsing,
but cssVarsBlock emitted these encoded names into the CSS vars block.
Dart Sass then failed because the encoded names don't match the original
SCSS variable names. Decode before emitting so names round-trip correctly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Assert that the CSS vars export block contains the decoded
property name (--quarto-scss-export-présentation-bg), not just
that the SCSS compiled successfully.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The wildcard regex pr.*sentation matched both decoded and encoded
forms, making the test pass regardless of whether decodeScssName
worked. Use the literal character présentation-bg instead.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@cderv cderv merged commit 7027d8b into main Feb 20, 2026
51 checks passed
@cderv cderv deleted the fix/issue-14065 branch February 20, 2026 18:39
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.

Error adding css vars block SCSSParsingError

3 participants