improve style attribute splitting

Author: quantizor

.changeset/proud-mugs-beg.md

@@ -0,0 +1,5 @@
+---
+'markdown-to-jsx': patch
+---
+
+Improve splitting of style attributes.

index.compiler.spec.tsx

@@ -1443,30 +1443,17 @@ describe('links', () => {
     jest.spyOn(console, 'warn').mockImplementation(() => {})
     jest.spyOn(console, 'error').mockImplementation(() => {})
 
-    // TODO: something is off on parsing here, because this prints:
-    // console.error("Warning: Unknown prop `javascript:alert` on <img> tag"...)
-    // Which it shouldn't
-    render(compiler('<img src="`<javascript:alert>`(\'alertstr\')"'))
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        <img>
-        \`('alertstr')"
-      </span>
-    `)
+    render(compiler('<img src="`<javascript:alert>`(\'alertstr\')" />'))
+    expect(root.innerHTML).toMatchInlineSnapshot(`<img>`)
     expect(console.warn).toHaveBeenCalled()
   })
 
   it('should sanitize html images containing weird parsing src=s', () => {
     jest.spyOn(console, 'warn').mockImplementation(() => {})
     jest.spyOn(console, 'error').mockImplementation(() => {})
 
-    render(compiler('<img src="`<src="javascript:alert(`xss`)">`'))
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        <img src="\`<src=">
-        \`
-      </span>
-    `)
+    render(compiler('<img src="<src=\\"javascript:alert(`xss`)">'))
+    expect(root.innerHTML).toMatchInlineSnapshot(`<img>`)
     expect(console.warn).toHaveBeenCalled()
   })
 
@@ -1486,6 +1473,22 @@ describe('links', () => {
     expect(console.warn).toHaveBeenCalled()
   })
 
+  it('should not sanitize style attribute with an acceptable data image payload', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    render(
+      compiler(
+        '<div style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==); color: red;">'
+      )
+    )
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <div style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==); color: red;">
+      </div>
+    `)
+    expect(console.warn).not.toHaveBeenCalled()
+  })
+
   it('should handle a link with a URL in the text', () => {
     render(
       compiler('[https://www.google.com *heck yeah*](http://www.google.com)')

index.tsx

@@ -753,28 +753,85 @@ function normalizeAttributeKey(key) {
   return key
 }
 
+type StyleTuple = [key: string, value: string]
+
+function parseStyleAttribute(styleString: string): StyleTuple[] {
+  const styles: StyleTuple[] = []
+  let buffer = ''
+  let inUrl = false
+  let inQuotes = false
+  let quoteChar: '"' | "'" | '' = ''
+
+  if (!styleString) return styles
+
+  for (let i = 0; i < styleString.length; i++) {
+    const char = styleString[i]
+
+    // Handle quotes
+    if ((char === '"' || char === "'") && !inUrl) {
+      if (!inQuotes) {
+        inQuotes = true
+        quoteChar = char
+      } else if (char === quoteChar) {
+        inQuotes = false
+        quoteChar = ''
+      }
+    }
+
+    // Track url() values
+    if (char === '(' && buffer.endsWith('url')) {
+      inUrl = true
+    } else if (char === ')' && inUrl) {
+      inUrl = false
+    }
+
+    // Only split on semicolons when not in quotes or url()
+    if (char === ';' && !inQuotes && !inUrl) {
+      const declaration = buffer.trim()
+      if (declaration) {
+        const colonIndex = declaration.indexOf(':')
+        if (colonIndex > 0) {
+          const key = declaration.slice(0, colonIndex).trim()
+          const value = declaration.slice(colonIndex + 1).trim()
+          styles.push([key, value])
+        }
+      }
+      buffer = ''
+    } else {
+      buffer += char
+    }
+  }
+
+  // Handle the last declaration
+  const declaration = buffer.trim()
+  if (declaration) {
+    const colonIndex = declaration.indexOf(':')
+    if (colonIndex > 0) {
+      const key = declaration.slice(0, colonIndex).trim()
+      const value = declaration.slice(colonIndex + 1).trim()
+      styles.push([key, value])
+    }
+  }
+
+  return styles
+}
+
 function attributeValueToJSXPropValue(
   tag: MarkdownToJSX.HTMLTags,
   key: keyof React.AllHTMLAttributes<Element>,
   value: string,
   sanitizeUrlFn: MarkdownToJSX.Options['sanitizer']
 ): any {
   if (key === 'style') {
-    return value.split(/;\s?/).reduce(function (styles, kvPair) {
-      const key = kvPair.slice(0, kvPair.indexOf(':'))
-
+    return parseStyleAttribute(value).reduce(function (styles, [key, value]) {
       // snake-case to camelCase
       // also handles PascalCasing vendor prefixes
-      const camelCasedKey = key
-        .trim()
-        .replace(/(-[a-z])/g, substr => substr[1].toUpperCase())
+      const camelCasedKey = key.replace(/(-[a-z])/g, substr =>
+        substr[1].toUpperCase()
+      )
 
       // key.length + 1 to skip over the colon
-      styles[camelCasedKey] = sanitizeUrlFn(
-        kvPair.slice(key.length + 1).trim(),
-        tag,
-        key
-      )
+      styles[camelCasedKey] = sanitizeUrlFn(value, tag, key)
 
       return styles
     }, {})
@@ -1633,7 +1690,6 @@ export function compiler(
       order: Priority.HIGH,
       parse(capture /*, parse, state*/) {
         const tag = capture[1].trim() as MarkdownToJSX.HTMLTags
-
         return {
           attrs: attrStringToMap(tag, capture[2] || ''),
           tag,

package.json

@@ -110,6 +110,7 @@
     }
   ],
   "jest": {
+    "clearMocks": true,
     "testEnvironment": "jsdom",
     "transform": {
       "^.+\\.[tj]sx?$": [