diff --git a/package.json b/package.json
index 3eeabec0..78485704 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
+ "@babel/generator": "^7.1.5",
"@babel/node": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.0",
@@ -32,6 +33,9 @@
"eslint-plugin-import": "^2.14.0",
"jest": "^23.6.0",
"lerna": "^3.4.3",
- "react": "^16.6.0"
+ "react": "^16.6.0",
+ "rehype-parse": "^5.0.0",
+ "unified": "^7.0.1",
+ "vfile": "^3.0.1"
}
}
diff --git a/packages/hast-util-to-babel-ast/src/__snapshots__/index.test.js.snap b/packages/hast-util-to-babel-ast/src/__snapshots__/index.test.js.snap
new file mode 100644
index 00000000..86488701
--- /dev/null
+++ b/packages/hast-util-to-babel-ast/src/__snapshots__/index.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hast-util-to-babel-ast should correctly transform svg 1`] = `
+";"
+`;
diff --git a/packages/hast-util-to-babel-ast/src/getAttributes.js b/packages/hast-util-to-babel-ast/src/getAttributes.js
index 37dcc2d4..564d3283 100644
--- a/packages/hast-util-to-babel-ast/src/getAttributes.js
+++ b/packages/hast-util-to-babel-ast/src/getAttributes.js
@@ -1,9 +1,13 @@
import * as t from '@babel/types'
-import { isNumeric } from './util'
+import { isNumeric, kebabCase } from './util'
import stringToObjectStyle from './stringToObjectStyle'
import { ATTRIBUTE_MAPPING, ELEMENT_ATTRIBUTE_MAPPING } from './mappings'
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] &&
diff --git a/packages/hast-util-to-babel-ast/src/index.test.js b/packages/hast-util-to-babel-ast/src/index.test.js
new file mode 100644
index 00000000..da265592
--- /dev/null
+++ b/packages/hast-util-to-babel-ast/src/index.test.js
@@ -0,0 +1,57 @@
+import unified from 'unified'
+import parse from 'rehype-parse'
+import vfile from 'vfile'
+import generate from '@babel/generator'
+import hastToBabelAst from './index'
+
+function transform(code) {
+ const hastTree = unified()
+ .use(parse, {
+ fragment: true,
+ space: 'svg',
+ emitParseErrors: true,
+ duplicateAttribute: false,
+ })
+ .parse(vfile({ path: 'test.svg', contents: code }))
+
+ const babelTree = hastToBabelAst(hastTree)
+
+ const { code: generatedCode } = generate(babelTree)
+
+ return generatedCode
+}
+
+describe('hast-util-to-babel-ast', () => {
+ it('should correctly transform svg', () => {
+ const code = `
+
+
+`
+ expect(transform(code)).toMatchSnapshot()
+ })
+
+ it('should correctly transform aria-x', () => {
+ const code = ``
+ expect(transform(code)).toMatchInlineSnapshot(
+ `";"`,
+ )
+ })
+
+ it('should correctly transform data-x', () => {
+ const code = ``
+ expect(transform(code)).toMatchInlineSnapshot(
+ `";"`,
+ )
+ })
+})
diff --git a/packages/hast-util-to-babel-ast/src/util.js b/packages/hast-util-to-babel-ast/src/util.js
index 3a021fc0..fcd5bb88 100644
--- a/packages/hast-util-to-babel-ast/src/util.js
+++ b/packages/hast-util-to-babel-ast/src/util.js
@@ -31,3 +31,9 @@ export function trimEnd(haystack, needle) {
? haystack.slice(0, -needle.length)
: haystack
}
+
+const KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g
+
+export function kebabCase(str) {
+ return str.replace(KEBAB_REGEX, match => `-${match.toLowerCase()}`)
+}
diff --git a/yarn.lock b/yarn.lock
index c2b62136..3b0bb120 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -57,6 +57,17 @@
source-map "^0.5.0"
trim-right "^1.0.1"
+"@babel/generator@^7.1.5":
+ version "7.1.5"
+ resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.5.tgz#615f064d13d95f8f9157c7261f68eddf32ec15b3"
+ integrity sha512-IO31r62xfMI+wBJVmgx0JR9ZOHty8HkoYpQAjRWUGG9vykBTlGHdArZ8zoFtpUu2gs17K7qTl/TtPpiSi6t+MA==
+ dependencies:
+ "@babel/types" "^7.1.5"
+ jsesc "^2.5.1"
+ lodash "^4.17.10"
+ source-map "^0.5.0"
+ trim-right "^1.0.1"
+
"@babel/helper-annotate-as-pure@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -719,6 +730,15 @@
lodash "^4.17.10"
to-fast-properties "^2.0.0"
+"@babel/types@^7.1.5":
+ version "7.1.5"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.5.tgz#12fe64e91a431234b7017b4227a78cc0eec4e081"
+ integrity sha512-sJeqa/d9eM/bax8Ivg+fXF7FpN3E/ZmTrWbkk6r+g7biVYfALMnLin4dKijsaqEhpd2xvOGfQTkQkD31YCVV4A==
+ dependencies:
+ esutils "^2.0.2"
+ lodash "^4.17.10"
+ to-fast-properties "^2.0.0"
+
"@lerna/add@^3.4.1":
version "3.4.1"
resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.4.1.tgz#d41068317e30f530df48220d256b5e79690b1877"