feat(svgo): prefix ids by default

Closes #210
gregberge · Nov 4, 2018 · 06c338d · 06c338d
1 parent ac8b8ca
commit 06c338d
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 200 deletions.
diff --git a/package.json b/package.json
@@ -26,12 +26,12 @@
     "babel-loader": "^8.0.4",
     "codecov": "^3.1.0",
     "conventional-github-releaser": "^3.1.2",
-    "eslint": "^5.7.0",
+    "eslint": "^5.8.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-config-prettier": "^3.1.0",
     "eslint-plugin-import": "^2.14.0",
     "jest": "^23.6.0",
     "lerna": "^3.4.3",
-    "react": "^16.5.2"
+    "react": "^16.6.0"
   }
 }
diff --git a/packages/core/src/__snapshots__/convert.test.js.snap b/packages/core/src/__snapshots__/convert.test.js.snap
@@ -333,7 +333,7 @@ exports[`convert should convert style attribute 1`] = `
 const SvgComponent = props => (
   <svg width={48} height={48} {...props}>
     <g transform=\\"translate(0 -1004.362)\\">
-      <g id=\\"a\\" color=\\"#000\\" fill=\\"#a3a3a3\\" strokeWidth={8}>
+      <g id=\\"prefix__a\\" color=\\"#000\\" fill=\\"#a3a3a3\\" strokeWidth={8}>
         <rect
           style={{
             marker: 'none',
@@ -359,11 +359,11 @@ const SvgComponent = props => (
           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)\\" />
+      <use xlinkHref=\\"#prefix__a\\" />
+      <use xlinkHref=\\"#prefix__a\\" transform=\\"translate(0 8)\\" />
+      <use xlinkHref=\\"#prefix__a\\" transform=\\"translate(0 16)\\" />
+      <use xlinkHref=\\"#prefix__a\\" transform=\\"translate(0 24)\\" />
+      <use xlinkHref=\\"#prefix__a\\" transform=\\"translate(0 32)\\" />
     </g>
   </svg>
 )
@@ -392,15 +392,15 @@ const SvgComponent = props => (
   <svg width={88} height={88} {...props}>
     <style>{'path{fill:red}'}</style>
     <g
-      id=\\"Blocks\\"
+      id=\\"prefix__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 id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
+        <path d=\\"M51 37L37 51M51 51L37 37\\" id=\\"prefix__Shape\\" />
       </g>
       <style />
     </g>
@@ -435,8 +435,8 @@ exports[`convert should remove style tags 1`] = `
 const SvgComponent = props => (
   <svg width={88} height={88} {...props}>
     <g fill=\\"red\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
-      <g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
-        <path d=\\"M51 37L37 51\\" id=\\"Shape\\" />
+      <g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
+        <path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\" />
         <path d=\\"M51 51L37 37\\" />
       </g>
       <style />

diff --git a/packages/plugin-jsx/package.json b/packages/plugin-jsx/package.json
@@ -22,7 +22,7 @@
     "@svgr/babel-preset": "^3.1.0",
     "@svgr/hast-util-to-babel-ast": "^3.1.0",
     "rehype-parse": "^5.0.0",
-    "unified": "^7.0.0",
-    "vfile": "^3.0.0"
+    "unified": "^7.0.1",
+    "vfile": "^3.0.1"
   }
 }
diff --git a/packages/plugin-svgo/src/__snapshots__/index.test.js.snap b/packages/plugin-svgo/src/__snapshots__/index.test.js.snap
@@ -1,27 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`svgo should not load runtime configuration with \`runtimeConfig: false\` 1`] = `"<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>"`;
+exports[`svgo should be possible to disable id prefixing 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><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 37L37 51\\" id=\\"Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
 
-exports[`svgo should not remove viewBox with icon option 1`] = `
-"<?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>
-  <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>
-  </g>
-</svg>"
-`;
+exports[`svgo should not load runtime configuration with \`runtimeConfig: false\` 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
 
-exports[`svgo should optimize svg 1`] = `"<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>"`;
+exports[`svgo should not remove viewBox with icon option 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
 
-exports[`svgo should support config.svgoConfig 1`] = `"<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>"`;
+exports[`svgo should optimize svg 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"prefix__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
 
-exports[`svgo should support icon with config.svgoConfig svgos 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 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>"`;
+exports[`svgo should support config.svgoConfig 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><desc>Created with Sketch.</desc><g id=\\"prefix__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
 
-exports[`svgo should use state.filePath to detect configuration 1`] = `"<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>"`;
+exports[`svgo should support icon with config.svgoConfig plugins 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><desc>Created with Sketch.</desc><g id=\\"prefix__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
+
+exports[`svgo should use state.filePath to detect configuration 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
diff --git a/packages/plugin-svgo/src/index.js b/packages/plugin-svgo/src/index.js
@@ -84,7 +84,9 @@ function optimizeSync(svgstr, info) {
 }
 
 function getBaseSvgoConfig(config) {
-  const baseSvgoConfig = { plugins: [] }
+  const baseSvgoConfig = {
+    plugins: [{ prefixIds: true }],
+  }
   if (config.icon) baseSvgoConfig.plugins.push({ removeViewBox: false })
   return baseSvgoConfig
 }
@@ -94,9 +96,12 @@ function getFilePath(state) {
 }
 
 function createSvgo(config, rcConfig) {
-  return new SVGO(
-    mergeDeep(getBaseSvgoConfig(config), rcConfig, config.svgoConfig),
+  const mergedConfig = mergeDeep(
+    getBaseSvgoConfig(config),
+    rcConfig,
+    config.svgoConfig,
   )
+  return new SVGO(mergedConfig)
 }
 
 function getInfo(state) {

diff --git a/packages/plugin-svgo/src/index.test.js b/packages/plugin-svgo/src/index.test.js
@@ -11,6 +11,9 @@ const baseSvg = `<?xml version="1.0" encoding="UTF-8"?>
       <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>
+          <style>
+            #Shape {}
+          </style>
       </g>
   </g>
 </svg>`
@@ -27,22 +30,22 @@ describe('svgo', () => {
       {
         svgo: true,
         runtimeConfig: true,
-        svgoConfig: { svgos: [{ removeDesc: false }] },
+        svgoConfig: { plugins: [{ removeDesc: false }] },
       },
       {},
     )
 
     expect(result).toMatchSnapshot()
   })
 
-  it('should support icon with config.svgoConfig svgos', () => {
+  it('should support icon with config.svgoConfig plugins', () => {
     const result = svgo(
       baseSvg,
       {
         svgo: true,
         icon: true,
         runtimeConfig: true,
-        svgoConfig: { svgos: [{ removeDesc: false }] },
+        svgoConfig: { plugins: [{ removeDesc: false }] },
       },
       {},
     )
@@ -73,7 +76,22 @@ describe('svgo', () => {
   it('should not remove viewBox with icon option', () => {
     const result = svgo(
       baseSvg,
-      { icon: true, runtimeConfig: true },
+      { svgo: true, icon: true, runtimeConfig: true },
+      { filePath: path.join(__dirname, '../__fixtures__/svgo') },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+
+  it('should be possible to disable id prefixing', () => {
+    const result = svgo(
+      baseSvg,
+      {
+        svgo: true,
+        icon: true,
+        runtimeConfig: true,
+        svgoConfig: { plugins: [{ prefixIds: false }] },
+      },
       { filePath: path.join(__dirname, '../__fixtures__/svgo') },
     )
 

diff --git a/packages/webpack/package.json b/packages/webpack/package.json
@@ -35,6 +35,6 @@
     "babel-loader": "^8.0.4",
     "memory-fs": "^0.4.1",
     "url-loader": "^1.1.2",
-    "webpack": "^4.20.2"
+    "webpack": "^4.24.0"
   }
 }