Skip to content

fix(parser): match exact class name in selectorMatches (#8838)#11044

Open
xianjianlf2 wants to merge 1 commit into
fabricjs:masterfrom
xianjianlf2:fix/svg-selector-exact-class-match-8838
Open

fix(parser): match exact class name in selectorMatches (#8838)#11044
xianjianlf2 wants to merge 1 commit into
fabricjs:masterfrom
xianjianlf2:fix/svg-selector-exact-class-match-8838

Conversation

@xianjianlf2

Copy link
Copy Markdown

Description

Closes #8838.

When an SVG element carries multiple classes such as class="st12 st1", the .st12 style rule was dropped and only .st1 applied.

The selector matcher in src/parser/selectorMatches.ts used a negative lookahead (?![a-zA-Z\-]+) to make sure a class/id name was not merely a prefix of a longer name. That lookahead excluded letters and hyphens, but not digits or underscores, so .st1 matched inside .st12: the trailing 2 slipped past the lookahead, leaving a leftover token and causing the .st12 rule to be discarded.

The fix replaces the lookahead with (?![\w\-]), which excludes every valid CSS identifier continuation character (letters, digits, underscore and hyphen), so numeric- and underscore-suffixed class and id names are matched exactly. This matches the exact-class-name approach @asturur prescribed in the issue.

Added src/parser/selectorMatches.spec.ts verifying that .st1 no longer matches an element whose class list contains st12, while genuine matches still succeed. Existing parser specs remain green.

In Action

Before: an element with class="st12 st1" lost its .st12 styling because .st1 matched inside st12.
After: .st12 and .st1 are matched independently and both rules apply.

The selector matcher used a negative lookahead `(?![a-zA-Z\-]+)` to
ensure a class/id name was not merely a prefix of a longer name. It
excluded letters and hyphens but not digits or underscores, so `.st1`
matched inside `.st12` (the trailing `2` slipped past the lookahead),
leaving a leftover `2` and causing the `.st12` rule to be dropped.

Exclude every valid CSS identifier continuation character (`[\w\-]`)
so numeric/underscore-suffixed class and id names match correctly.

close fabricjs#8838
@codesandbox

codesandbox Bot commented Jul 16, 2026

Copy link
Copy Markdown

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

@github-actions

Copy link
Copy Markdown
Contributor

Build Stats

file / KB (diff) bundled minified
fabric 774.147 (-0.004) 293.651 (-0.004)

@asturur

asturur commented Jul 17, 2026

Copy link
Copy Markdown
Member

The PR looks good. i have to check recent changes to those regex because some were simplifications at the cost of small edge cases to avoid security issues in node. Thanks for the PR meanwhile

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.

[Bug]: svg dom parse error about className

2 participants