search

coma / svg-reactify

Transform SVG files into React elements
MIT License
41 stars 13 forks source link

Fails on CDATA #9

Open oskbor opened 7 years ago

oskbor commented 7 years ago

I have a relatively complex svg (with animations) that currently breaks this otherwise awesome plugin. This is the content of the file.

<?xml version="1.0" encoding="utf-8"?>
<svg focusable="false" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 234.7 235.6" enable-background="new 0 0 234.7 235.6" xml:space="preserve">
   <style>
    /* <![CDATA[ */
@-webkit-keyframes spinner-fade {0% {opacity: 1 } 80% {opacity: 0 } 100% {opacity: 0 } }
@keyframes spinner-fade {0% {opacity: 1 } 80% {opacity: 0 } 100% {opacity: 0 } }

g.spinner path {opacity: 0; -webkit-animation: spinner-fade 0.75s linear infinite; animation: spinner-fade 0.75s linear infinite;}
g.spinner path:nth-of-type(1) {-webkit-animation-delay: -0.25s; animation-delay: -0.25s; }
g.spinner path:nth-of-type(2) {-webkit-animation-delay: -0.1875s; animation-delay: -0.1875s; }
g.spinner path:nth-of-type(3) {-webkit-animation-delay: -0.125s; animation-delay: -0.125s; }
g.spinner path:nth-of-type(4) {-webkit-animation-delay: -0.0625s; animation-delay: -0.0625s; }
g.spinner path:nth-of-type(5) {-webkit-animation-delay: 0s; animation-delay: 0s; }
g.spinner path:nth-of-type(6) {-webkit-animation-delay: 0.0625s; animation-delay: 0.0625s; }
g.spinner path:nth-of-type(7) {-webkit-animation-delay: 0.125s; animation-delay: 0.125s; }
g.spinner path:nth-of-type(8) {-webkit-animation-delay: 0.1875s; animation-delay: 0.1875s; }
g.spinner path:nth-of-type(9) {-webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
g.spinner path:nth-of-type(10) {-webkit-animation-delay: 0.3125s; animation-delay: 0.3125s; }
g.spinner path:nth-of-type(11) {-webkit-animation-delay: -0.375s; animation-delay: -0.375s; }
g.spinner path:nth-of-type(12) {-webkit-animation-delay: -0.3125s; animation-delay: -0.3125s; }
  /* ]]> */
   </style>
   <g class="spinner">
    <path fill="white" d="M128.3,10.7c0,0-0.3-10.7-11-10.7s-11,10.7-11,10.7l0,0v0v42.7v0l0,0c0,0,0.3,10.7,11,10.7s11-10.7,11-10.7 l0,0v0V10.7L128.3,10.7L128.3,10.7z" />
    <path fill="white" d="M140.3,56.5c0,0-5.6,9.2,3.7,14.6c9.2,5.3,14.3-3.9,14.3-3.9l0,0v0l21.4-37l0,0l0,0c0,0,5.3-9.2-3.9-14.6 s-14.5,3.9-14.6,3.9l0,0l0.2,0L140.3,56.5L140.3,56.5L140.3,56.5z" />
    <path fill="white" d="M167.4,76.3c0,0-9.2,5.1-3.9,14.3c5.3,9.2,14.6,3.7,14.6,3.7l0,0h0L215,73.1l0,0.1l0,0c0,0,9.2-5.3,3.9-14.5 s-14.6-3.9-14.6-3.9l0,0l0,0.1L167.4,76.3L167.4,76.3L167.4,76.3z" />
    <path fill="white" d="M224,128.3c0,0,10.7-0.3,10.7-11s-10.7-11-10.7-11l0,0h0h-42.7h0l0,0c0,0-10.7,0.3-10.7,11s10.7,11,10.7,11 l0,0h0H224L224,128.3L224,128.3z" />
    <path fill="white" d="M203.8,180.3c0,0,9.2,5.6,14.6-3.6c5.4-9.2-3.8-14.4-3.8-14.4l0,0h0l-36.8-21.7l0,0l0,0 c0,0-9.2-5.4-14.6,3.8c-5.4,9.2,3.8,14.6,3.8,14.6l0,0l0-0.2L203.8,180.3L203.8,180.3L203.8,180.3z" />
    <path fill="white" d="M160.3,215.5c0,0,5.4,9.3,14.7,4.1c9.3-5.2,4.3-14.5,4.3-14.5l0,0v0l-21.1-37.2l-0.1,0l0,0 c0,0-5.3-9.3-14.6-4.1c-9.3,5.2-4.1,14.5-4.1,14.5l0,0l0,0L160.3,215.5L160.3,215.5L160.3,215.5z"/>
    <path fill="white" d="M128.3,181.3c0,0-0.3-10.7-11-10.7s-11,10.7-11,10.7l0,0v0V224v0l0,0c0,0,0.3,10.7,11,10.7s11-10.7,11-10.7 l0,0v0V181.3L128.3,181.3L128.3,181.3z"/>
    <path fill="white" d="M55.3,204.5c0,0-5.6,9.2,3.7,14.6c9.2,5.3,14.3-3.9,14.3-3.9l0,0v0l21.3-37l0,0l0,0c0,0,5.3-9.2-3.9-14.6 s-14.6,3.9-14.6,3.9l0,0l0.2,0L55.3,204.5L55.3,204.5L55.3,204.5z"/>
    <path fill="white" d="M19.6,161.3c0,0-9.2,5.6-3.9,14.8s14.6,4.2,14.6,4.2l0,0h0l36.9-21.5l0-0.1l0,0c0,0,9.2-5.4,3.9-14.6 c-5.3-9.2-14.6-3.9-14.6-3.9l0,0l0-0.1L19.6,161.3L19.6,161.3L19.6,161.3z"/>
    <path fill="white" d="M53.3,128.3c0,0,10.7-0.3,10.7-11s-10.7-11-10.7-11l0,0h0H10.7h0l0,0c0,0-10.7,0.3-10.7,11s10.7,11,10.7,11 l0,0h0H53.3L53.3,128.3L53.3,128.3z"/>
    <path fill="white" d="M56.8,94.3c0,0,9.2,5.1,14.6-4.1c5.4-9.2-3.8-14.9-3.8-14.9l0,0h0L30.8,53.8l0,0.1l0,0c0,0-9.2-5.4-14.6,3.8 S20,72.4,20,72.4l0,0l0,0.2L56.8,94.3L56.8,94.3L56.8,94.3z"/>
    <path fill="white" d="M76.3,66.8c0,0,5.4,9.3,14.7,4.1s4.3-14.5,4.3-14.5l0,0v0l-21-37.2l0,0l0,0c0,0-5.3-9.3-14.5-4.1 s-4.1,14.5-4.1,14.5l0,0l-0.2,0L76.3,66.8L76.3,66.8L76.3,66.8z"/>
  </g>
</svg>

Gives the following output:

SyntaxError: unknown: Unexpected token, expected } (1:118)
> 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.7 235.6"><style>@-webkit-keyframes spinner-fade{0%{opacity:1}80%,to{opacity:0}}@keyframes spinner-fade{0%{opacity:1}80%,to{opacity:0}}g.spinner path{opacity:0;-webkit-animation:spinner-fade .75s linear infinite;animation:spinner-fade .75s linear infinite}g.spinner path:nth-of-type(1){-webkit-animation-delay:-.25s;animation-delay:-.25s}g.spinner path:nth-of-type(2){-webkit-animation-delay:-.1875s;animation-delay:-.1875s}g.spinner path:nth-of-type(3){-webkit-animation-delay:-.125s;animation-delay:-.125s}g.spinner path:nth-of-type(4){-webkit-animation-delay:-.0625s;animation-delay:-.0625s}g.spinner path:nth-of-type(5){-webkit-animation-delay:0s;animation-delay:0s}g.spinner path:nth-of-type(6){-webkit-animation-delay:.0625s;animation-delay:.0625s}g.spinner path:nth-of-type(7){-webkit-animation-delay:.125s;animation-delay:.125s}g.spinner path:nth-of-type(8){-webkit-animation-delay:.1875s;animation-delay:.1875s}g.spinner path:nth-of-type(9){-webkit-animation-delay:.25s;animation-delay:.25s}g.spinner path:nth-of-type(10){-webkit-animation-delay:.3125s;animation-delay:.3125s}g.spinner path:nth-of-type(11){-webkit-animation-delay:-.375s;animation-delay:-.375s}g.spinner path:nth-of-type(12){-webkit-animation-delay:-.3125s;animation-delay:-.3125s}</style><g className="spinner" fill="#fff"><path d="M128.3 10.7S128 0 117.3 0s-11 10.7-11 10.7v42.7s.3 10.7 11 10.7 11-10.7 11-10.7V10.7zM140.3 56.5s-5.6 9.2 3.7 14.6c9.2 5.3 14.3-3.9 14.3-3.9l21.4-37s5.3-9.2-3.9-14.6-14.5 3.9-14.6 3.9h.2l-21.1 37zM167.4 76.3s-9.2 5.1-3.9 14.3c5.3 9.2 14.6 3.7 14.6 3.7L215 73.1v.1s9.2-5.3 3.9-14.5-14.6-3.9-14.6-3.9v.1l-36.9 21.4zM224 128.3s10.7-.3 10.7-11-10.7-11-10.7-11h-42.7s-10.7.3-10.7 11 10.7 11 10.7 11H224zM203.8 180.3s9.2 5.6 14.6-3.6-3.8-14.4-3.8-14.4l-36.8-21.7s-9.2-5.4-14.6 3.8S167 159 167 159v-.2l36.8 21.5zM160.3 215.5s5.4 9.3 14.7 4.1c9.3-5.2 4.3-14.5 4.3-14.5l-21.1-37.2h-.1s-5.3-9.3-14.6-4.1c-9.3 5.2-4.1 14.5-4.1 14.5l20.9 37.2zM128.3 181.3s-.3-10.7-11-10.7-11 10.7-11 10.7V224s.3 10.7 11 10.7 11-10.7 11-10.7v-42.7zM55.3 204.5s-5.6 9.2 3.7 14.6c9.2 5.3 14.3-3.9 14.3-3.9l21.3-37s5.3-9.2-3.9-14.6-14.6 3.9-14.6 3.9h.2l-21 37zM19.6 161.3s-9.2 5.6-3.9 14.8 14.6 4.2 14.6 4.2l36.9-21.5v-.1s9.2-5.4 3.9-14.6c-5.3-9.2-14.6-3.9-14.6-3.9v-.1l-36.9 21.2zM53.3 128.3s10.7-.3 10.7-11-10.7-11-10.7-11H10.7s-10.7.3-10.7 11 10.7 11 10.7 11h42.6zM56.8 94.3s9.2 5.1 14.6-4.1-3.8-14.9-3.8-14.9L30.8 53.8v.1s-9.2-5.4-14.6 3.8S20 72.4 20 72.4v.2l36.8 21.7zM76.3 66.8s5.4 9.3 14.7 4.1 4.3-14.5 4.3-14.5l-21-37.2S69 9.9 59.8 15.1s-4.1 14.5-4.1 14.5h-.2l20.8 37.2z"/></g></svg>
    |                                                                                                                       ^
    at Parser.pp.raise (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/parser/util.js:97:8)
    at Parser.pp.expect (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/parser/util.js:85:33)
    at Parser.pp.jsxParseExpressionContainer (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/plugins/jsx/index.js:379:8)
    at Parser.pp.jsxParseElementAt (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/plugins/jsx/index.js:451:32)
    at Parser.pp.jsxParseElementAt (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/plugins/jsx/index.js:440:30)
    at Parser.pp.jsxParseElement (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/plugins/jsx/index.js:481:15)
    at Parser.parseExprAtom (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/plugins/jsx/index.js:14:21)
    at Parser.pp.parseExprSubscripts (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/parser/expression.js:272:19)
    at Parser.pp.parseMaybeUnary (/home/oskarbjs/Projects/analytics-ui/node_modules/babylon/lib/parser/expression.js:252:19)

Perhaps this issue isn't in your lib, but somewhere down the chain? Please point me in the right direction in that case.

br Oskar

coma commented 7 years ago

Hey @oskbor!

The issue here is the style going trough the JSX parser... Can you separate the style into a CSS file?