Property adjustments for "style", "aria-*" and "data-*"

packages/mdx/mdx-hast-to-jsx.js

@@ -1,3 +1,6 @@
+const toStyleObject = require('to-style').object
+const { paramCase } = require('change-case')
+
 function toJSX(node, parentNode = {}, options = {}) {
   const {
     // default options
@@ -6,6 +9,20 @@ function toJSX(node, parentNode = {}, options = {}) {
   } = options
   let children = ''
 
+  if (node.properties != null) {
+    if (typeof node.properties.style === 'string') {
+      node.properties.style = toStyleObject(node.properties.style, { camelize: true })
+    }
+
+    // ariaProperty => aria-property
+    // dataProperty => data-property
+    const paramCaseRe = /^(aria[A-Z])|(data[A-Z])/
+    node.properties = Object.entries(node.properties).reduce((properties, [key, value]) => ({
+      ...properties,
+      [paramCaseRe.test(key) ? paramCase(key) : key]: value,
+    }), {})
+  }
+
   if (node.type === 'root') {
     const importNodes = []
     const exportNodes = []

packages/mdx/package.json

@@ -22,9 +22,11 @@
     "mdx"
   ],
   "dependencies": {
+    "change-case": "^3.0.2",
     "mdast-util-to-hast": "^3.0.0",
     "remark-parse": "^5.0.0",
     "remark-squeeze-paragraphs": "^3.0.1",
+    "to-style": "^1.3.3",
     "unified": "^6.1.6",
     "unist-util-visit": "^1.3.0"
   },
@@ -35,6 +37,11 @@
     "@mapbox/rehype-prism": "^0.2.0",
     "hast-util-select": "^1.0.1",
     "jest": "^22.4.3",
+    "rehype-katex": "^1.1.1",
+    "remark-math": "^1.0.4",
     "request-image-size": "^2.1.0"
+  },
+  "jest": {
+    "testEnvironment": "node"
   }
 }

packages/mdx/test/index.test.js

@@ -6,6 +6,8 @@ const path = require('path')
 const { select } = require('hast-util-select')
 const requestImageSize = require('request-image-size')
 const prism = require('@mapbox/rehype-prism')
+const math = require('remark-math')
+const katex = require('rehype-katex')
 
 const fixtureBlogPost = fs.readFileSync(
   path.join(__dirname, './fixtures/blog-post.md')
@@ -102,6 +104,31 @@ A paragraph
   expect(result).toContain('{/* a nested Markdown comment */}')
 })
 
+it('Should convert style strings to camelized objects', async () => {
+  const result = await mdx(`
+$$
+\\sum{1}
+$$
+  `, {
+    mdPlugins: [math],
+    hastPlugins: [katex],
+  })
+  expect(result).not.toContain('"style":"')
+  expect(result).toContain('"style":{')
+})
+
+it('Should convert data-* and aria-* properties to param-case', async () => {
+  const result = await mdx(`
+$$
+\\sum{1}
+$$
+  `, {
+    mdPlugins: [math],
+    hastPlugins: [katex],
+  })
+  expect(result).toContain('"aria-hidden":"true"')
+})
+
 it('Should not include export wrapper if skipExport is true', async () => {
   const result = await mdx('> test\n\n> `test`', { skipExport: true })