SyntaxError: Unexpected token, expected } for inline CSS block

[fwielstra]

I have a logo generated by Adobe Illustrator's SVG export plugin (supplied by our designers). I had transformed it to a React component by hand first, until I found this package. It doesn't seem to handle a style block though; I think the parser tries to interpret it as a react template construction.

Very minimal example, probably not valid SVG but it reproduces the parse error:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1">
    <style type="text/css">
      .st0{fill:#34107D;}
    </style>
</svg>

Error output:

$ svgr test.svg

(node:10071) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): SyntaxError: Unexpected token, expected } (5:14)
  3 | const Test = (props) => <svg id="Layer_1" {...props}>
  4 |   <style>
> 5 |     .st0{fill:#34107d}
    |              ^
  6 |   </style>
  7 | </svg>
  8 |
(node:10071) [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.

[gregberge]

@fwielstra ah style is not supported, we could easily fix it by adding a h2x transform. Feel free to submit a PR!

[fwielstra]

Hmm, looking into this a bit further, it might be better to disallow styles completely; react doesn't do CSS isolation (yet?), so two svg's with a style tag can overwrite each other's styles if they match in name (which for Adobe Illustrator's exporter they do apparently).

[gregberge]

@fwielstra yes probably better to remove them completely.

[gregberge]

It can be easily done by adding a h2x plugin, similar to removeComments, difference will be that we remove a whole tag "style".

[gregberge]

Fixed in v0.5.0