Merge pull request #2452 from Lay-quq/contrib/html-react-parser-style-case

Author: remarkablemark

__tests__/attributes-to-props/index.test.ts

@@ -280,6 +280,15 @@ describe('attributesToProps with SVG attribute', () => {
 describe('attributesToProps with style attribute', () => {
   const propsEmptyStyle = { style: {} };
 
+  it.each(['style', 'STYLE', 'StYlE'])(
+    'converts %s to a style object',
+    (attributeName) => {
+      expect(
+        attributesToProps({ [attributeName]: 'color: red; font-size: 12px' }),
+      ).toEqual({ style: { color: 'red', fontSize: '12px' } });
+    },
+  );
+
   it.each([undefined, null] as unknown as string[])(
     'does not parse invalid value: %s',
     (style) => {

__tests__/index.test.tsx

@@ -236,7 +236,17 @@ describe('htmlparser2 option', () => {
   });
 });
 
-describe('invalid styles', () => {
+describe('styles', () => {
+  it.each(['style', 'STYLE', 'StYlE'])(
+    'renders an element with a %s attribute',
+    (attributeName) => {
+      const html = `<p ${attributeName}="color: red; font-size: 12px">Hello</p>`;
+      expect(render(parse(html) as React.JSX.Element)).toBe(
+        '<p style="color:red;font-size:12px">Hello</p>',
+      );
+    },
+  );
+
   it('copes with invalid styles', () => {
     const html = '<p style="font - size: 1em">X</p>';
     const reactElement = parse(html) as React.JSX.Element;

src/attributes-to-props.ts

@@ -84,6 +84,11 @@ export default function attributesToProps(
 
       props[propName] = attributeValue;
 
+      // transform inline style to object after normalizing the attribute name
+      if (propName === 'style') {
+        setStyleProp(attributeValue, props);
+      }
+
       switch (propertyInfo?.type) {
         case BOOLEAN:
           props[propName] = true;
@@ -103,9 +108,6 @@ export default function attributesToProps(
     }
   }
 
-  // transform inline style to object
-  setStyleProp(attributes.style, props);
-
   return props;
 }