Handle svgs with style elements that include curly backets

[samanpwbb]

I'm trying to use a custom template with this library and getting this error:

(node:56442) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token, expected "}" (30:89)
  28 |       focusable="false"
  29 |       style={svgStyle}
> 30 |       className={this.props.svgClassName} id="svg2" viewBox="0 0 20 20"><style>.st0{fill:#63b8f8}</style><path className="st0" d="M16 12h-1.9v-.9-.1H16c.6 0 1-.4 1-1s-.4-1-1-1h-3.5c-.3 0-.5-.2-.5-.5s.2-.5.5-.5H14c1 0 2-1 2-2V5s-3-1-3-3v-.5c0-.8-.7-1.5-1.5-1.5S10 .7 10 1.5V2H9v-.5C9 .7 8.3 0 7.5 0S6 .7 6 1.5V2c0 5-2 6-2 9v7c0 1.1.9 2 2 2s2-.9 2-2v-1h2v1c0 1.1.9 2 2 2s2-.9 2-2v-2-2h2c.6 0 1-.4 1-1s-.4-1-1-1zm-6-6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/></svg>
     |                                                                                         ^
  31 |           {text}
  32 |         </div>
  33 |       )
    at createError (/Users/samanbemelbenrud/personal_repos/game/node_modules/prettier/parser-babylon.js:1:110)
    at Object.parse (/Users/samanbemelbenrud/personal_repos/game/node_modules/prettier/parser-babylon.js:1:170100)
    at Object.parse$3 [as parse] (/Users/samanbemelbenrud/personal_repos/game/node_modules/prettier/index.js:23660:19)
    at formatWithCursor (/Users/samanbemelbenrud/personal_repos/game/node_modules/prettier/index.js:29344:27)
    at format (/Users/samanbemelbenrud/personal_repos/game/node_modules/prettier/index.js:29389:10)
    at Object.format (/Users/samanbemelbenrud/personal_repos/game/node_modules/prettier/index.js:29649:12)
    at Object.svgTemplate [as template] (/Users/samanbemelbenrud/personal_repos/game/scripts/svg-template.js:53:19)
    at toJsx.then.jsxSvg (/Users/samanbemelbenrud/personal_repos/game/node_modules/@mapbox/svg-react-transformer/lib/to-component-module.js:63:24)
    at <anonymous>
(node:56442) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:56442) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Here's my code:

const svgReactTransformerWriter = require('@mapbox/svg-react-transformer-writer');
const path = require('path');
const svgTemplate = require('./svg-template');

svgReactTransformerWriter(
  path.join(__dirname, '../svgs/**'),
  path.join(__dirname, '../src/components/svgs'),
  { template: svgTemplate }
);

The template is identical to the fancy template, except I was running into issues with the containerSTyle prop being modified by reference, so I changed the line that declares containerStyle to: const containerStyle = Object.assign({}, this.props.containerStyle || {});. I think we may want to make that change in the core lib, but also wanted to flag the above bug.

[davidtheclark]

The syntax error is caused by the <style> tag in your SVG, right? We'd need some logic to transform <style> so they use dangerouslySetInnerHTML instead of regular children, I believe.

Regarding containerStyle mutation — yeah, that's a good idea. I think we'd want to avoid Object.assign, though, so we don't require users to have a polyfill. But the same intention implemented another way.