Add ignoreInvalidStyle option to swallow error

Author: wooorm

lib/index.js

@@ -80,6 +80,9 @@
  *
  *   Passed in source info to `jsxDEV` when using the automatic runtime with
  *   `development: true`.
+ * @property {boolean | null | undefined} [ignoreInvalidStyle=false]
+ *   Ignore invalid CSS in `style` props (default: `false`);
+ *   the default behavior is to throw an error.
  * @property {boolean | null | undefined} [passKeys=true]
  *   Generate keys to optimize frameworks that support them (default: `true`).
  *
@@ -170,6 +173,8 @@
  *   Casing to use for attribute names.
  * @property {string | undefined} filePath
  *   File path.
+ * @property {boolean} ignoreInvalidStyle
+ *   Ignore invalid CSS in `style` props.
  * @property {boolean} passKeys
  *   Generate keys to optimize frameworks that support them.
  * @property {boolean} passNode
@@ -285,6 +290,7 @@ export function toJsxRuntime(tree, options) {
     create,
     elementAttributeNameCase: options.elementAttributeNameCase || 'react',
     filePath,
+    ignoreInvalidStyle: options.ignoreInvalidStyle || false,
     passKeys: options.passKeys !== false,
     passNode: options.passNode || false,
     schema: options.space === 'svg' ? svg : html,
@@ -607,19 +613,20 @@ function parseStyle(state, ancestors, value) {
   try {
     styleToObject(value, replacer)
   } catch (error) {
-    const cause = /** @type {Error} */ (error)
-
-    const message = new VFileMessage('Cannot parse `style` attribute', {
-      ancestors,
-      cause,
-      source: 'hast-util-to-jsx-runtime',
-      ruleId: 'style'
-    })
-    message.file = state.filePath || undefined
-    message.url =
-      'https://github.com/syntax-tree/hast-util-to-jsx-runtime#cannot-parse-style-attribute'
-
-    throw message
+    if (!state.ignoreInvalidStyle) {
+      const cause = /** @type {Error} */ (error)
+      const message = new VFileMessage('Cannot parse `style` attribute', {
+        ancestors,
+        cause,
+        source: 'hast-util-to-jsx-runtime',
+        ruleId: 'style'
+      })
+      message.file = state.filePath || undefined
+      message.url =
+        'https://github.com/syntax-tree/hast-util-to-jsx-runtime#cannot-parse-style-attribute'
+
+      throw message
+    }
   }
 
   return result

readme.md

@@ -170,6 +170,8 @@ CSS, and pass it as an object.
 But when broken CSS is used, such as `style="color:red; /*"`, we crash.
 
 To solve the error, make sure authors write valid CSS.
+Alternatively, pass `options.ignoreInvalidStyle: true` to swallow theses
+errors.
 
 ### `Options`
 

test/index.js

@@ -341,6 +341,21 @@ test('properties', async function (t) {
     }
   )
 
+  await t.test(
+    'should not crash on invalid style strings w/ `ignoreInvalidStyle`',
+    async function () {
+      assert.equal(
+        renderToStaticMarkup(
+          toJsxRuntime(h('div', {style: 'color:red; /*'}), {
+            ...production,
+            ignoreInvalidStyle: true
+          })
+        ),
+        '<div></div>'
+      )
+    }
+  )
+
   await t.test('should support properties in the SVG space', async function () {
     assert.equal(
       renderToStaticMarkup(