mdx: add tableCellAlignToStyle option, to use align

The default behavior remains fine: a CSS `textalign` prop is added
on `td`, `th`, instead of an `align` (which is the default for GFM).
That’s what React wants: otherwise it warns.

But if you use some other framework, there’s now a toggle for it.

Author: wooorm

packages/mdx/lib/core.js

@@ -76,7 +76,9 @@ const removedOptions = [
  */
 export function createProcessor(options) {
   const {
+    SourceMapGenerator,
     development,
+    elementAttributeNameCase,
     jsx,
     format,
     outputFormat,
@@ -85,9 +87,8 @@ export function createProcessor(options) {
     rehypePlugins,
     remarkPlugins,
     remarkRehypeOptions,
-    elementAttributeNameCase,
     stylePropertyNameCase,
-    SourceMapGenerator,
+    tableCellAlignToStyle,
     ...rest
   } = options || {}
   let index = -1
@@ -136,7 +137,11 @@ export function createProcessor(options) {
   }
 
   pipeline
-    .use(rehypeRecma, {elementAttributeNameCase, stylePropertyNameCase})
+    .use(rehypeRecma, {
+      elementAttributeNameCase,
+      stylePropertyNameCase,
+      tableCellAlignToStyle
+    })
     .use(recmaDocument, {...rest, outputFormat})
     .use(recmaJsxRewrite, {
       development,

packages/mdx/lib/plugin/rehype-recma.js

@@ -22,6 +22,9 @@
  *
  *   This casing is used for hast elements, not for embedded MDX JSX nodes
  *   (components that someone authored manually).
+ * @property {boolean | null | undefined} [tableCellAlignToStyle=true]
+ *   Turn obsolete `align` props on `td` and `th` into CSS `style` props
+ *   (default: `true`).
  *
  * @typedef {'css' | 'dom'} StylePropertyNameCase
  *   Casing to use for property names in `style` objects.

packages/mdx/readme.md

@@ -751,6 +751,11 @@ default: `'dom'`).
 This casing is used for hast elements, not for embedded MDX JSX nodes
 (components that someone authored manually).
 
+###### `options.tableCellAlignToStyle`
+
+Turn obsolete `align` props on `td` and `th` into CSS `style` props (default:
+`true`).
+
 ###### Returns
 
 `Promise<VFile>` — Promise that resolves to the compiled JS as a [vfile][].

packages/mdx/test/compile.js

@@ -15,6 +15,7 @@ import {MDXProvider} from '@mdx-js/react'
 import React from 'react'
 import {renderToStaticMarkup} from 'react-dom/server'
 import rehypeRaw from 'rehype-raw'
+import remarkGfm from 'remark-gfm'
 import {SourceMapGenerator} from 'source-map'
 import {VFile} from 'vfile'
 import {run} from './context/run.js'
@@ -1302,6 +1303,30 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
       }
     }
   )
+
+  await t.test('should support `tableCellAlignToStyle`', async function () {
+    assert.match(
+      String(
+        await compile('| a |\n| :- |', {
+          remarkPlugins: [remarkGfm],
+          tableCellAlignToStyle: true,
+          jsx: true
+        })
+      ),
+      /textAlign: "left"/
+    )
+
+    assert.match(
+      String(
+        await compile('| a |\n| :- |', {
+          remarkPlugins: [remarkGfm],
+          tableCellAlignToStyle: false,
+          jsx: true
+        })
+      ),
+      /align="left"/
+    )
+  })
 })
 
 test('@mdx-js/mdx: createProcessor', async function (t) {