feat: handle style attribute

Fix #7
gregberge · Oct 30, 2017 · 1e80b0e · 1e80b0e
1 parent 4045631
commit 1e80b0e
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 4 deletions.
diff --git a/src/__snapshots__/index.test.js.snap b/src/__snapshots__/index.test.js.snap
@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`convert should convert style attribute 1`] = `
+"import React from \\"react\\";
+
+const SvgComponent = props => (
+  <svg
+    xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
+    width={48}
+    height={48}
+    {...props}
+  >
+    <g transform=\\"translate(0 -1004.362)\\">
+      <g id=\\"a\\" color=\\"#000\\" fill=\\"#a3a3a3\\" strokeWidth={8}>
+        <rect
+          style={{ marker: \\"none\\" }}
+          width={4}
+          height={4}
+          x={4}
+          y={1010.362}
+          rx={0.2}
+          ry={0.2}
+          overflow=\\"visible\\"
+        />
+        <rect
+          ry={0.2}
+          rx={0.2}
+          y={1010.362}
+          x={12}
+          height={4}
+          width={32}
+          style={{ marker: \\"none\\" }}
+          overflow=\\"visible\\"
+        />
+      </g>
+      <use xlinkHref=\\"#a\\" />
+      <use xlinkHref=\\"#a\\" transform=\\"translate(0 8)\\" />
+      <use xlinkHref=\\"#a\\" transform=\\"translate(0 16)\\" />
+      <use xlinkHref=\\"#a\\" transform=\\"translate(0 24)\\" />
+      <use xlinkHref=\\"#a\\" transform=\\"translate(0 32)\\" />
+    </g>
+  </svg>
+);
+
+export default SvgComponent;
+"
+`;
+
 exports[`convert should convert using config 1`] = `
 "import React from \\"react\\";
 
@@ -44,7 +90,7 @@ exports[`rawConvert should convert using specific options 1`] = `
 "import React from 'react'
 
 const MyComponent = (props) => {/*?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?*/}
-<svg width=\\"88px\\" height=\\"88px\\" viewBox=\\"0 0 88 88\\" version=\\"1.1\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\" {...props}>
+<svg width=\\"88px\\" height=\\"88px\\" viewBox=\\"0 0 88 88\\" version={1.1} xmlnsXlink=\\"http://www.w3.org/1999/xlink\\" {...props}>
   {/*Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch*/}
   <title>
     Dismiss

diff --git a/src/cli/__snapshots__/index.test.js.snap b/src/cli/__snapshots__/index.test.js.snap
@@ -67,7 +67,7 @@ const One = props => (
     width=\\"48px\\"
     height=\\"1px\\"
     viewBox=\\"0 0 48 1\\"
-    version=\\"1.1\\"
+    version={1.1}
     xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
     {...props}
   >

diff --git a/src/index.test.js b/src/index.test.js
@@ -41,6 +41,141 @@ describe('rawConvert', () => {
 
     expect(result).toMatchSnapshot()
   })
+
+  it('should convert style attribute', async () => {
+    const result = await convert(
+      `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="list.inkscape.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.839192"
+     inkscape:cx="25.129629"
+     inkscape:cy="28.031549"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="2050"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2985"
+       empspacing="4"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       dotted="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1004.3622)">
+    <g
+       id="g4238"
+       transform="translate(0,1.7382813e-5)"
+       inkscape:tile-cx="24"
+       inkscape:tile-cy="42"
+       inkscape:tile-w="40"
+       inkscape:tile-h="4"
+       inkscape:tile-x0="4"
+       inkscape:tile-y0="40">
+      <rect
+         style="color:#000000;fill:#a3a3a3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="rect4240"
+         width="4"
+         height="4"
+         x="4"
+         y="1010.3622"
+         rx="0.2"
+         ry="0.2" />
+      <rect
+         ry="0.2"
+         rx="0.2"
+         y="1010.3622"
+         x="12"
+         height="4"
+         width="32"
+         id="rect4242"
+         style="color:#000000;fill:#a3a3a3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    </g>
+    <use
+       x="0"
+       y="0"
+       inkscape:tiled-clone-of="#g4238"
+       xlink:href="#g4238"
+       id="use4358" />
+    <use
+       x="0"
+       y="0"
+       inkscape:tiled-clone-of="#g4238"
+       xlink:href="#g4238"
+       transform="translate(0,8)"
+       id="use4360" />
+    <use
+       x="0"
+       y="0"
+       inkscape:tiled-clone-of="#g4238"
+       xlink:href="#g4238"
+       transform="translate(0,16)"
+       id="use4362" />
+    <use
+       x="0"
+       y="0"
+       inkscape:tiled-clone-of="#g4238"
+       xlink:href="#g4238"
+       transform="translate(0,24)"
+       id="use4364" />
+    <use
+       x="0"
+       y="0"
+       inkscape:tiled-clone-of="#g4238"
+       xlink:href="#g4238"
+       transform="translate(0,32)"
+       id="use4366" />
+  </g>
+</svg>`,
+    )
+
+    expect(result).toMatchSnapshot()
+  })
 })
 
 describe('convert', () => {

diff --git a/yarn.lock b/yarn.lock
@@ -2554,8 +2554,8 @@ h2x-parse@^0.1.0:
     jsdom "11.1.0"
 
 h2x-plugin-jsx@^0.1.6:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/h2x-plugin-jsx/-/h2x-plugin-jsx-0.1.7.tgz#e6901ecb5388594ff9836cd6303007fdfa3e5a8c"
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/h2x-plugin-jsx/-/h2x-plugin-jsx-0.1.8.tgz#f8bacb6b8c22844477e40be1167fa4e5d44b229a"
   dependencies:
     h2x-types "^0.1.0"