You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The @svgr/hast-util-to-babel-ast package doesn't split styles correctly, and so breaks some SVGs that are processed through it.
It doesn't account for XML entities such as " or <, which both contain a semicolon which is acceptable when styles are defined in HTML, and the semicolon should not be considered a delimiter.
To Reproduce
I've written a test case for hast-util-to-babel-ast:
Then plugin-jsx erroneously splits the style attribute by ;, which splits the style in the middle of property values as XML entities contain a semicolon too.
Expected behavior
Semicolons that are part of an XML entity should be treated as a delimiter/separator for style properties.
The best solution would probably be to use an actual CSS parser. If that's not favorable for whatever reason, then there should be a splitStyles method defined in packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts which goes character by character through the raw styles to avoid XML entities.
I'd be happy to look at this for you if you can confirm if you'd prefer to use a CSS parser, or a DIY solution?
Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard
The text was updated successfully, but these errors were encountered:
SethFalco
changed the title
@svgr/hast-util-to-babel-ast erroneously treats semicolons in XML entities are style property delimiters
@svgr/hast-util-to-babel-ast erroneously treats semicolons in XML entities as style property delimiters
May 20, 2024
SethFalco
changed the title
@svgr/hast-util-to-babel-ast erroneously treats semicolons in XML entities as style property delimiters
@svgr/hast-util-to-babel-ast erroneously treats semicolons in XML entities as style delimiters
May 20, 2024
I've written a version of the proposed splitStyles method that doesn't use a CSS parser. This should work, or at least will be better than what we have now. Happy to open a PR, but hoping to get clarity on if you'd prefer to take the CSS parser or DIY route first.
Handles both named and numbered XML entities. (i.e. " or ")
Treats the XML entity for semicolons (; and ;) the same as the semicolon character (;).
All test cases pass, including the proposed ones in the original issue.
/** * Split raw styles into separate properties. */constsplitStyles=(rawStyle: string)=>{constentries=[]letcurrentEntry=''for(constcharofrawStyle){if(char!==';'||/&(?:[a-zA-Z]+|#\d+)(?<!&semi|;)$/.test(currentEntry)){currentEntry+=charcontinue}entries.push(currentEntry)currentEntry=''}if(currentEntry.length!==0){entries.push(currentEntry)}returnentries}
馃悰 Bug Report
The
@svgr/hast-util-to-babel-ast
package doesn't split styles correctly, and so breaks some SVGs that are processed through it.It doesn't account for XML entities such as
"
or<
, which both contain a semicolon which is acceptable when styles are defined in HTML, and the semicolon should not be considered a delimiter.To Reproduce
I've written a test case for
hast-util-to-babel-ast
:packages/hast-util-to-babel-ast/src/index.test.ts
Or alternatively, a test case for
core
:packages/core/src/transform.test.ts
This currently creates the following snapshot, which is wrong but demonstrates the issue:
When SVGO serializing the
font-family
property back to a string, it uses XML entities to escape the quotes, so:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
becomes
SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
Then
plugin-jsx
erroneously splits thestyle
attribute by;
, which splits the style in the middle of property values as XML entities contain a semicolon too.Expected behavior
Semicolons that are part of an XML entity should be treated as a delimiter/separator for style properties.
The best solution would probably be to use an actual CSS parser. If that's not favorable for whatever reason, then there should be a
splitStyles
method defined inpackages/hast-util-to-babel-ast/src/stringToObjectStyle.ts
which goes character by character through the raw styles to avoid XML entities.I'd be happy to look at this for you if you can confirm if you'd prefer to use a CSS parser, or a DIY solution?
Run
npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard
The text was updated successfully, but these errors were encountered: