Various fixes

.eslintrc.json

@@ -12,6 +12,7 @@
     "no-param-reassign": "off",
     "no-use-before-define": "off",
     "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off",
     "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
     "react/jsx-wrap-multilines": "off",
     "react/no-unused-state": "off",

package.json

@@ -15,30 +15,30 @@
     "test": "jest --runInBand"
   },
   "devDependencies": {
-    "@babel/cli": "^7.1.5",
-    "@babel/core": "^7.1.6",
-    "@babel/generator": "^7.1.6",
-    "@babel/node": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-syntax-typescript": "^7.1.5",
-    "@babel/preset-env": "^7.1.6",
+    "@babel/cli": "^7.4.3",
+    "@babel/core": "^7.4.3",
+    "@babel/generator": "^7.4.0",
+    "@babel/node": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-syntax-typescript": "^7.3.3",
+    "@babel/preset-env": "^7.4.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.4",
-    "codecov": "^3.1.0",
+    "babel-jest": "^24.7.1",
+    "babel-loader": "^8.0.5",
+    "codecov": "^3.3.0",
     "conventional-github-releaser": "^3.1.2",
-    "eslint": "^5.9.0",
+    "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.11.1",
-    "jest": "^23.6.0",
-    "lerna": "^3.4.3",
-    "react": "^16.6.3",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.12.4",
+    "jest": "^24.7.1",
+    "lerna": "^3.13.2",
+    "react": "^16.8.6",
     "rehype-parse": "^6.0.0",
-    "unified": "^7.0.2",
-    "vfile": "^3.0.1"
+    "unified": "^7.1.0",
+    "vfile": "^4.0.0"
   }
 }

packages/babel-preset/src/index.js

@@ -63,6 +63,7 @@ const plugin = (api, opts) => {
 
   const plugins = [
     [transformSvgComponent, opts],
+    ...(opts.icon && opts.dimensions ? [svgEmDimensions] : []),
     [
       removeJSXAttribute,
       { elements: ['svg', 'Svg'], attributes: toRemoveAttributes },
@@ -81,10 +82,6 @@ const plugin = (api, opts) => {
     ])
   }
 
-  if (opts.icon && opts.dimensions) {
-    plugins.push(svgEmDimensions)
-  }
-
   if (opts.titleProp) {
     plugins.push(svgDynamicTitle)
   }

packages/babel-preset/src/index.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { transform } from '@babel/core'
 import preset from '.'
 
@@ -25,12 +24,12 @@ describe('preset', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-"import React from \\"react\\";
-
-const SvgComponent = () => <svg foo=\\"bar\\" x={y} />;
-
-export default SvgComponent;"
-`)
+                  "import React from \\"react\\";
+                  
+                  const SvgComponent = () => <svg foo=\\"bar\\" x={y} />;
+                  
+                  export default SvgComponent;"
+            `)
   })
 
   it('should handle native expo option', () => {
@@ -42,13 +41,13 @@ export default SvgComponent;"
         },
       }),
     ).toMatchInlineSnapshot(`
-"import React from \\"react\\";
-import { Svg } from \\"expo\\";
-
-const SvgComponent = () => <Svg><Svg.G><Svg.Path d=\\"M0 0h48v1H0z\\" /></Svg.G></Svg>;
-
-export default SvgComponent;"
-`)
+                  "import React from \\"react\\";
+                  import { Svg } from \\"expo\\";
+                  
+                  const SvgComponent = () => <Svg><Svg.G><Svg.Path d=\\"M0 0h48v1H0z\\" /></Svg.G></Svg>;
+                  
+                  export default SvgComponent;"
+            `)
   })
 
   it('should handle titleProp', () => {
@@ -60,14 +59,14 @@ export default SvgComponent;"
         },
       }),
     ).toMatchInlineSnapshot(`
-"import React from \\"react\\";
-
-const SvgComponent = ({
-  title
-}) => <svg><title>{title}</title></svg>;
-
-export default SvgComponent;"
-`)
+                  "import React from \\"react\\";
+                  
+                  const SvgComponent = ({
+                    title
+                  }) => <svg><title>{title}</title></svg>;
+                  
+                  export default SvgComponent;"
+            `)
   })
 
   it('should handle replaceAttrValues', () => {
@@ -82,11 +81,30 @@ export default SvgComponent;"
         },
       }),
     ).toMatchInlineSnapshot(`
-"import React from \\"react\\";
-
-const SvgComponent = () => <svg a=\\"black\\" b={props.white} />;
+                  "import React from \\"react\\";
+
+                  const SvgComponent = () => <svg a=\\"black\\" b={props.white} />;
+
+                  export default SvgComponent;"
+            `)
+  })
 
-export default SvgComponent;"
-`)
+  it('should handle expandProps & icon & dimensions', () => {
+    expect(
+      testPreset('<svg a="#000" b="#fff" />', {
+        expandProps: 'end',
+        icon: true,
+        dimensions: true,
+        state: {
+          componentName: 'SvgComponent',
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+      "import React from \\"react\\";
+
+      const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width=\\"1em\\" height=\\"1em\\" {...props} />;
+
+      export default SvgComponent;"
+    `)
   })
 })

packages/cli/package.json

@@ -30,15 +30,15 @@
     "@svgr/plugin-jsx": "^4.1.0",
     "@svgr/plugin-prettier": "^4.0.3",
     "@svgr/plugin-svgo": "^4.0.3",
-    "camelcase": "^5.0.0",
-    "chalk": "^2.4.1",
-    "commander": "^2.19.0",
+    "camelcase": "^5.3.1",
+    "chalk": "^2.4.2",
+    "commander": "^2.20.0",
     "dashify": "^2.0.0",
     "glob": "^7.1.3",
     "output-file-sync": "^2.0.1",
     "recursive-readdir": "^2.2.2"
   },
   "devDependencies": {
-    "del": "^3.0.0"
+    "del": "^4.1.0"
   }
 }

packages/cli/src/dirCommand.js

@@ -2,28 +2,7 @@
 import path from 'path'
 import outputFileSync from 'output-file-sync'
 import readdir from 'recursive-readdir'
-import camelcase from 'camelcase'
-import dashify from 'dashify'
-import { convertFile, stat } from './util'
-
-const CASE = {
-  KEBAB: 'kebab', // kebab-case
-  CAMEL: 'camel', // camelCase
-  PASCAL: 'pascal', // PascalCase
-}
-
-function transformFilename(filename, filenameCase) {
-  switch (filenameCase) {
-    case CASE.KEBAB:
-      return dashify(filename, { condense: true })
-    case CASE.CAMEL:
-      return camelcase(filename)
-    case CASE.PASCAL:
-      return camelcase(filename, { pascalCase: true })
-    default:
-      throw new Error(`Unknown --filename-case ${filenameCase}`)
-  }
-}
+import { convertFile, stat, transformFilename, CASE } from './util'
 
 function rename(relative, ext, filenameCase) {
   const relativePath = path.parse(relative)

packages/cli/src/util.js

@@ -6,10 +6,31 @@ import svgrConvert from '@svgr/core'
 import svgo from '@svgr/plugin-svgo'
 import jsx from '@svgr/plugin-jsx'
 import prettier from '@svgr/plugin-prettier'
+import camelcase from 'camelcase'
+import dashify from 'dashify'
 
 export const readFile = util.promisify(fs.readFile)
 export const stat = util.promisify(fs.stat)
 
+export const CASE = {
+  KEBAB: 'kebab', // kebab-case
+  CAMEL: 'camel', // camelCase
+  PASCAL: 'pascal', // PascalCase
+}
+
+export function transformFilename(filename, filenameCase) {
+  switch (filenameCase) {
+    case CASE.KEBAB:
+      return dashify(filename.replace(/_/g, '-'), { condense: true })
+    case CASE.CAMEL:
+      return camelcase(filename)
+    case CASE.PASCAL:
+      return camelcase(filename, { pascalCase: true })
+    default:
+      throw new Error(`Unknown --filename-case ${filenameCase}`)
+  }
+}
+
 export function convert(code, config, state) {
   return svgrConvert.sync(code, config, {
     ...state,

packages/cli/src/util.test.js

@@ -1,5 +1,5 @@
 import path from 'path'
-import { convertFile } from './util'
+import { convertFile, transformFilename, CASE } from './util'
 
 const FIXTURES = path.join(__dirname, '../../../__fixtures__')
 
@@ -19,4 +19,16 @@ describe('util', () => {
       expect(result).toMatchSnapshot()
     })
   })
+
+  describe('#transformFilename', () => {
+    it('should transform filename', () => {
+      expect(transformFilename('FooBar', CASE.CAMEL)).toBe('fooBar')
+      expect(transformFilename('FooBar', CASE.KEBAB)).toBe('foo-bar')
+      expect(transformFilename('FooBar', CASE.PASCAL)).toBe('FooBar')
+
+      expect(transformFilename('foo_bar', CASE.CAMEL)).toBe('fooBar')
+      expect(transformFilename('foo_bar', CASE.KEBAB)).toBe('foo-bar')
+      expect(transformFilename('foo_bar', CASE.PASCAL)).toBe('FooBar')
+    })
+  })
 })

packages/core/package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@svgr/plugin-jsx": "^4.1.0",
-    "camelcase": "^5.0.0",
-    "cosmiconfig": "^5.0.7"
+    "camelcase": "^5.3.1",
+    "cosmiconfig": "^5.2.0"
   }
 }

packages/hast-util-to-babel-ast/package.json

@@ -26,6 +26,6 @@
     "prepublishOnly": "yarn run build"
   },
   "dependencies": {
-    "@babel/types": "^7.1.6"
+    "@babel/types": "^7.4.0"
   }
 }

packages/hast-util-to-babel-ast/src/getAttributes.js

@@ -3,17 +3,33 @@ import { isNumeric, kebabCase, replaceSpaces } from './util'
 import stringToObjectStyle from './stringToObjectStyle'
 import { ATTRIBUTE_MAPPING, ELEMENT_ATTRIBUTE_MAPPING } from './mappings'
 
+function convertAriaAttribute(kebabKey) {
+  const [aria, ...parts] = kebabKey.split('-')
+  return `${aria}-${parts.join('').toLowerCase()}`
+}
+
 function getKey(key, value, node) {
-  const kebabKey = kebabCase(key)
-  if (kebabKey.startsWith('aria-') || kebabKey.startsWith('data-')) {
-    return t.jsxIdentifier(kebabKey)
-  }
   const lowerCaseKey = key.toLowerCase()
   const mappedElementAttribute =
     ELEMENT_ATTRIBUTE_MAPPING[node.name] &&
     ELEMENT_ATTRIBUTE_MAPPING[node.name][lowerCaseKey]
   const mappedAttribute = ATTRIBUTE_MAPPING[lowerCaseKey]
-  return t.jsxIdentifier(mappedElementAttribute || mappedAttribute || key)
+
+  if (mappedElementAttribute || mappedAttribute) {
+    return t.jsxIdentifier(mappedElementAttribute || mappedAttribute)
+  }
+
+  const kebabKey = kebabCase(key)
+
+  if (kebabKey.startsWith('aria-')) {
+    return t.jsxIdentifier(convertAriaAttribute(kebabKey))
+  }
+
+  if (kebabKey.startsWith('data-')) {
+    return t.jsxIdentifier(kebabKey)
+  }
+
+  return t.jsxIdentifier(key)
 }
 
 function getValue(key, value) {

packages/hast-util-to-babel-ast/src/index.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import unified from 'unified'
 import parse from 'rehype-parse'
 import vfile from 'vfile'
@@ -49,6 +48,13 @@ describe('hast-util-to-babel-ast', () => {
     )
   })
 
+  it('should correctly transform aria-xxxXxx', () => {
+    const code = `<svg aria-labelledby="foo" aria-describedat="foo" aria-describedby="foo"></svg>`
+    expect(transform(code)).toMatchInlineSnapshot(
+      `"<svg aria-labelledby=\\"foo\\" aria-describedat=\\"foo\\" aria-describedby=\\"foo\\" />;"`,
+    )
+  })
+
   it('should correctly transform data-x', () => {
     const code = `<svg data-hidden="true"></svg>`
     expect(transform(code)).toMatchInlineSnapshot(

packages/parcel-plugin-svgr/package.json

@@ -28,15 +28,15 @@
     "parcel-bundler": "^1.10.0"
   },
   "dependencies": {
-    "@babel/core": "^7.1.6",
+    "@babel/core": "^7.4.3",
     "@babel/plugin-transform-react-constant-elements": "^7.0.0",
-    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
     "@svgr/core": "^4.1.0",
     "@svgr/plugin-jsx": "^4.1.0",
     "@svgr/plugin-svgo": "^4.0.3"
   },
   "devDependencies": {
-    "parcel-bundler": "^1.10.3"
+    "parcel-bundler": "^1.10.0"
   }
 }

packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap

@@ -53,7 +53,6 @@ var SvgIcon = function SvgIcon(props) {
 
 var _default = SvgIcon;
 exports.default = _default;",
-    "map": undefined,
   },
 ]
 `;