feat(esm): add support for svgo.config.cjs (#879)

gregberge · Aug 15, 2023 · ae91e2e · ae91e2e · vercel · Aug 15, 2023
1 parent e612b6a
commit ae91e2e
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 2 deletions.
diff --git a/__fixtures__/withSvgoConfig/svgo.config.cjs b/__fixtures__/withSvgoConfig/svgo.config.cjs
@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeTitle: false,
+        },
+      },
+    },
+  ]
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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`.