Merge pull request #41 from smooth-code/refactor-emSize

Various improvements

.prettierignore

@@ -0,0 +1 @@
+CHANGELOG.md

package.json

@@ -16,34 +16,34 @@
   "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.0.3",
+    "babel-eslint": "^8.2.1",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "codecov": "^3.0.0",
     "conventional-github-releaser": "^2.0.0",
-    "eslint": "^4.12.1",
+    "eslint": "^4.16.0",
     "eslint-config-airbnb-base": "^12.0.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.7.0",
-    "jest": "^21.2.1",
+    "jest": "^22.1.4",
     "react": "^16.2.0",
-    "standard-version": "^4.2.0",
+    "standard-version": "^4.3.0",
     "webpack": "^3.10.0"
   },
   "dependencies": {
     "chalk": "^2.1.0",
-    "commander": "^2.12.2",
+    "commander": "^2.13.0",
     "glob": "^7.1.2",
     "h2x-core": "^0.1.9",
     "h2x-plugin-jsx": "^0.1.9",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
     "mz": "^2.6.0",
     "output-file-sync": "^2.0.0",
-    "prettier": "^1.9.1",
+    "prettier": "^1.10.2",
     "recursive-readdir": "^2.2.1",
     "svgo": "^1.0.3"
   },

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

@@ -14,20 +14,6 @@ export default One;
 "
 `;
 
-exports[`cli --icon 2`] = `
-"import React from \\"react\\";
-
-const Two = props => (
-  <svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
-    <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
-  </svg>
-);
-
-export default Two;
-
-"
-`;
-
 exports[`cli --ids 1`] = `
 "import React from \\"react\\";
 

src/cli/index.test.js

@@ -32,8 +32,6 @@ describe('cli', () => {
   it('--icon', async () => {
     const [stdout] = await exec('bin/svgr --icon __fixtures__/one.svg')
     expect(stdout).toMatchSnapshot()
-    const [stdout2] = await exec('bin/svgr --icon __fixtures__/two.svg')
-    expect(stdout2).toMatchSnapshot()
   })
 
   it('--ref', async () => {

src/h2x/__snapshots__/emSize.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`emSize should add width & height if not present 1`] = `
+"<svg width=\\"1em\\" height=\\"1em\\">
+  <g stroke=\\"#063855\\" strokeWidth={2} />
+</svg>
+"
+`;
+
+exports[`emSize should keep other attributes 1`] = `
+"<svg viewBox=\\"0 0 10 10\\" width=\\"1em\\" height=\\"1em\\">
+  <g stroke=\\"#063855\\" strokeWidth={2} />
+</svg>
+"
+`;
+
+exports[`emSize should replace width and height value by 1em 1`] = `
+"<svg width=\\"1em\\" height=\\"1em\\">
+  <g stroke=\\"#063855\\" strokeWidth={2} />
+</svg>
+"
+`;

src/h2x/emSize.js

@@ -12,13 +12,31 @@ const emSize = () => ({
   visitor: {
     JSXElement: {
       enter(path) {
-        if (path.node.name === 'svg' && !path.node.attributes.some(attr => attr && attr.name === 'width' && attr.value === '1em') && !path.node.attributes.some(attr => attr && attr.name === 'height' && attr.value === '1em')) {
-          const nextAttrs = path.node.attributes.filter(attr => attr.name !== 'width' && attr.name !== 'height');
-          nextAttrs.push(makeSizeAttr('width'));
-          nextAttrs.push(makeSizeAttr('height'));
-          path.node.attributes = nextAttrs;
-          path.replace(path.node);
-        }
+        // Skip if not svg node
+        if (path.node.name !== 'svg') return
+
+        // Split attributes into two arrays
+        const sizeAttributes = []
+        const otherAttributes = []
+        path.node.attributes.forEach(attr => {
+          if (attr.name === 'width' || attr.name === 'height')
+            sizeAttributes.push(attr)
+          else otherAttributes.push(attr)
+        })
+
+        // Skip if size attributes are correctly set
+        if (
+          sizeAttributes.length === 2 &&
+          sizeAttributes.every(attr => attr.value === '1em')
+        )
+          return
+
+        path.node.attributes = [
+          ...otherAttributes,
+          makeSizeAttr('width'),
+          makeSizeAttr('height'),
+        ]
+        path.replace(path.node)
       },
     },
   },

src/h2x/emSize.test.js

@@ -0,0 +1,38 @@
+import jsx from 'h2x-plugin-jsx'
+import h2x from '../plugins/h2x'
+import emSize from './emSize'
+
+describe('emSize', () => {
+  it('should add width & height if not present', () => {
+    const result = h2x(
+      `<svg>
+        <g stroke="#063855" stroke-width="2" />
+      </svg>`,
+      { plugins: [jsx, emSize] },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+
+  it('should replace width and height value by 1em', () => {
+    const result = h2x(
+      `<svg width="10px" height="10px">
+        <g stroke="#063855" stroke-width="2" />
+      </svg>`,
+      { plugins: [jsx, emSize] },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+
+  it('should keep other attributes', () => {
+    const result = h2x(
+      `<svg viewbox="0 0 10 10" width="10px" height="10px">
+        <g stroke="#063855" stroke-width="2" />
+      </svg>`,
+      { plugins: [jsx, emSize] },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+})