fix: style & custom SVG properties (#203)

Closes #199 
Closes #201

package.json

@@ -31,7 +31,7 @@
     "eslint-config-prettier": "^3.1.0",
     "eslint-plugin-import": "^2.14.0",
     "jest": "^23.6.0",
-    "lerna": "^3.4.0",
+    "lerna": "^3.4.1",
     "react": "^16.5.2"
   }
 }

packages/cli/src/__snapshots__/index.test.js.snap

@@ -5,10 +5,10 @@ exports[`cli should not override config with cli defaults 1`] = `
 
 const SvgFile = () => <svg viewBox=\\"0 0 48 1\\" version={1.1} xmlnsXlink=\\"http://www.w3.org/1999/xlink\\">
   <title>
-    Rectangle 5
+    {\`Rectangle 5\`}
   </title>
   <desc>
-    Created with Sketch.
+    {\`Created with Sketch.\`}
   </desc>
   <defs />
   <g id=\\"Page-1\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\">
@@ -64,7 +64,7 @@ exports[`cli should support --svgo-config as file 1`] = `
 
 const SvgFile = props => (
   <svg width={48} height={1} {...props}>
-    <title>Rectangle 5</title>
+    <title>{\`Rectangle 5\`}</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -79,7 +79,7 @@ exports[`cli should support --svgo-config as json 1`] = `
 
 const SvgFile = props => (
   <svg width={48} height={1} {...props}>
-    <title>Rectangle 5</title>
+    <title>{\`Rectangle 5\`}</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -271,8 +271,8 @@ const SvgFile = props => (
     xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
     {...props}
   >
-    <title>Rectangle 5</title>
-    <desc>Created with Sketch.</desc>
+    <title>{\`Rectangle 5\`}</title>
+    <desc>{\`Created with Sketch.\`}</desc>
     <defs />
     <g id=\\"Page-1\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\">
       <g

packages/core/package.json

@@ -24,8 +24,8 @@
   "dependencies": {
     "camelcase": "^5.0.0",
     "cosmiconfig": "^5.0.6",
-    "h2x-core": "^1.1.0",
-    "h2x-plugin-jsx": "^1.1.0",
+    "h2x-core": "^1.1.1",
+    "h2x-plugin-jsx": "^1.2.0",
     "merge-deep": "^3.0.2",
     "prettier": "^1.14.3",
     "svgo": "^1.1.1"

packages/core/src/__snapshots__/convert.test.js.snap

@@ -243,8 +243,8 @@ const SvgComponent = props => (
     xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
     {...props}
   >
-    <title>Dismiss</title>
-    <desc>Created with Sketch.</desc>
+    <title>{\`Dismiss\`}</title>
+    <desc>{\`Created with Sketch.\`}</desc>
     <defs />
     <g
       id=\\"Blocks\\"
@@ -293,7 +293,7 @@ export default SvgComponent
 "
 `;
 
-exports[`convert config titleProp 1`] = `
+exports[`convert config titleProp: without title added 1`] = `
 "import React from 'react'
 
 const SvgComponent = ({ title, ...props }) => (
@@ -374,6 +374,45 @@ export default SvgComponent
 "
 `;
 
+exports[`convert should handle special SVG attributes 1`] = `
+"import React from 'react'
+
+const SvgComponent = props => (
+  <svg {...props}>
+    <path externalResourcesRequired=\\"false\\" d=\\"M10 10h100v100H10z\\" />
+  </svg>
+)
+
+export default SvgComponent
+"
+`;
+
+exports[`convert should not remove all style tags 1`] = `
+"import React from 'react'
+
+const SvgComponent = props => (
+  <svg width={88} height={88} {...props}>
+    <style>{\`path{fill:red}\`}</style>
+    <g
+      id=\\"Blocks\\"
+      stroke=\\"none\\"
+      strokeWidth={1}
+      fill=\\"none\\"
+      fillRule=\\"evenodd\\"
+      strokeLinecap=\\"square\\"
+    >
+      <g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
+        <path d=\\"M51 37L37 51M51 51L37 37\\" id=\\"Shape\\" />
+      </g>
+      <style />
+    </g>
+  </svg>
+)
+
+export default SvgComponent
+"
+`;
+
 exports[`convert should remove null characters 1`] = `
 "import React from 'react'
 

packages/core/src/convert.test.js

@@ -58,6 +58,48 @@ describe('convert', () => {
     expect(result).toMatchSnapshot()
   })
 
+  it('should not remove all 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>
+            path {
+              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()
+  })
+
+  it('should handle special SVG attributes', async () => {
+    const result = await convert(
+      `
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <rect x="10" y="10" width="100" height="100" externalResourcesRequired="false" />
+      </svg>
+    `,
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+
   it('should convert style attribute', async () => {
     const result = await convert(
       `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
@@ -237,7 +279,7 @@ describe('convert', () => {
       expect(result).toMatchSnapshot()
     })
 
-    it('titleProp', async () => {
+    it('titleProp: without title added', async () => {
       const svg = `
       <svg width="0" height="0" style="position:absolute">
     <path d="M0 0h24v24H0z" fill="none" />

packages/core/src/h2x/titleProp.js

@@ -1,4 +1,4 @@
-import { JSXElement, JSXText } from 'h2x-plugin-jsx'
+import { JSXElement, JSXInterpolation } from 'h2x-plugin-jsx'
 
 /**
  * Check if a classical title exist
@@ -8,7 +8,7 @@ import { JSXElement, JSXText } from 'h2x-plugin-jsx'
 const hasTitle = node =>
   node.children.reduce((accumulation, value) => {
     if (value.name !== 'title') return accumulation
-    if (value.children.some(e => e.text === '{title}')) return accumulation
+    if (value.children.some(e => e.text === 'title')) return accumulation
     return true
   }, false)
 
@@ -20,20 +20,17 @@ const titleProp = () => () => ({
           if (hasTitle(path.node)) {
             path.node.children = path.node.children.filter(element => {
               if (element.name !== 'title') return true
-              if (element.children.some(e => e.text === '{title}')) return true
+              if (element.children.some(e => e.text === 'title')) return true
               return false
             })
           }
 
           if (!path.node.children.some(children => children.name === 'title')) {
             const element = new JSXElement()
-            const text = new JSXText()
-
-            text.text = '{title}'
-
+            const interpolation = new JSXInterpolation()
+            interpolation.value = 'title'
             element.name = 'title'
-            element.children.push(text)
-
+            element.children.push(interpolation)
             path.node.children.unshift(element)
           }
         }

packages/rollup/package.json

@@ -30,8 +30,8 @@
     "rollup-pluginutils": "^2.3.3"
   },
   "devDependencies": {
-    "rollup": "^0.66.2",
+    "rollup": "^0.66.4",
     "rollup-plugin-image": "^1.0.2",
-    "rollup-plugin-url": "^1.4.0"
+    "rollup-plugin-url": "^2.0.0"
   }
 }