fix(SVGParser): Don't crash on nested CSS at-rules

[silverwind]

Description

This will ignore all CSS rules that contain unbalanced brackets after splitting on }.

• circle { fill: black; } splits to circle { fill: black; which has one {, so it's okay.
• @media (prefers-color-scheme: dark) { circle { fill: white; } } splits to @media (prefers-color-scheme: dark) { circle { fill: white; which has two { and starts with @ so is ignored.

As mentioned in #9679 I think using a AST parser would be a much better option than this current crude parsing, for the future.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
Fixes: #9679

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[silverwind]

I also verified this fix in the actual use case, and it did generate the black circle as expected.

[silverwind]

I added a condition so it looks for the @ to only ignore at-rules. There is also nesting syntax in CSS which would still break the parser. If you prefer to also ignore this nesting syntax, I can remove the @ condition again.

[asturur]

i need to fix prettier or you can do it.
npm run prettier:write

[silverwind]

Ran it.

[silverwind]

I added a condition so it looks for the @ to only ignore at-rules. There is also nesting syntax in CSS which would still break the parser. If you prefer to also ignore this nesting syntax, I can remove the @ condition again.

What do you recommend about this one? Should we ignore non-at-rule nesting as well? I don't really understand the purpose of the parser and whether it's better to crash or ignore.

[asturur]

The parser has been written in 2010-2012 and supported ie7+ initially through a canvas polyfill.
It has been kept alive since then.
The scope of SVG parser in fabricJS is to being able to import SVGs as shapes rather than images. That is its scope.
We declare we support svg specs up version 1.2, so if something is above that version we can support it optionally when is easy.
I do not know which is the meaning of SVG versions, so if let's say SVG 1.2 supports style tag in 2012 then it means that it will support every new css syntax in 2024 but still being called SVG 1.2

In general all that can be fixed will be fixed also depending on the popularity of the feature.
How many softwares output svgs with nested css syntax?
Most of them just spit out a mess of attributes or at best single unique named classes.