feat: upgrade svgo & prettier

BREAKING CHANGE: SVGO now removes viewBox automatically.
gregberge · Nov 7, 2017 · fd66885 · fd66885
1 parent 7933c03
commit fd66885
Show file tree

Hide file tree

Showing 8 changed files with 374 additions and 240 deletions.
diff --git a/package.json b/package.json
@@ -16,18 +16,18 @@
   "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.0.1",
+    "babel-eslint": "^8.0.2",
     "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": "^2.3.0",
-    "conventional-github-releaser": "^1.1.12",
+    "codecov": "^3.0.0",
+    "conventional-github-releaser": "^2.0.0",
     "conventional-recommended-bump": "^1.0.2",
     "eslint": "^4.8.0",
     "eslint-config-airbnb-base": "^12.0.1",
-    "eslint-config-prettier": "^2.6.0",
+    "eslint-config-prettier": "^2.7.0",
     "eslint-plugin-import": "^2.7.0",
     "jest": "^21.2.1",
     "mversion": "^1.10.1",
@@ -44,9 +44,9 @@
     "lodash": "^4.17.4",
     "mz": "^2.6.0",
     "output-file-sync": "^2.0.0",
-    "prettier": "^1.7.3",
+    "prettier": "^1.8.1",
     "recursive-readdir": "^2.2.1",
-    "svgo": "^0.7.2"
+    "svgo": "^1.0.2"
   },
   "bin": {
     "svgr": "./bin/svgr"

diff --git a/src/__snapshots__/index.test.js.snap b/src/__snapshots__/index.test.js.snap
@@ -50,7 +50,7 @@ exports[`convert should convert using config 1`] = `
 "import React from \\"react\\";
 
 const SvgComponent = props => (
-  <svg width={88} height={88} viewBox=\\"0 0 88 88\\" {...props}>
+  <svg width={88} height={88} {...props}>
     <title>Dismiss</title>
     <g
       stroke=\\"#063855\\"
@@ -72,11 +72,12 @@ 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}>
+  <svg width={88} height={88} {...props}>
     <title>Dismiss</title>
-    <g id=\\"Blocks\\" fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
+    <g fill=\\"red\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
       <g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
-        <path d=\\"M51 37L37 51M51 51L37 37\\" id=\\"Shape\\" />
+        <path d=\\"M51 37L37 51\\" id=\\"Shape\\" />
+        <path d=\\"M51 51L37 37\\" />
       </g>
     </g>
   </svg>

diff --git a/src/cli/__snapshots__/index.test.js.snap b/src/cli/__snapshots__/index.test.js.snap
@@ -18,7 +18,7 @@ exports[`cli --no-expand-props 1`] = `
 "import React from \\"react\\";
 
 const One = () => (
-  <svg width={48} height={1} viewBox=\\"0 0 48 1\\">
+  <svg width={48} height={1}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -32,7 +32,7 @@ export default One;
 exports[`cli --no-prettier 1`] = `
 "import React from 'react'
 
-const One = (props) => <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+const One = (props) => <svg width={48} height={1} {...props}>
   <title>
     Rectangle 5
   </title>
@@ -48,7 +48,7 @@ exports[`cli --no-semi 1`] = `
 "import React from \\"react\\"
 
 const One = props => (
-  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+  <svg width={48} height={1} {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -103,7 +103,7 @@ exports[`cli --no-title 1`] = `
 "import React from \\"react\\";
 
 const One = props => (
-  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+  <svg width={48} height={1} {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 );
@@ -117,7 +117,7 @@ exports[`cli --precision 1`] = `
 "import React from \\"react\\";
 
 const One = props => (
-  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+  <svg width={48} height={1} {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -132,7 +132,7 @@ exports[`cli --replace-attr-value 1`] = `
 "import React from \\"react\\";
 
 const One = props => (
-  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+  <svg width={48} height={1} {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"currentColor\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -148,7 +148,7 @@ exports[`cli --template 1`] = `
 
 export default function One() {
   return (
-    <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+    <svg width={48} height={1} {...props}>
       <title>Rectangle 5</title>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
@@ -162,7 +162,7 @@ exports[`cli should work with a simple file 1`] = `
 "import React from \\"react\\";
 
 const One = props => (
-  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+  <svg width={48} height={1} {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -177,7 +177,7 @@ exports[`cli should work with output directory 1`] = `
 "import React from \\"react\\";
 
 const One = props => (
-  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+  <svg width={48} height={1} {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -191,7 +191,7 @@ exports[`cli should work with output directory 2`] = `
 "import React from \\"react\\";
 
 const Two = props => (
-  <svg width={48} height={11} viewBox=\\"0 0 48 11\\" {...props}>
+  <svg width={48} height={11} {...props}>
     <title>Group 6</title>
     <g stroke=\\"#063855\\" fill=\\"none\\" fillRule=\\"evenodd\\">
       <path d=\\"M0 7l5.317-2.658a6 6 0 0 1 5.366 0l2.634 1.316a6 6 0 0 0 5.366 0l2.634-1.316a6 6 0 0 1 5.366 0l2.634 1.316a6 6 0 0 0 5.366 0l2.634-1.316a6 6 0 0 1 5.366 0L48 7\\" />
@@ -208,7 +208,7 @@ exports[`cli should work with stdin 1`] = `
 "import React from \\"react\\";
 
 const SvgComponent = props => (
-  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+  <svg width={48} height={1} {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>

diff --git a/src/cli/dirCommand.js b/src/cli/dirCommand.js
@@ -5,7 +5,7 @@ import outputFileSync from 'output-file-sync'
 import { convertFile, isCompilableExtension, readdir } from './util'
 import { pascalCase } from '../transforms/rename'
 
-export const rename = (relative) => {
+export const rename = relative => {
   const relativePath = path.parse(relative)
   relativePath.ext = '.js'
   relativePath.name = pascalCase(relativePath.name)

diff --git a/src/configToOptions.js b/src/configToOptions.js
@@ -43,6 +43,8 @@ function configToOptions(config = {}) {
     const plugins = []
     const svgoConfig = { plugins }
     if (!config.title || config.icon) plugins.push({ removeTitle: {} })
+    else if (config.title) plugins.push({ removeTitle: false })
+    if (config.icon) plugins.push({ removeViewBox: false })
     if (config.precision === 'number')
       svgoConfig.floatPrecision = Number(svgoConfig.precision)
     return svgoConfig

diff --git a/src/plugins/svgo.js b/src/plugins/svgo.js
@@ -2,11 +2,6 @@ import SVGO from 'svgo'
 
 export default async (code, opts) => {
   const svgo = new SVGO(opts)
-
-  return new Promise((resolve, reject) => {
-    svgo.optimize(code, result => {
-      if (result.error) reject(result.error)
-      else resolve(result.data)
-    })
-  })
+  const { data } = await svgo.optimize(code)
+  return data
 }
diff --git a/src/plugins/svgo.test.js b/src/plugins/svgo.test.js
@@ -17,7 +17,7 @@ describe('svgo', () => {
     </svg>`)
 
     expect(result).toBe(
-      '<svg width="88" height="88" viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg"><title>Dismiss</title><g stroke="#063855" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M51 37L37 51M51 51L37 37"/></g></svg>',
+      '<svg width="88" height="88" xmlns="http://www.w3.org/2000/svg"><g stroke="#063855" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M51 37L37 51M51 51L37 37"/></g></svg>',
     )
   })
 
@@ -40,7 +40,7 @@ describe('svgo', () => {
     )
 
     expect(result).toBe(
-      '<svg width="88" height="88" viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg"><title>Dismiss</title><desc>Created with Sketch.</desc><g stroke="#063855" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M51 37L37 51M51 51L37 37"/></g></svg>',
+      '<svg width="88" height="88" xmlns="http://www.w3.org/2000/svg"><desc>Created with Sketch.</desc><g stroke="#063855" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M51 37L37 51M51 51L37 37"/></g></svg>',
     )
   })
 })