Fix transformer-svg-react not finding .svgrrc's (#7741)

CHANGELOG.md

@@ -166,7 +166,7 @@ and Parcel adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 - Fix hoisting for optional chaining member expressions - [Details](https://github.com/parcel-bundler/parcel/pull/8121)
 - Fix issues with web extensions - [Details](https://github.com/parcel-bundler/parcel/pull/8000)
 - Reload the closest package.json to an asset if it's a package entry to fix `sideEffects` - [Details](https://github.com/parcel-bundler/parcel/pull/7909)
-- Only emit non static import bailout warnings for variables which correspond to a * import - [Details](https://github.com/parcel-bundler/parcel/pull/8136)
+- Only emit non static import bailout warnings for variables which correspond to a \* import - [Details](https://github.com/parcel-bundler/parcel/pull/8136)
 
 ## [2.5.0] - 2022-04-21
 

packages/core/integration-tests/test/integration/svg-react-config/.svgrrc.json

@@ -0,0 +1,4 @@
+{
+  "icon": true,
+  "jsxRuntime": "classic-preact"
+}

packages/core/integration-tests/test/integration/svg-react-config/index.html

@@ -0,0 +1 @@
+<img src="icon.svg" />

packages/core/integration-tests/test/integration/svg-react-config/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "preact": "*"
+  }
+}

packages/core/integration-tests/test/integration/svg-react-config/react.js

@@ -0,0 +1,4 @@
+const { h } = require('preact');
+const PreactIcon = require('./icon.svg');
+
+module.exports = <PreactIcon />;

packages/core/integration-tests/test/integration/svg-react-config/svgo.config.json

@@ -0,0 +1,3 @@
+{
+  "floatPrecision": 0
+}

packages/core/integration-tests/test/svg-react.js

@@ -19,6 +19,7 @@ describe('svg-react', function () {
     assert(file.includes('const SvgIcon ='));
     assert(file.includes('_react.createElement("svg"'));
   });
+
   it('should support transforming SVGs to typescript react components', async function () {
     let b = await bundle(
       path.join(__dirname, '/integration/svg-react-typescript/react.ts'),
@@ -36,4 +37,23 @@ describe('svg-react', function () {
     assert(file.includes('react.createElement("svg"'));
     assert(types.includes('const Icon: SVGRComponent'));
   });
+
+  it('should find and use a .svgrrc and .svgorc config file', async function () {
+    let b = await bundle(
+      path.join(__dirname, '/integration/svg-react-config/react.js'),
+      {
+        defaultConfig: path.join(
+          __dirname,
+          'integration/custom-configs/.parcelrc-svg-react',
+        ),
+      },
+    );
+
+    let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8');
+    assert(!file.includes('inkscape'));
+    assert(!/\d\.\d/.test(file));
+    assert(file.includes('const SvgIcon ='));
+    assert(file.includes('(0, _preact.h)("svg"'));
+    assert(file.includes('width: "1em"'));
+  });
 });

packages/transformers/postcss/src/loadConfig.js

@@ -180,7 +180,8 @@ export async function load({
     });
 
     contents = configFile.contents;
-    let isDynamic = configFile && path.extname(configFile.filePath) === '.js';
+    let isDynamic =
+      configFile && path.extname(configFile.filePath).endsWith('js');
     if (isDynamic) {
       // We have to invalidate on startup in case the config is non-deterministic,
       // e.g. using unknown environment variables, reading from the filesystem, etc.

packages/transformers/posthtml/src/PostHTMLTransformer.js

@@ -31,7 +31,7 @@ export default (new Transformer({
     );
 
     if (configFile) {
-      let isJavascript = path.extname(configFile.filePath) === '.js';
+      let isJavascript = path.extname(configFile.filePath).endsWith('js');
       if (isJavascript) {
         // We have to invalidate on startup in case the config is non-deterministic,
         // e.g. using unknown environment variables, reading from the filesystem, etc.

packages/transformers/pug/src/PugTransformer.js

@@ -15,7 +15,7 @@ export default (new Transformer({
     ]);
 
     if (configFile) {
-      let isJavascript = path.extname(configFile.filePath) === '.js';
+      let isJavascript = path.extname(configFile.filePath).endsWith('js');
       if (isJavascript) {
         config.invalidateOnStartup();
       }

packages/transformers/sass/src/SassTransformer.js

@@ -27,7 +27,7 @@ export default (new Transformer({
       );
     }
 
-    if (configFile && path.extname(configFile.filePath) === '.js') {
+    if (configFile && path.extname(configFile.filePath).endsWith('js')) {
       config.invalidateOnStartup();
     }
 

packages/transformers/stylus/src/StylusTransformer.js

@@ -23,7 +23,7 @@ export default (new Transformer({
     );
 
     if (configFile) {
-      let isJavascript = path.extname(configFile.filePath) === '.js';
+      let isJavascript = path.extname(configFile.filePath).endsWith('js');
       if (isJavascript) {
         config.invalidateOnStartup();
       }

packages/transformers/svg-react/package.json

@@ -23,7 +23,6 @@
     "@parcel/plugin": "2.8.0",
     "@svgr/core": "^6.2.0",
     "@svgr/plugin-jsx": "^6.2.0",
-    "@svgr/plugin-svgo": "^6.2.0",
-    "camelcase": "^6.3.0"
+    "@svgr/plugin-svgo": "^6.2.0"
   }
 }

packages/transformers/svg-react/src/SvgReactTransformer.js

@@ -3,41 +3,57 @@
 import {Transformer} from '@parcel/plugin';
 
 import path from 'path';
-import camelcase from 'camelcase';
 import svgoPlugin from '@svgr/plugin-svgo';
 import jsxPlugin from '@svgr/plugin-jsx';
 import {transform} from '@svgr/core';
 
-function getComponentName(filePath) {
-  let validCharacters = /[^a-zA-Z0-9_-]/g;
-  let name = path.parse(filePath).name.replace(validCharacters, '');
-  return camelcase(name, {
-    pascalCase: true,
-  });
-}
-
 export default (new Transformer({
   async loadConfig({config}) {
-    let conf = await config.getConfig(['.svgrrc.json', '.svgrrc']);
-    return conf?.contents;
+    let svgrResult = await config.getConfig([
+      '.svgrrc',
+      '.svgrrc.json',
+      '.svgrrc.js',
+      '.svgrrc.cjs',
+      'svgr.config.json',
+      'svgr.config.js',
+      'svgr.config.cjs',
+    ]);
+    let svgoResult = await config.getConfig([
+      'svgo.config.js',
+      'svgo.config.cjs',
+      'svgo.config.json',
+    ]);
+    if (svgrResult) {
+      let isJavascript = path.extname(svgrResult.filePath).endsWith('js');
+      if (isJavascript) {
+        config.invalidateOnStartup();
+      }
+    }
+    if (svgoResult) {
+      let isJavascript = path.extname(svgoResult.filePath).endsWith('js');
+      if (isJavascript) {
+        config.invalidateOnStartup();
+      }
+    }
+    return {svgr: svgrResult?.contents, svgo: svgoResult?.contents};
   },
+
   async transform({asset, config}) {
     let code = await asset.getCode();
-    let componentName = getComponentName(asset.filePath);
 
     const jsx = await transform(
       code,
-      {},
+      {svgoConfig: config.svgo, ...config.svgr, runtimeConfig: false},
       {
         caller: {
           name: '@parcel/transformer-svg-react',
           defaultPlugins: [svgoPlugin, jsxPlugin],
         },
-        filePath: componentName,
+        filePath: asset.filePath,
       },
     );
 
-    asset.type = config?.typescript ? 'tsx' : 'jsx';
+    asset.type = config.svgr?.typescript ? 'tsx' : 'jsx';
     asset.bundleBehavior = null;
     asset.setCode(jsx);