Repository: smooth-code/svgr (js)

Issue:
SyntaxError: Unexpected token, expected } for inline CSS block
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
<?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.
```

Pull request:
fix(jsx): remove style tag
Fix #9

Patch:
diff --git a/.eslintignore b/.eslintignore
index 507dd67..ec7df37 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,3 @@
 node_modules/
 lib/
-__fixtures_build__
+__fixtures__
diff --git a/package.json b/package.json
index 01edc4c..de22e67 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,12 @@
     "coverageDirectory": "./coverage/",
     "watchPathIgnorePatterns": [
       "<rootDir>/__fixtures__"
+    ],
+    "collectCoverageFrom" : [
+      "**/*.{js,jsx}",
+      "!**/node_modules/**",
+      "!**/__fixtures__/**",
+      "!**/__snapshots__/**"
     ]
   },
   "scripts": {
diff --git a/src/configToOptions.js b/src/configToOptions.js
index 6dc0ca5..a31b1e5 100644
--- a/src/configToOptions.js
+++ b/src/configToOptions.js
@@ -5,6 +5,7 @@ import emSize from './h2x/emSize'
 import expandProps from './h2x/expandProps'
 import replaceAttrValue from './h2x/replaceAttrValue'
 import removeComments from './h2x/removeComments'
+import removeStyle from './h2x/removeStyle'
 
 const defaultConfig = {
   svgo: true,
@@ -28,7 +29,7 @@ function configToOptions(config = {}) {
   config = { ...defaultConfig, ...config }
 
   function getH2xPlugins() {
-    const plugins = [jsx, stripAttribute('xmlns'), removeComments]
+    const plugins = [jsx, stripAttribute('xmlns'), removeComments, removeStyle]
     if (config.icon) plugins.push(emSize)
     config.replaceAttrValues.forEach(([oldValue, newValue]) => {
       plugins.push(replaceAttrValue(oldValue, newValue))
diff --git a/src/h2x/removeStyle.js b/src/h2x/removeStyle.js
new file mode 100644
index 0000000..a50c4bf
--- /dev/null
+++ b/src/h2x/removeStyle.js
@@ -0,0 +1,13 @@
+const removeStyle = () => ({
+  visitor: {
+    JSXElement: {
+      enter(path) {
+        if (path.node.name === 'style') {
+          path.remove()
+        }
+      },
+    },
+  },
+})
+
+export default removeStyle
diff --git a/src/index.js b/src/index.js
index 53bc169..7a04ab9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,7 @@ import emSize from './h2x/emSize'
 import expandProps from './h2x/expandProps'
 import replaceAttrValue from './h2x/replaceAttrValue'
 import removeComments from './h2x/removeComments'
+import removeStyle from './h2x/removeStyle'
 import configToOptions from './configToOptions'
 
 export {
@@ -21,6 +22,7 @@ export {
   replaceAttrValue,
   wrapIntoComponent,
   removeComments,
+  removeStyle,
 }
 
 function expandState(state) {
diff --git a/webpack.js b/webpack.js
index ef60e97..67e56f5 100644
--- a/webpack.js
+++ b/webpack.js
@@ -1,1 +1,2 @@
+/* eslint-disable import/no-unresolved */
 module.exports = require('./lib/webpack')


Test patch:
diff --git a/src/__snapshots__/index.test.js.snap b/src/__snapshots__/index.test.js.snap
index 41f9f45..f0fea64 100644
--- a/src/__snapshots__/index.test.js.snap
+++ b/src/__snapshots__/index.test.js.snap
@@ -22,6 +22,24 @@ export default SvgComponent;
 "
 `;
 
+exports[`convert should remove style tags 1`] = `
+"import React from \\"react\\";
+
+const SvgComponent = props => (
+  <svg width={88} height={88} viewBox=\\"0 0 88 88\\" {...props}>
+    <title>Dismiss</title>
+    <g id=\\"Blocks\\" fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
+      <g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
+        <path d=\\"M51 37L37 51M51 51L37 37\\" id=\\"Shape\\" />
+      </g>
+    </g>
+  </svg>
+);
+
+export default SvgComponent;
+"
+`;
+
 exports[`rawConvert should convert using specific options 1`] = `
 "import React from 'react'
 
diff --git a/src/index.test.js b/src/index.test.js
index 0ff6b3c..bb5c8b0 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -65,4 +65,34 @@ describe('convert', () => {
 
     expect(result).toMatchSnapshot()
   })
+
+  it('should remove style tags', async () => {
+    const result = await convert(
+      `
+      <?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 -->
+          <title>Dismiss</title>
+          <desc>Created with Sketch.</desc>
+          <defs></defs>
+          <style>
+            #Blocks {
+              fill: red;
+            }
+          </style>
+          <g id="Blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+              <g id="Dismiss" stroke="#063855" stroke-width="2">
+                  <path d="M51,37 L37,51" id="Shape"></path>
+                  <path d="M51,51 L37,37" id="Shape"></path>
+              </g>
+              <style>
+                #Shape {}
+              </style>
+          </g>
+      </svg>
+    `,
+    )
+
+    expect(result).toMatchSnapshot()
+  })
 })