diff --git a/packages/mdx/lib/core.js b/packages/mdx/lib/core.js index 4ffc60827..7e42f9542 100644 --- a/packages/mdx/lib/core.js +++ b/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, diff --git a/packages/mdx/lib/plugin/rehype-recma.js b/packages/mdx/lib/plugin/rehype-recma.js index e274e264a..e2a6ffd89 100644 --- a/packages/mdx/lib/plugin/rehype-recma.js +++ b/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. diff --git a/packages/mdx/readme.md b/packages/mdx/readme.md index 65a3e66ff..a8da18481 100644 --- a/packages/mdx/readme.md +++ b/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` — Promise that resolves to the compiled JS as a [vfile][]. diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js index a8b79dd44..5908b97f0 100644 --- a/packages/mdx/test/compile.js +++ b/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) {