fix: fix merging svgo plugins in config (#384)

gregberge · Jan 20, 2020 · c9d2dfc · c9d2dfc · vercel · Jan 20, 2020
1 parent fd120d1
commit c9d2dfc
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 10 deletions.
diff --git a/packages/plugin-svgo/src/__snapshots__/index.test.js.snap b/packages/plugin-svgo/src/__snapshots__/index.test.js.snap
@@ -1,17 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-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 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\\" class=\\"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 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 not load runtime configuration with \`runtimeConfig: false\` 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" class=\\"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 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 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\\" class=\\"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 not remove viewBox with when dimensions is false 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 not remove viewBox with when dimensions is false 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" class=\\"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 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 optimize svg 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"prefix__Blocks\\" class=\\"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 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 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\\" class=\\"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 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 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\\" class=\\"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>"`;
+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\\" class=\\"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 be possible to enable id prefixing as the only optimization 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/><g id=\\"svgo__Blocks\\" class=\\"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,37 L37,51\\" id=\\"svgo__Shape\\"/><path d=\\"M51,51 L37,37\\" id=\\"svgo__Shape\\"/><style>#svgo__Shape{}</style></g></g></svg>"`;
diff --git a/packages/plugin-svgo/src/index.js b/packages/plugin-svgo/src/index.js
@@ -96,12 +96,35 @@ function getFilePath(state) {
   return state.filePath || process.cwd()
 }
 
+function getPlugins(config) {
+  return config && Array.isArray(config.plugins) ? config.plugins : []
+}
+
+function extendPlugins(...configs) {
+  const init = [];
+  let i = configs.length;
+
+  while (i-- > 0) {
+    const plugins = configs[i];
+    for (let j = 0; j < plugins.length; j++) {
+      const plugin = plugins[j];
+      if (!init.some(item => Object.keys(item)[0] === Object.keys(plugin)[0])) {
+        init.push(plugin);
+      }
+    }
+  }
+  return init;
+}
+
 function createSvgo(config, rcConfig) {
+  const baseSvgoConfig = getBaseSvgoConfig(config);
+  const plugins = extendPlugins(getPlugins(baseSvgoConfig), getPlugins(rcConfig), getPlugins(config.svgoConfig));
   const mergedConfig = mergeDeep(
-    getBaseSvgoConfig(config),
+    baseSvgoConfig,
     rcConfig,
     config.svgoConfig,
   )
+  mergedConfig.plugins = plugins
   return new SVGO(mergedConfig)
 }
 

diff --git a/packages/plugin-svgo/src/index.test.js b/packages/plugin-svgo/src/index.test.js
@@ -7,7 +7,7 @@ const baseSvg = `<?xml version="1.0" encoding="UTF-8"?>
   <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="Blocks" class="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>
@@ -107,4 +107,19 @@ describe('svgo', () => {
 
     expect(result).toMatchSnapshot()
   })
+
+  it('should be possible to enable id prefixing as the only optimization', () => {
+    const result = svgo(
+      baseSvg,
+      {
+        svgo: true,
+        icon: true,
+        runtimeConfig: true,
+        svgoConfig: { full: true, plugins: [{ prefixIds: {prefixIds: true, prefixClassNames: false} }] },
+      },
+      { filePath: path.join(__dirname, '../__fixtures__/svgo') },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
 })