Skip to content

Commit

Permalink
mdx: add tableCellAlignToStyle option, to use align
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
wooorm committed Oct 19, 2023
1 parent 172e519 commit 3a7f194
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 3 deletions.
11 changes: 8 additions & 3 deletions packages/mdx/lib/core.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,9 @@ const removedOptions = [
*/
export function createProcessor(options) {
const {
SourceMapGenerator,
development,
elementAttributeNameCase,
jsx,
format,
outputFormat,
Expand All @@ -85,9 +87,8 @@ export function createProcessor(options) {
rehypePlugins,
remarkPlugins,
remarkRehypeOptions,
elementAttributeNameCase,
stylePropertyNameCase,
SourceMapGenerator,
tableCellAlignToStyle,
...rest
} = options || {}
let index = -1
Expand Down Expand Up @@ -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,
Expand Down
3 changes: 3 additions & 0 deletions packages/mdx/lib/plugin/rehype-recma.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
5 changes: 5 additions & 0 deletions packages/mdx/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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][].
Expand Down
25 changes: 25 additions & 0 deletions packages/mdx/test/compile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit 3a7f194

Please sign in to comment.