feat(cli): support custom filename cases (#136)

Closes #118

Author: gregberge

README.md

@@ -88,6 +88,7 @@ Options:
   --config <file>                    specify the path of the svgr config
   -d, --out-dir <dirname>            output files into a directory
   --ext <ext>                        specify a custom file extension (default: "js")
+  --filename-case <case>             specify filename case (pascal, kebab, camel) (default: "pascal")
   --icon                             use "1em" as width and height
   --native                           add react-native support with react-native-svg
   --ref                              add svgRef prop to svg

packages/cli/README.md

@@ -12,20 +12,33 @@ npm install @svgr/cli
 
 ## Usage
 
-```js
-import svgr from '@svgr/core'
-
-const svgCode = `
-<svg xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-  <rect x="10" y="10" height="100" width="100"
-    style="stroke:#ff0000; fill: #0000ff"/>
-</svg>
-`
-
-svgr(svgCode, { icon: true }, { componentName: 'MyComponent' }).then(jsCode => {
-  console.log(jsCode)
-})
+```
+  Usage: index [options] <file>
+
+  Options:
+
+    -V, --version                      output the version number
+    --config <file>                    specify the path of the svgr config
+    -d, --out-dir <dirname>            output files into a directory
+    --ext <ext>                        specify a custom file extension (default: "js")
+    --filename-case <case>             specify filename case (pascal, kebab, camel) (default: "pascal")
+    --icon                             use "1em" as width and height
+    --native                           add react-native support with react-native-svg
+    --ref                              add svgRef prop to svg
+    --no-dimensions                    remove width and height from root SVG tag
+    --no-expand-props                  disable props expanding
+    --svg-attributes <property=value>  add some attributes to the svg
+    --replace-attr-values <old=new>    replace an attribute value
+    --template <file>                  specify a custom template to use
+    --title-prop                       create a title element linked with props
+    --prettier-config <fileOrJson>     Prettier config
+    --no-prettier                      disable Prettier
+    --svgo-config <fileOrJson>         SVGO config
+    --no-svgo                          disable SVGO
+    -h, --help                         output usage information
+
+  Examples:
+    svgr --replace-attr-values "#fff=currentColor" icon.svg
 ```
 
 ## License

packages/cli/package.json

@@ -27,7 +27,9 @@
     "chalk": "^2.4.1",
     "commander": "^2.16.0",
     "glob": "^7.1.2",
+    "lodash": "^4.17.10",
     "output-file-sync": "^2.0.1",
     "recursive-readdir": "^2.2.2"
-  }
+  },
+  "devDependencies": {}
 }

packages/cli/src/dirCommand.js

@@ -3,13 +3,34 @@ import path from 'path'
 import outputFileSync from 'output-file-sync'
 import readdir from 'recursive-readdir'
 import { pascalCase } from '@svgr/core'
+import camelCase from 'lodash/camelCase'
+import kebabCase from 'lodash/kebabCase'
 import { stat, convertFile } from './util'
 
-function rename(relative, ext) {
+const CASE = {
+  KEBAB: 'kebab', // kebab-case
+  CAMEL: 'camel', // camelCase
+  PASCAL: 'pascal', // PascalCase
+}
+
+function transformFilename(filename, filenameCase) {
+  switch (filenameCase) {
+    case CASE.KEBAB:
+      return kebabCase(filename)
+    case CASE.CAMEL:
+      return camelCase(filename)
+    case CASE.PASCAL:
+      return pascalCase(filename)
+    default:
+      throw new Error(`Unknown --filename-case ${filenameCase}`)
+  }
+}
+
+function rename(relative, ext, filenameCase) {
   const relativePath = path.parse(relative)
   relativePath.ext = `.${ext}`
-  relativePath.name = pascalCase(relativePath.name)
   relativePath.base = null
+  relativePath.name = transformFilename(relativePath.name, filenameCase)
 
   return path.format(relativePath)
 }
@@ -21,10 +42,14 @@ export function isCompilable(filename) {
   return COMPILABLE_EXTENSIONS.includes(ext)
 }
 
-async function dirCommand(program, filenames, { ext = 'js', ...options }) {
+async function dirCommand(
+  program,
+  filenames,
+  { ext = 'js', filenameCase = CASE.PASCAL, ...options },
+) {
   async function write(src, relative) {
     if (!isCompilable(relative)) return false
-    relative = rename(relative, ext)
+    relative = rename(relative, ext, filenameCase)
 
     const dest = path.join(program.outDir, relative)
     const code = await convertFile(src, options, { filePath: dest })

packages/cli/src/index.js

@@ -40,6 +40,10 @@ program
   .option('--config <file>', 'specify the path of the svgr config')
   .option('-d, --out-dir <dirname>', 'output files into a directory')
   .option('--ext <ext>', 'specify a custom file extension (default: "js")')
+  .option(
+    '--filename-case <case>',
+    'specify filename case (pascal, kebab, camel) (default: "pascal")',
+  )
   .option('--icon', 'use "1em" as width and height')
   .option('--native', 'add react-native support with react-native-svg')
   .option('--ref', 'add svgRef prop to svg')

packages/core/src/config.test.js

@@ -30,7 +30,7 @@ describe('config', () => {
       const config = await resolveConfigFile(
         path.join(__dirname, '__fixtures__/svgr'),
       )
-      expect(config).toMatch(/__fixtures__\/svgr\/\.svgrrc$/)
+      expect(config).toMatch(/__fixtures__(\/|\\)svgr(\/|\\)\.svgrrc$/)
     })
   })
 })

packages/rollup/src/index.test.js

@@ -10,7 +10,7 @@ const compile = (plugins = [svgr()]) =>
   })
 
 const getCode = bundler =>
-  bundler.modules.find(({ id }) => id.includes('__fixtures__/simple/file.svg'))
+  bundler.modules.find(({ id }) => id.includes('__fixtures__/simple/file.svg') || id.includes('__fixtures__\\simple\\file.svg'))
     .code
 
 describe('rollup loader', () => {

yarn.lock

@@ -1230,7 +1230,7 @@ babel-loader@^7.1.5:
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
 
-babel-loader@^8.0.0:
+babel-loader@^8.0.0-beta.4:
   version "8.0.0-beta.4"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.0-beta.4.tgz#c3fab00696c385c70c04dbe486391f0eb996f345"
   dependencies: