Add tableCellAlignToStyle option

Author: wooorm

lib/handlers/element.js

@@ -24,6 +24,8 @@ const own = {}.hasOwnProperty
 const cap = /[A-Z]/g
 const dashSomething = /-([a-z])/g
 
+const tableCellElement = new Set(['td', 'th'])
+
 /**
  * Turn a hast element into an estree node.
  *
@@ -51,6 +53,10 @@ export function element(node, state) {
   const attributes = []
   /** @type {string} */
   let prop
+  /** @type {string | undefined} */
+  let alignValue
+  /** @type {Array<Property> | undefined} */
+  let styleProperties
 
   for (prop in props) {
     if (own.call(props, prop)) {
@@ -89,7 +95,7 @@ export function element(node, state) {
             : parseStyle(String(value), node.tagName)
 
         if (state.stylePropertyNameCase === 'css') {
-          styleObject = transformStyleToCssCasing(styleObject)
+          styleObject = transformStylesToCssCasing(styleObject)
         }
 
         /** @type {Array<Property>} */
@@ -114,12 +120,20 @@ export function element(node, state) {
           }
         }
 
+        styleProperties = cssProperties
         attributeValue = {
           type: 'JSXExpressionContainer',
           expression: {type: 'ObjectExpression', properties: cssProperties}
         }
       } else if (value === true) {
         attributeValue = null
+      } else if (
+        state.tableCellAlignToStyle &&
+        tableCellElement.has(node.tagName) &&
+        prop === 'align'
+      ) {
+        alignValue = String(value)
+        continue
       } else {
         attributeValue = {type: 'Literal', value: String(value)}
       }
@@ -154,6 +168,37 @@ export function element(node, state) {
     }
   }
 
+  if (alignValue !== undefined) {
+    if (!styleProperties) {
+      styleProperties = []
+      attributes.push({
+        type: 'JSXAttribute',
+        name: {type: 'JSXIdentifier', name: 'style'},
+        value: {
+          type: 'JSXExpressionContainer',
+          expression: {type: 'ObjectExpression', properties: styleProperties}
+        }
+      })
+    }
+
+    const cssProp =
+      state.stylePropertyNameCase === 'css'
+        ? transformStyleToCssCasing('textAlign')
+        : 'textAlign'
+
+    styleProperties.push({
+      type: 'Property',
+      method: false,
+      shorthand: false,
+      computed: false,
+      key: identifierName(cssProp)
+        ? {type: 'Identifier', name: cssProp}
+        : {type: 'Literal', value: cssProp},
+      value: {type: 'Literal', value: alignValue},
+      kind: 'init'
+    })
+  }
+
   // Restore parent schema.
   state.schema = parentSchema
 
@@ -235,24 +280,34 @@ function parseStyle(value, tagName) {
  * @param {Style} domCasing
  * @returns {Style}
  */
-function transformStyleToCssCasing(domCasing) {
+function transformStylesToCssCasing(domCasing) {
   /** @type {Style} */
   const cssCasing = {}
   /** @type {string} */
   let from
 
   for (from in domCasing) {
     if (own.call(domCasing, from)) {
-      let to = from.replace(cap, toDash)
-      // Handle `ms-xxx` -> `-ms-xxx`.
-      if (to.slice(0, 3) === 'ms-') to = '-' + to
-      cssCasing[to] = domCasing[from]
+      cssCasing[transformStyleToCssCasing(from)] = domCasing[from]
     }
   }
 
   return cssCasing
 }
 
+/**
+ * Transform a DOM casing style prop to a CSS casing style prop.
+ *
+ * @param {string} from
+ * @returns {string}
+ */
+function transformStyleToCssCasing(from) {
+  let to = from.replace(cap, toDash)
+  // Handle `ms-xxx` -> `-ms-xxx`.
+  if (to.slice(0, 3) === 'ms-') to = '-' + to
+  return to
+}
+
 /**
  * Make `$1` capitalized.
  *

lib/state.js

@@ -63,6 +63,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 {'html' | 'svg'} Space
  *   Namespace.
@@ -97,6 +100,8 @@
  *   Current schema.
  * @property {StylePropertyNameCase} stylePropertyNameCase
  *   Casing to use for property names in `style` objects.
+ * @property {boolean} tableCellAlignToStyle
+ *   Turn obsolete `align` props on `td` and `th` into CSS `style` props.
  */
 
 import {ok as assert} from 'devlop'
@@ -143,6 +148,7 @@ export function createState(options) {
     elementAttributeNameCase: options.elementAttributeNameCase || 'react',
     schema: options.space === 'svg' ? svg : html,
     stylePropertyNameCase: options.stylePropertyNameCase || 'dom',
+    tableCellAlignToStyle: options.tableCellAlignToStyle !== false,
     // Results.
     comments: [],
     esm: [],

readme.md

@@ -268,6 +268,8 @@ Configuration (TypeScript type).
     — specify casing to use for property names in `style` objects; this casing
     is used for hast elements, not for embedded MDX JSX nodes (components that
     someone authored manually)
+*   `tableCellAlignToStyle` (`boolean`, default: `true`)
+    — turn obsolete `align` props on `td` and `th` into CSS `style` props
 
 ### `Space`
 

test.js

@@ -680,6 +680,143 @@ test('toEstree', async function (t) {
     }
   )
 
+  await t.test(
+    'should not transform `align` w/ `tableCellAlignToStyle: false`',
+    async function () {
+      assert.deepEqual(
+        toEstree(h('th', {align: 'center'}), {tableCellAlignToStyle: false}),
+        {
+          type: 'Program',
+          body: [
+            {
+              type: 'ExpressionStatement',
+              expression: {
+                type: 'JSXElement',
+                openingElement: {
+                  type: 'JSXOpeningElement',
+                  attributes: [
+                    {
+                      type: 'JSXAttribute',
+                      name: {type: 'JSXIdentifier', name: 'align'},
+                      value: {type: 'Literal', value: 'center'}
+                    }
+                  ],
+                  name: {type: 'JSXIdentifier', name: 'th'},
+                  selfClosing: true
+                },
+                closingElement: null,
+                children: []
+              }
+            }
+          ],
+          sourceType: 'module',
+          comments: []
+        }
+      )
+    }
+  )
+
+  await t.test(
+    'should transform `align` w/o `tableCellAlignToStyle`',
+    async function () {
+      assert.deepEqual(toEstree(h('th', {align: 'center'})), {
+        type: 'Program',
+        body: [
+          {
+            type: 'ExpressionStatement',
+            expression: {
+              type: 'JSXElement',
+              openingElement: {
+                type: 'JSXOpeningElement',
+                attributes: [
+                  {
+                    type: 'JSXAttribute',
+                    name: {type: 'JSXIdentifier', name: 'style'},
+                    value: {
+                      type: 'JSXExpressionContainer',
+                      expression: {
+                        type: 'ObjectExpression',
+                        properties: [
+                          {
+                            type: 'Property',
+                            method: false,
+                            shorthand: false,
+                            computed: false,
+                            key: {type: 'Identifier', name: 'textAlign'},
+                            value: {type: 'Literal', value: 'center'},
+                            kind: 'init'
+                          }
+                        ]
+                      }
+                    }
+                  }
+                ],
+                name: {type: 'JSXIdentifier', name: 'th'},
+                selfClosing: true
+              },
+              closingElement: null,
+              children: []
+            }
+          }
+        ],
+        sourceType: 'module',
+        comments: []
+      })
+    }
+  )
+
+  await t.test(
+    "should support `tableCellAlignToStyle` w/ `stylePropertyNameCase: 'css'`",
+    async function () {
+      assert.deepEqual(
+        toEstree(h('th', {align: 'center'}), {stylePropertyNameCase: 'css'}),
+        {
+          type: 'Program',
+          body: [
+            {
+              type: 'ExpressionStatement',
+              expression: {
+                type: 'JSXElement',
+                openingElement: {
+                  type: 'JSXOpeningElement',
+                  attributes: [
+                    {
+                      type: 'JSXAttribute',
+                      name: {type: 'JSXIdentifier', name: 'style'},
+                      value: {
+                        type: 'JSXExpressionContainer',
+                        expression: {
+                          type: 'ObjectExpression',
+                          properties: [
+                            {
+                              type: 'Property',
+                              method: false,
+                              shorthand: false,
+                              computed: false,
+                              key: {type: 'Literal', value: 'text-align'},
+                              value: {type: 'Literal', value: 'center'},
+                              kind: 'init'
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ],
+                  name: {type: 'JSXIdentifier', name: 'th'},
+                  selfClosing: true
+                },
+                closingElement: null,
+                children: []
+              }
+            }
+          ],
+          sourceType: 'module',
+          comments: []
+        }
+      )
+    }
+  )
+
   await t.test(
     'should use react casing for element attributes by default',
     async function () {