fix: handle style attribute

gregberge/svgr#201

Author: gregberge

packages/h2x-plugin-jsx/src/generator.js

@@ -20,9 +20,9 @@ const formatElementOpen = jsxElement => {
 const formatElementClose = jsxElement => `</${jsxElement.name}>`
 
 const formatComment = jsxComment =>
-  `{/*${jsxComment.text.replace('*/', '* /')}*/}`
+  `{/*${jsxComment.text.replace(/\*\//g, '* /')}*/}`
 
-const formatText = jsxText => jsxText.text
+const formatText = jsxText => jsxText.text.replace(/`/g, '\\`')
 
 export default {
   JSXElement: {
@@ -44,7 +44,7 @@ export default {
   JSXText: {
     enter(path, generator) {
       const trimmedText = path.node.text.trim()
-      if (trimmedText) generator.writeLine(formatText(path.node))
+      if (trimmedText) generator.writeLine(`{\`${formatText(path.node)}\`}`)
     },
   },
 }

packages/h2x-plugin-jsx/src/index.test.js

@@ -7,6 +7,11 @@ describe('transformJsx', () => {
     <?xml version="1.0" encoding="UTF-8"?>
     <svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+        <style>
+          .test {
+            fill: red;
+          }
+        </style>
         <title>Dismiss</title>
         <desc>Created with Sketch.</desc>
         <defs>
@@ -57,11 +62,16 @@ describe('transformJsx', () => {
       .toBe(`{/*?xml version="1.0" encoding="UTF-8"?*/}
 <svg width="88px" height="88px" viewBox="0 0 88 88" version={1.1} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
   {/*Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch*/}
+  <style>
+    {\`.test {
+            fill: red;
+          }\`}
+  </style>
   <title>
-    Dismiss
+    {\`Dismiss\`}
   </title>
   <desc>
-    Created with Sketch.
+    {\`Created with Sketch.\`}
   </desc>
   <defs>
     <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">