Feat: mapDepricatedTableCellAttrsToInlineCss opt

Adds a new plugin option, `mapDepricatedTableCellAttrsToInlineCss`, which controls whether table-related attributes are mapped to inline CSS styles. Defaults to `true`.

lib/index.js

@@ -19,6 +19,11 @@
  *   You should typically pass `React.Fragment`.
  * @property {string|undefined} [prefix='h-']
  *   React key prefix.
+ * @property {boolean|undefined} [mapDepricatedTableCellAttrsToInlineCss=true]
+ *   Default: true. Map deprecated table-related attributes to css styles as
+ *   recommended by Mozilla Developer Network docs. E.g.
+ *   `align="center"` to `style="text-align: center;"`. May result
+ *   in rendering differences.
  *
  * @typedef {SharedOptions & (import('./complex-types').ComponentsWithNodeOptions|import('./complex-types').ComponentsWithoutNodeOptions)} Options
  *   Configuration.
@@ -53,11 +58,18 @@ export default function rehypeReact(options) {
 
   Object.assign(this, {Compiler: compiler})
 
+  const mapDepricatedTableCellAttrsToInlineCss =
+    options.mapDepricatedTableCellAttrsToInlineCss !== false
+
   /** @type {import('unified').CompilerFunction<Root, ReactNode>} */
   function compiler(node) {
     /** @type {ReactNode} */
-    // @ts-expect-error: assume `name` is a known element.
-    let result = toH(h, tableCellStyle(node), options.prefix)
+    let result = toH(
+      // @ts-expect-error: assume `name` is a known element.
+      h,
+      mapDepricatedTableCellAttrsToInlineCss ? tableCellStyle(node) : node,
+      options.prefix
+    )
 
     if (node.type === 'root') {
       // Invert <https://github.com/syntax-tree/hast-to-hyperscript/blob/d227372/index.js#L46-L56>.

test.js

@@ -215,5 +215,38 @@ test('React ' + React.version, (t) => {
     'should expose node from node prop'
   )
 
+  t.deepEqual(
+    unified()
+      .use(rehypeReact, {
+        createElement: React.createElement,
+        mapDepricatedTableCellAttrsToInlineCss: false
+      })
+      .stringify(
+        u('root', [
+          h('table', {align: 'top'}, [
+            '\n  ',
+            h('tbody', {}, [
+              '\n  ',
+              h('tr', {}, [
+                h('th', {}, ['\n  ']),
+                h('td', {align: 'center'}, ['\n  '])
+              ])
+            ])
+          ])
+        ])
+      ),
+    React.createElement('div', {}, [
+      React.createElement('table', {key: 'h-1', align: 'top'}, [
+        React.createElement('tbody', {key: 'h-2'}, [
+          React.createElement('tr', {key: 'h-3'}, [
+            React.createElement('th', {key: 'h-4'}, ['\n  ']),
+            React.createElement('td', {key: 'h-5', align: 'center'}, ['\n  '])
+          ])
+        ])
+      ])
+    ]),
+    'should respect mapDepricatedTableCellAttrsToInlineCss option'
+  )
+
   t.end()
 })