Feat: fixTableCellAlign option

lib/index.js

@@ -19,6 +19,12 @@
  *   You should typically pass `React.Fragment`.
  * @property {string|undefined} [prefix='h-']
  *   React key prefix.
+ * @property {boolean|undefined} [fixTableCellAlign=true]
+ *   Fix obsolete align attributes on table cells by turning them
+ *   into inline styles.
+ *   Keep it on when working with markdown, turn it off when working
+ *   with markup for emails.
+ *   Default: true.
  *
  * @typedef {SharedOptions & (import('./complex-types').ComponentsWithNodeOptions|import('./complex-types').ComponentsWithoutNodeOptions)} Options
  *   Configuration.
@@ -51,13 +57,19 @@ export default function rehypeReact(options) {
 
   const createElement = options.createElement
 
+  const fixTableCellAlign = options.fixTableCellAlign !== false
+
   Object.assign(this, {Compiler: compiler})
 
   /** @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,
+      fixTableCellAlign ? tableCellStyle(node) : node,
+      options.prefix
+    )
 
     if (node.type === 'root') {
       // Invert <https://github.com/syntax-tree/hast-to-hyperscript/blob/d227372/index.js#L46-L56>.

readme.md

@@ -174,6 +174,13 @@ React key prefix (`string`, default: `'h-'`).
 Pass the original hast node as `props.node` to custom React components
 (`boolean`, default: `false`).
 
+###### `options.fixTableCellAlign`
+
+Fix obsolete align attributes on table cells by turning them
+into inline styles.
+Keep it on when working with markdown, turn it off when working
+with markup for emails (`boolean`, default: `true`).
+
 ## Types
 
 This package is fully typed with [TypeScript][].

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,
+        fixTableCellAlign: 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()
 })