From d800319194970f4c10248cebf336f3b69e92b261 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <greg@smooth-code.com>
Date: Mon, 23 Dec 2019 09:43:49 +0100
Subject: [PATCH] feat(cli): allow multiple values in "--svg-props" and
 "--replace-attr-values"

Closes #233
---
 .../cli/src/__snapshots__/index.test.js.snap  | 32 +++++++++----------
 packages/cli/src/index.js                     | 13 +++++---
 packages/cli/src/index.test.js                |  2 +-
 .../src/__snapshots__/config.test.js.snap     |  8 +++++
 website/src/pages/docs/cli.mdx                |  2 ++
 5 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap
index fc4fa11e..8140afbd 100644
--- a/packages/cli/src/__snapshots__/index.test.js.snap
+++ b/packages/cli/src/__snapshots__/index.test.js.snap
@@ -346,12 +346,12 @@ export default SvgFile
 "
 `;
 
-exports[`cli should support various args: --svg-props "hidden={true}" 1`] = `
+exports[`cli should support various args: --svg-props "hidden={true},id=hello" 1`] = `
 "import React from 'react'
 
 function SvgFile(props) {
   return (
-    <svg width={48} height={1} hidden={true} {...props}>
+    <svg width={48} height={1} hidden={true} id=\\"hello\\" {...props}>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -382,20 +382,20 @@ export default SvgFile
 exports[`cli should suppress output when transforming a directory with a --silent option 1`] = `""`;
 
 exports[`cli should transform a whole directory and output relative destination paths 1`] = `
-"
-__fixtures__/cased/camelCase.svg -> __fixtures_build__/whole/cased/CamelCase.js
-__fixtures__/cased/kebab-case.svg -> __fixtures_build__/whole/cased/KebabCase.js
-__fixtures__/cased/multiple---dashes.svg -> __fixtures_build__/whole/cased/MultipleDashes.js
-__fixtures__/complex/skype.svg -> __fixtures_build__/whole/complex/Skype.js
-__fixtures__/complex/telegram.svg -> __fixtures_build__/whole/complex/Telegram.js
-__fixtures__/nesting/a/c/three.svg -> __fixtures_build__/whole/nesting/a/c/Three.js
-__fixtures__/nesting/a/two.svg -> __fixtures_build__/whole/nesting/a/Two.js
-__fixtures__/nesting/one.svg -> __fixtures_build__/whole/nesting/One.js
-__fixtures__/simple/file.svg -> __fixtures_build__/whole/simple/File.js
-__fixtures__/withPrettierRc/file.svg -> __fixtures_build__/whole/withPrettierRc/File.js
-__fixtures__/withSvgoYml/file.svg -> __fixtures_build__/whole/withSvgoYml/File.js
-__fixtures__/withSvgrRc/file.svg -> __fixtures_build__/whole/withSvgrRc/File.js
-__fixtures__/cased/PascalCase.svg -> __fixtures_build__/whole/cased/PascalCase.js"
+"
+__fixtures__/cased/PascalCase.svg -> __fixtures_build__/whole/cased/PascalCase.js
+__fixtures__/cased/camelCase.svg -> __fixtures_build__/whole/cased/CamelCase.js
+__fixtures__/cased/kebab-case.svg -> __fixtures_build__/whole/cased/KebabCase.js
+__fixtures__/cased/multiple---dashes.svg -> __fixtures_build__/whole/cased/MultipleDashes.js
+__fixtures__/complex/skype.svg -> __fixtures_build__/whole/complex/Skype.js
+__fixtures__/complex/telegram.svg -> __fixtures_build__/whole/complex/Telegram.js
+__fixtures__/nesting/a/c/three.svg -> __fixtures_build__/whole/nesting/a/c/Three.js
+__fixtures__/nesting/a/two.svg -> __fixtures_build__/whole/nesting/a/Two.js
+__fixtures__/nesting/one.svg -> __fixtures_build__/whole/nesting/One.js
+__fixtures__/simple/file.svg -> __fixtures_build__/whole/simple/File.js
+__fixtures__/withPrettierRc/file.svg -> __fixtures_build__/whole/withPrettierRc/File.js
+__fixtures__/withSvgoYml/file.svg -> __fixtures_build__/whole/withSvgoYml/File.js
+__fixtures__/withSvgrRc/file.svg -> __fixtures_build__/whole/withSvgrRc/File.js"
 `;
 
 exports[`cli should work with a simple file 1`] = `
diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js
index 529fb3a9..fa170f6a 100644
--- a/packages/cli/src/index.js
+++ b/packages/cli/src/index.js
@@ -8,12 +8,17 @@ import fileCommand from './fileCommand'
 import dirCommand from './dirCommand'
 import { stat, exitError } from './util'
 
-const parseObject = (arg, accumulation = {}) => {
+function parseObject(arg, accumulation = {}) {
   const [name, value] = arg.split('=')
   return { ...accumulation, [name]: value }
 }
 
-const isFile = filePath => {
+function parseObjectList(arg, accumulation = {}) {
+  const args = arg.split(',').map(str => str.trim())
+  return args.reduce((acc, arg) => parseObject(arg, acc), accumulation)
+}
+
+function isFile(filePath) {
   try {
     const stats = fs.statSync(filePath)
     return stats.isFile()
@@ -61,12 +66,12 @@ program
   .option(
     '--svg-props <property=value>',
     'add props to the svg element',
-    parseObject,
+    parseObjectList,
   )
   .option(
     '--replace-attr-values <old=new>',
     'replace an attribute value',
-    parseObject,
+    parseObjectList,
   )
   .option('--template <file>', 'specify a custom template to use')
   .option('--title-prop', 'create a title element linked with props')
diff --git a/packages/cli/src/index.test.js b/packages/cli/src/index.test.js
index cd869e4f..bc6c9d0c 100644
--- a/packages/cli/src/index.test.js
+++ b/packages/cli/src/index.test.js
@@ -107,7 +107,7 @@ describe('cli', () => {
     ['--native --ref'],
     ['--ref'],
     ['--replace-attr-values "#063855=currentColor"'],
-    [`--svg-props "hidden={true}"`],
+    [`--svg-props "hidden={true},id=hello"`],
     ['--no-svgo'],
     ['--no-prettier'],
     ['--title-prop'],
diff --git a/packages/core/src/__snapshots__/config.test.js.snap b/packages/core/src/__snapshots__/config.test.js.snap
index 4cee1a89..d82c2a54 100644
--- a/packages/core/src/__snapshots__/config.test.js.snap
+++ b/packages/core/src/__snapshots__/config.test.js.snap
@@ -6,6 +6,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -33,6 +34,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -61,6 +63,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": false,
+  "memo": false,
   "native": false,
   "plugins": null,
   "prettier": true,
@@ -82,6 +85,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -109,6 +113,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -136,6 +141,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -164,6 +170,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": false,
+  "memo": false,
   "native": false,
   "plugins": null,
   "prettier": true,
@@ -185,6 +192,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
diff --git a/website/src/pages/docs/cli.mdx b/website/src/pages/docs/cli.mdx
index 53e9d6f0..355e760e 100644
--- a/website/src/pages/docs/cli.mdx
+++ b/website/src/pages/docs/cli.mdx
@@ -64,6 +64,8 @@ To create icons, two options are important:
 $ npx @svgr/cli --icon --replace-attr-values "#000=currentColor" my-icon.svg
 ```
 
+> You can replace several values using `,` as separator: `--replace-attr-values "#000=currentColor,#fff=currentColor"`
+
 ## Target React Native
 
 It is possible to target React Native using [react-native-svg](https://github.com/react-native-community/react-native-svg).