diff --git a/packages/fxa-react/package.json b/packages/fxa-react/package.json index aac422ebf79..c079b0698bc 100644 --- a/packages/fxa-react/package.json +++ b/packages/fxa-react/package.json @@ -67,7 +67,6 @@ "babel-eslint": "^10.1.0", "babel-loader": "^9.1.3", "babel-preset-react-app": "^10.0.1", - "camelcase": "^6.3.0", "eslint": "^7.32.0", "file-loader": "^6.2.0", "grunt": "^1.6.1", diff --git a/packages/fxa-react/svg-transform.js b/packages/fxa-react/svg-transform.js index 39f40f62a20..3a2f898ac75 100644 --- a/packages/fxa-react/svg-transform.js +++ b/packages/fxa-react/svg-transform.js @@ -7,14 +7,23 @@ // https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/jest/fileTransform.js const path = require('path'); -const camelcase = require('camelcase'); + +// Turns an SVG basename into PascalCase. Twin of the helper in +// packages/fxa-settings/config/jest/fileTransform.js. +function toPascalCase(name) { + return name + .replace(/([a-z])([A-Z])/g, '$1-$2') + .split(/[_.\- ]+/) + .filter(Boolean) + .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()) + .join('') + .replace(/\d[a-z]/g, (match) => match.toUpperCase()); +} module.exports = { process(src, filename) { const assetFilename = JSON.stringify(path.basename(filename)); - const pascalCaseFilename = camelcase(path.parse(filename).name, { - pascalCase: true, - }); + const pascalCaseFilename = toPascalCase(path.parse(filename).name); const componentName = `Svg${pascalCaseFilename}`; return `const React = require('react'); module.exports = { diff --git a/packages/fxa-settings/config/jest/fileTransform.js b/packages/fxa-settings/config/jest/fileTransform.js index c4734d7bdb0..f27524fd6e7 100644 --- a/packages/fxa-settings/config/jest/fileTransform.js +++ b/packages/fxa-settings/config/jest/fileTransform.js @@ -3,7 +3,18 @@ 'use strict'; const path = require('path'); -const camelcase = require('camelcase'); + +// Turns an SVG basename into PascalCase. Twin of the helper in +// packages/fxa-react/svg-transform.js. +function toPascalCase(name) { + return name + .replace(/([a-z])([A-Z])/g, '$1-$2') + .split(/[_.\- ]+/) + .filter(Boolean) + .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()) + .join('') + .replace(/\d[a-z]/g, (match) => match.toUpperCase()); +} // This is a custom Jest transformer turning file imports into filenames. // http://facebook.github.io/jest/docs/en/webpack.html @@ -15,9 +26,7 @@ module.exports = { if (filename.match(/\.svg$/)) { // Based on how SVGR generates a component name: // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6 - const pascalCaseFilename = camelcase(path.parse(filename).name, { - pascalCase: true, - }); + const pascalCaseFilename = toPascalCase(path.parse(filename).name); const componentName = `Svg${pascalCaseFilename}`; return { code: `const React = require('react'); diff --git a/packages/fxa-settings/package.json b/packages/fxa-settings/package.json index a09924cd576..2de00ac33ad 100644 --- a/packages/fxa-settings/package.json +++ b/packages/fxa-settings/package.json @@ -142,7 +142,6 @@ "bfj": "^9.1.1", "browserify-zlib": "^0.2.0", "browserslist": "^4.28.4", - "camelcase": "^6.2.1", "case-sensitive-paths-webpack-plugin": "^2.4.0", "classnames": "^2.5.1", "crypto-browserify": "^3.12.0", diff --git a/yarn.lock b/yarn.lock index 8a3d137b413..9ecb38d641b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -34108,7 +34108,6 @@ __metadata: babel-eslint: "npm:^10.1.0" babel-loader: "npm:^9.1.3" babel-preset-react-app: "npm:^10.0.1" - camelcase: "npm:^6.3.0" classnames: "npm:^2.5.1" eslint: "npm:^7.32.0" fetch-mock: "npm:^9.11.0" @@ -34176,7 +34175,6 @@ __metadata: bfj: "npm:^9.1.1" browserify-zlib: "npm:^0.2.0" browserslist: "npm:^4.28.4" - camelcase: "npm:^6.2.1" case-sensitive-paths-webpack-plugin: "npm:^2.4.0" classnames: "npm:^2.5.1" crypto-browserify: "npm:^3.12.0"