From ae91e2eacbe1156480c96219b993000eb1e7b9bf Mon Sep 17 00:00:00 2001
From: Greg McKelvey <mckelveygreg@gmail.com>
Date: Mon, 14 Aug 2023 23:30:17 -0700
Subject: [PATCH] feat(esm): add support for svgo.config.cjs (#879)

---
 __fixtures__/withSvgoConfig/svgo.config.cjs       | 12 ++++++++++++
 packages/cli/src/__snapshots__/index.test.ts.snap | 13 +++++++++++++
 packages/cli/src/index.test.ts                    |  7 +++++++
 packages/cli/src/index.ts                         |  2 +-
 packages/plugin-svgo/src/config.ts                |  1 +
 website/pages/docs/configuration-files.mdx        |  2 +-
 6 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 __fixtures__/withSvgoConfig/svgo.config.cjs

diff --git a/__fixtures__/withSvgoConfig/svgo.config.cjs b/__fixtures__/withSvgoConfig/svgo.config.cjs
new file mode 100644
index 00000000..af634d9b
--- /dev/null
+++ b/__fixtures__/withSvgoConfig/svgo.config.cjs
@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeTitle: false,
+        },
+      },
+    },
+  ]
+}
\ No newline at end of file
diff --git a/packages/cli/src/__snapshots__/index.test.ts.snap b/packages/cli/src/__snapshots__/index.test.ts.snap
index 17d9a4af..2a14529d 100644
--- a/packages/cli/src/__snapshots__/index.test.ts.snap
+++ b/packages/cli/src/__snapshots__/index.test.ts.snap
@@ -66,6 +66,19 @@ export default SvgFile
 "
 `;
 
+exports[`cli should support --svgo-config as file with .cjs extension 1`] = `
+"import * as React from 'react'
+const SvgFile = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
+    <title>{'Rectangle 5'}</title>
+    <path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
+  </svg>
+)
+export default SvgFile
+
+"
+`;
+
 exports[`cli should support --svgo-config as json 1`] = `
 "import * as React from 'react'
 const SvgFile = (props) => (
diff --git a/packages/cli/src/index.test.ts b/packages/cli/src/index.test.ts
index 8c4e8392..7cd5879f 100644
--- a/packages/cli/src/index.test.ts
+++ b/packages/cli/src/index.test.ts
@@ -109,6 +109,13 @@ describe('cli', () => {
     expect(result).toMatchSnapshot()
   })
 
+  it('should support --svgo-config as file with .cjs extension', async () => {
+    const result = await cli(
+      `--svgo-config __fixtures__/withSvgoConfig/svgo.config.cjs __fixtures__/simple/file.svg`,
+    )
+    expect(result).toMatchSnapshot()
+  })
+
   it.each([
     ['--no-dimensions'],
     ['--jsx-runtime classic-preact'],
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 6bf680d0..d1b2a371 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -38,7 +38,7 @@ const parseConfig = (name: string) => (arg: string) => {
     }
 
     const ext = path.extname(arg)
-    if (ext === '.js' || ext === '.json') {
+    if (ext === '.js' || ext === '.json' || ext === '.cjs') {
       return require(path.join(process.cwd(), arg))
     }
 
diff --git a/packages/plugin-svgo/src/config.ts b/packages/plugin-svgo/src/config.ts
index 2212b4df..01e35fa4 100644
--- a/packages/plugin-svgo/src/config.ts
+++ b/packages/plugin-svgo/src/config.ts
@@ -10,6 +10,7 @@ const explorer = cosmiconfigSync('svgo', {
     '.svgorc.yaml',
     '.svgorc.yml',
     'svgo.config.js',
+    'svgo.config.cjs',
     '.svgo.yml',
   ],
   transform: (result) => result && result.config,
diff --git a/website/pages/docs/configuration-files.mdx b/website/pages/docs/configuration-files.mdx
index 73eb00b7..55d52418 100644
--- a/website/pages/docs/configuration-files.mdx
+++ b/website/pages/docs/configuration-files.mdx
@@ -54,7 +54,7 @@ expandProps: false
 
 ## SVGO
 
-The recommended way to configure SVGO for SVGR is to use [`svgo.config.js`](https://github.com/svg/svgo/blob/main/README.md#configuration).
+The recommended way to configure SVGO for SVGR is to use [`svgo.config.js or svgo.config.cjs`](https://github.com/svg/svgo/blob/main/README.md#configuration).
 
 Even if it is not recommended, you can also use `svgoConfig` option to specify your SVGO configuration. `svgoConfig` has precedence on `svgo.config.js`.