Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Solid compiler fails to handle SVGs with style tags, i.e. {} present #100

Closed
jceb opened this issue Oct 15, 2021 · 0 comments · Fixed by #101
Closed

Solid compiler fails to handle SVGs with style tags, i.e. {} present #100

jceb opened this issue Oct 15, 2021 · 0 comments · Fixed by #101

Comments

@jceb
Copy link
Contributor

jceb commented Oct 15, 2021

Since change #89 I get the following error message for duotone FontAwesome icons (integration see here: #12 (comment)). Non-duotone icons work fine:

[plugin:solid] /app/packages/ui/~icons/fap-duotone/truck-loading.tsx: Unexpected token, expected "}" (1:192)

> 1 | export default (props = {}) => <svg height="1.2em" width="1.2em" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 512"{...props}><defs><style>.fa-secondary{opacity:.4}</style></defs><path d="M247.8 123.8a16 16 0 0 0-19.6-11.3L151 133.3l24.8 92.7-61.8 16.5-24.8-92.7-77.3 20.7A16 16 0 0 0 .6 190.1l49.6 185.5a16 16 0 0 0 19.6 11.3l216.4-58a16 16 0 0 0 11.3-19.6zM544 320a96 96 0 1 0 96 96 96 96 0 0 0-96-96z" class="fa-secondary" fill="currentColor"/><path d="M384 0a32 32 0 0 0-32 32v323.6L5.9 450a8 8 0 0 0-5.6 9.8l12.6 46.3a8 8 0 0 0 9.8 5.6l393.7-107.4c0 .33 0 .66.05 1C421.91 339.7 477 288 544 288a127.71 127.71 0 0 1 96 43.44V0zM175.8 226L151 133.3l-61.8 16.5 24.8 92.7z" class="fa-primary" fill="currentColor"/></svg>
    |       
~icons/fap-duotone/truck-loading.tsx:1:192
    at Object._raise (/app/node_modules/@babel/parser/lib/index.js:510:17)
    at Object.raiseWithData (/app/node_modules/@babel/parser/lib/index.js:503:17)
    at Object.raise (/app/node_modules/@babel/parser/lib/index.js:464:17)
    at Object.unexpected (/app/node_modules/@babel/parser/lib/index.js:3368:16)
    at Object.expect (/app/node_modules/@babel/parser/lib/index.js:3342:28)
    at Object.jsxParseExpressionContainer (/app/node_modules/@babel/parser/lib/index.js:7114:10)
    at Object.jsxParseElementAt (/app/node_modules/@babel/parser/lib/index.js:7205:36)
    at Object.jsxParseElementAt (/app/node_modules/@babel/parser/lib/index.js:7190:32)
    at Object.jsxParseElementAt (/app/node_modules/@babel/parser/lib/index.js:7190:32)
    at Object.jsxParseElement (/app/node_modules/@babel/parser/lib/index.js:7248:17                                                                                                                                                                                           ^

This, i.e. the content of the <style> tag, breaks it: secondary{opacity:.4} as solid tries to interpret it.

Apparently the right solution (facebook/react#1545) is to escape { as {'{'} (sveltejs/svelte#1318).

Adding svg.replace(/([{}])/ig, "{'$1'}") before the props injecting works for me but it's a blunt method that might not work in all cases. @jfgodoy @dephiros what do you think?

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 a pull request may close this issue.

1 participant