fix(core): config conflict with icon option (#137)

Author: plag

packages/core/src/plugins/__snapshots__/svgo.test.js.snap

@@ -20,4 +20,6 @@ exports[`svgo should optimize svg 1`] = `"<svg width=\\"88\\" height=\\"88\\" xm
 
 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 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 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 use state.filePath to detect configuration 1`] = `"<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>"`;

packages/core/src/plugins/mergeConfigs.js

@@ -0,0 +1,11 @@
+import mergeWith from 'lodash/mergeWith'
+
+function concatArrays(objValue, srcValue) {
+  if (Array.isArray(objValue)) {
+    return objValue.concat(srcValue)
+  }
+
+  return undefined // default value
+}
+
+export default (...configs) => mergeWith(...configs, concatArrays)

packages/core/src/plugins/mergeConfigs.test.js

@@ -0,0 +1,52 @@
+import mergeConfigs from './mergeConfigs'
+
+describe('mergeConfigs', () => {
+  it('should merge objects', () => {
+    const result = mergeConfigs(
+      { param1: 'value1' },
+      { param2: 'value2' },
+      { param3: 'value3' },
+    )
+    expect(result).toEqual({
+      param1: 'value1',
+      param2: 'value2',
+      param3: 'value3',
+    })
+  })
+
+  it('should merge arrays in objects', () => {
+    const result = mergeConfigs(
+      { param1: ['value1'] },
+      { param1: ['value2'] },
+      { param1: ['value3'] },
+    )
+    expect(result).toEqual({ param1: ['value1', 'value2', 'value3'] })
+  })
+
+  it('should merge arrays on object second level', () => {
+    const result = mergeConfigs(
+      { level1: { level2: ['value1'] } },
+      { level1: { level2: ['value2'] } },
+      { level1: { level2: ['value3'] } },
+    )
+    expect(result).toEqual({
+      level1: { level2: ['value1', 'value2', 'value3'] },
+    })
+  })
+
+  it('should merge arrays on objects second level with additional params', () => {
+    const result = mergeConfigs(
+      { level1: { level2: ['value1'], param1: 'value1' } },
+      { level1: { level2: ['value2'], param2: 'value2' } },
+      { level1: { level2: ['value3'], param3: 'value3' } },
+    )
+    expect(result).toEqual({
+      level1: {
+        level2: ['value1', 'value2', 'value3'],
+        param1: 'value1',
+        param2: 'value2',
+        param3: 'value3',
+      },
+    })
+  })
+})

packages/core/src/plugins/svgo.js

@@ -1,6 +1,6 @@
 import SVGO from 'svgo'
 import cosmiconfig from 'cosmiconfig'
-import merge from 'lodash/merge'
+import mergeConfigs from './mergeConfigs'
 
 const explorer = cosmiconfig('svgo', {
   searchPlaces: [
@@ -26,7 +26,7 @@ export default async (code, config = {}, state = {}) => {
   const filePath = state.filePath || process.cwd()
   const svgoRcConfig = await explorer.search(filePath)
   const svgo = new SVGO(
-    merge(getBaseSvgoConfig(config), svgoRcConfig, config.svgoConfig),
+    mergeConfigs(getBaseSvgoConfig(config), svgoRcConfig, config.svgoConfig),
   )
   const { data } = await svgo.optimize(code)
   return data

packages/core/src/plugins/svgo.test.js

@@ -31,6 +31,16 @@ describe('svgo', () => {
     expect(result).toMatchSnapshot()
   })
 
+  it('should support icon with config.svgoConfig plugins', async () => {
+    const result = await svgo(baseSvg, {
+      svgo: true,
+      icon: true,
+      svgoConfig: { plugins: [{ removeDesc: false }] },
+    })
+
+    expect(result).toMatchSnapshot()
+  })
+
   it('should use state.filePath to detect configuration', async () => {
     const result = await svgo(
       baseSvg,