Add support for passing styles as CSS fields

Previously, all style props were passed using DOM (`backgroundColor`)
casing.
This does not work in some other JSX runtimes.
Instead, some JSX runtimes want `background-color` instead.

This adds an option for that.

This commit also fixes support for CSS custom properties (`--fg: red`),
which always have to include those initial dashes, even when setting to
the DOM.

Closes #6.
Closes #7.

Author: wooorm

index.js

@@ -4,6 +4,7 @@
  * @typedef {import('./lib/state.js').Options} Options
  * @typedef {import('./lib/state.js').Space} Space
  * @typedef {import('./lib/state.js').State} State
+ * @typedef {import('./lib/state.js').StylePropertyNameCase} StylePropertyNameCase
  */
 
 export {handlers as defaultHandlers} from './lib/handlers/index.js'

lib/handlers/element.js

@@ -7,6 +7,10 @@
  * @typedef {import('../state.js').State} State
  */
 
+/**
+ * @typedef {Record<string, string>} Style
+ */
+
 import {stringify as commas} from 'comma-separated-tokens'
 import {svg, find, hastToReact} from 'property-information'
 import {stringify as spaces} from 'space-separated-tokens'
@@ -17,6 +21,8 @@ import {
 import styleToObject from 'style-to-object'
 
 const own = {}.hasOwnProperty
+const cap = /[A-Z]/g
+const dashSomething = /-([a-z])/g
 
 /**
  * Turn a hast element into an estree node.
@@ -77,26 +83,30 @@ export function element(node, state) {
       }
 
       if (prop === 'style') {
-        /** @type {Record<string, string>} */
-        // @ts-expect-error Assume `value` is an object otherwise.
-        const styleValue =
-          typeof value === 'string' ? parseStyle(value, node.tagName) : value
+        let styleObject =
+          typeof value === 'object'
+            ? value
+            : parseStyle(String(value), node.tagName)
+
+        if (state.stylePropertyNameCase === 'css') {
+          styleObject = transformStyleToCssCasing(styleObject)
+        }
 
         /** @type {Array<Property>} */
         const cssProperties = []
         /** @type {string} */
         let cssProp
 
-        for (cssProp in styleValue) {
+        for (cssProp in styleObject) {
           // eslint-disable-next-line max-depth
-          if (own.call(styleValue, cssProp)) {
+          if (own.call(styleObject, cssProp)) {
             cssProperties.push({
               type: 'Property',
               method: false,
               shorthand: false,
               computed: false,
               key: {type: 'Identifier', name: cssProp},
-              value: {type: 'Literal', value: String(styleValue[cssProp])},
+              value: {type: 'Literal', value: String(styleObject[cssProp])},
               kind: 'init'
             })
           }
@@ -174,11 +184,11 @@ export function element(node, state) {
  *   CSS text.
  * @param {string} tagName
  *   Element name.
- * @returns {Record<string, string>}
+ * @returns {Style}
  *   Props.
  */
 function parseStyle(value, tagName) {
-  /** @type {Record<string, string>} */
+  /** @type {Style} */
   const result = {}
 
   try {
@@ -203,25 +213,68 @@ function parseStyle(value, tagName) {
    *   Nothing.
    */
   function iterator(name, value) {
-    if (name.slice(0, 4) === '-ms-') name = 'ms-' + name.slice(4)
-    result[name.replace(/-([a-z])/g, styleReplacer)] = value
+    let key = name
+
+    if (key.slice(0, 2) !== '--') {
+      // See: <https://alanhogan.com/code/vendor-prefixed-css-property-names-in-javascript>
+      if (key.slice(0, 4) === '-ms-') key = 'ms-' + key.slice(4)
+      key = key.replace(dashSomething, toCamel)
+    }
+
+    result[key] = value
+  }
+}
+
+/**
+ * Transform a DOM casing style object to a CSS casing style object.
+ *
+ * @param {Style} domCasing
+ * @returns {Style}
+ */
+function transformStyleToCssCasing(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]
+    }
   }
+
+  return cssCasing
 }
 
 /**
- * Uppercase `$1`.
+ * Make `$1` capitalized.
  *
  * @param {string} _
  *   Whatever.
  * @param {string} $1
- *   an ASCII alphabetic.
+ *   Single ASCII alphabetical.
  * @returns {string}
- *   Uppercased `$1`.
+ *   Capitalized `$1`.
  */
-function styleReplacer(_, $1) {
+function toCamel(_, $1) {
   return $1.toUpperCase()
 }
 
+/**
+ * Make `$0` dash cased.
+ *
+ * @param {string} $0
+ *   Capitalized ASCII leter.
+ * @returns {string}
+ *   Dash and lower letter.
+ */
+function toDash($0) {
+  return '-' + $0.toLowerCase()
+}
+
 /**
  * Checks if the given string is a valid identifier name.
  *

lib/state.js

@@ -47,16 +47,22 @@
  * @returns {JsxChild | null | undefined | void}
  *   estree node.
  *
- * @typedef {'react' | 'html'} ElementAttributeNameCase
+ * @typedef {'html' | 'react'} ElementAttributeNameCase
  *   Specify casing to use for attribute names.
  *
- *   React casing is for example `className`, `strokeLinecap`, `xmlLang`.
  *   HTML casing is for example `class`, `stroke-linecap`, `xml:lang`.
+ *   React casing is for example `className`, `strokeLinecap`, `xmlLang`.
+ *
+ * @typedef {'css' | 'dom'} StylePropertyNameCase
+ *   Casing to use for property names in `style` objects.
+ *
+ *   CSS casing is for example `background-color` and `-webkit-line-clamp`.
+ *   DOM casing is for example `backgroundColor` and `WebkitLineClamp`.
  *
  * @typedef Options
  *   Configuration.
  * @property {ElementAttributeNameCase | null | undefined} [elementAttributeNameCase='react']
- *   Casing to use for attribute names.
+ *   Specify casing to use for attribute names.
  *
  *   This casing is used for hast elements, not for embedded MDX JSX nodes
  *   (components that someone authored manually).
@@ -68,13 +74,20 @@
  *   When an `<svg>` element is found in the HTML space, this package already
  *   automatically switches to and from the SVG space when entering and exiting
  *   it.
+ * @property {StylePropertyNameCase | null | undefined} [stylePropertyNameCase='dom']
+ *   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).
  *
  * @typedef State
  *   Info passed around about the current state.
  * @property {Schema} schema
  *   Current schema.
  * @property {ElementAttributeNameCase} elementAttributeNameCase
  *   Casing to use for attribute names.
+ * @property {StylePropertyNameCase} stylePropertyNameCase
+ *   Casing to use for property names in `style` objects.
  * @property {Array<Comment>} comments
  *   List of estree comments.
  * @property {Array<Directive | Statement | ModuleDeclaration>} esm
@@ -131,6 +144,7 @@ export function createState(options) {
     // Current space.
     schema: options.space === 'svg' ? svg : html,
     elementAttributeNameCase: options.elementAttributeNameCase || 'react',
+    stylePropertyNameCase: options.stylePropertyNameCase || 'dom',
     // Results.
     comments: [],
     esm: [],

readme.md

@@ -24,6 +24,7 @@
     *   [`Options`](#options)
     *   [`Space`](#space)
     *   [`State`](#state)
+    *   [`StylePropertyNameCase`](#stylepropertynamecase)
 *   [Types](#types)
 *   [Compatibility](#compatibility)
 *   [Security](#security)
@@ -198,13 +199,13 @@ Each key is a node type, each value is a [`Handle`][api-handle].
 
 Specify casing to use for attribute names (TypeScript type).
 
-React casing is for example `className`, `strokeLinecap`, `xmlLang`.
 HTML casing is for example `class`, `stroke-linecap`, `xml:lang`.
+React casing is for example `className`, `strokeLinecap`, `xmlLang`.
 
 ###### Type
 
 ```ts
-type ElementAttributeNameCase = 'react' | 'html'
+type ElementAttributeNameCase = 'html' | 'react'
 ```
 
 ### `Handle`
@@ -242,6 +243,12 @@ Configuration (TypeScript type).
     which space the document is in; when an `<svg>` element is found in the
     HTML space, this package already automatically switches to and from the SVG
     space when entering and exiting it
+*   `stylePropertyNameCase`
+    ([`StylePropertyNameCase`][api-style-property-name-case],
+    default: `'dom'`)
+    — 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)
 
 ### `Space`
 
@@ -282,13 +289,27 @@ Info passed around about the current state (TypeScript type).
 *   `createJsxElementName` (`(name: string) => EstreeJsxElementName`)
     — create a JSX attribute name
 
+### `StylePropertyNameCase`
+
+Casing to use for property names in `style` objects (TypeScript type).
+
+CSS casing is for example `background-color` and `-webkit-line-clamp`.
+DOM casing is for example `backgroundColor` and `WebkitLineClamp`.
+
+###### Type
+
+```ts
+type StylePropertyNameCase = 'dom' | 'css'
+```
+
 ## Types
 
 This package is fully typed with [TypeScript][].
 It exports the additional types
 [`ElementAttributeNameCase`][api-element-attribute-name-case],
 [`Handle`][api-handle], [`Options`][api-options],
-[`Space`][api-space], and [`State`][api-state].
+[`Space`][api-space], [`State`][api-state], and
+[`StylePropertyNameCase`][api-style-property-name-case].
 
 ## Compatibility
 
@@ -406,3 +427,5 @@ abide by its terms.
 [api-space]: #space
 
 [api-state]: #state
+
+[api-style-property-name-case]: #stylepropertynamecase

test.js

@@ -611,6 +611,54 @@ test('toEstree', () => {
     '<div id="a" class="b c">{"d"}</div>;\n',
     "should support `elementAttributeNameCase: 'html'`"
   )
+
+  assert.equal(
+    toJs(toEstree(h('h1', {style: 'background-color: red;'}, 'x')), {
+      handlers: jsx
+    }).value,
+    '<h1 style={{\n  backgroundColor: "red"\n}}>{"x"}</h1>;\n',
+    'should use react casing for css properties by default'
+  )
+
+  assert.equal(
+    toJs(
+      toEstree(h('h1', {style: 'background-color: red;'}, 'x'), {
+        stylePropertyNameCase: 'css'
+      }),
+      {handlers: jsx}
+    ).value,
+    '<h1 style={{\n  background-color: "red"\n}}>{"x"}</h1>;\n',
+    "should support `stylePropertyNameCase: 'css'`"
+  )
+
+  assert.equal(
+    toJs(
+      toEstree(
+        h('h1', {
+          style:
+            '-webkit-transform: rotate(0.01turn); -ms-transform: rotate(0.01turn); --fg: #0366d6; color: var(--fg)'
+        })
+      ),
+      {handlers: jsx}
+    ).value,
+    '<h1 style={{\n  WebkitTransform: "rotate(0.01turn)",\n  msTransform: "rotate(0.01turn)",\n  --fg: "#0366d6",\n  color: "var(--fg)"\n}} />;\n',
+    'should support vendor prefixes and css variables (dom)'
+  )
+
+  assert.equal(
+    toJs(
+      toEstree(
+        h('h1', {
+          style:
+            '-webkit-transform: rotate(0.01turn); -ms-transform: rotate(0.01turn); --fg: #0366d6; color: var(--fg)'
+        }),
+        {stylePropertyNameCase: 'css'}
+      ),
+      {handlers: jsx}
+    ).value,
+    '<h1 style={{\n  -webkit-transform: "rotate(0.01turn)",\n  -ms-transform: "rotate(0.01turn)",\n  --fg: "#0366d6",\n  color: "var(--fg)"\n}} />;\n',
+    'should support vendor prefixes and css variables (css)'
+  )
 })
 
 test('integration (babel)', () => {