Fixes an issue where inferno-server renders empty style attribute if

provided style prop is empty object
infernojs · Mar 2, 2024 · 192a650 · 192a650
1 parent 26af472
commit 192a650
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 12 deletions.
diff --git a/packages/inferno-server/__tests__/creation-queuestream.spec.server.jsx b/packages/inferno-server/__tests__/creation-queuestream.spec.server.jsx
@@ -426,7 +426,7 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
           style={{ 'background-color': null, 'border-bottom-color': null }}
         />
       ),
-      result: '<div style=""></div>',
+      result: '<div></div>',
     },
     {
       description: 'Should style attribute if null',
@@ -449,6 +449,31 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
       template: () => <div style={{ opacity: 0.8 }} />,
       result: '<div style="opacity:0.8;"></div>',
     },
+    {
+      description: 'Should not render empty style attribute #1',
+      template: () => <div style={{ }} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #2',
+      template: () => <div style={null} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #3',
+      template: () => <div style={false} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #4',
+      template: () => <div style={0} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #5',
+      template: () => <div style={true} />,
+      result: '<div></div>',
+    },
     {
       description: 'Should render style opacity #2',
       template: () => <div style="opacity:0.8;" />,

diff --git a/packages/inferno-server/__tests__/creation-stream.spec.server.jsx b/packages/inferno-server/__tests__/creation-stream.spec.server.jsx
@@ -142,6 +142,31 @@ describe('SSR Creation Streams - (non-JSX)', () => {
       template: () => createElement('div', { style: { opacity: 0.8 } }),
       result: '<div style="opacity:0.8;"></div>'
     },
+    {
+      description: 'Should not render empty style attribute #1',
+      template: () => <div style={{ }} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #2',
+      template: () => <div style={null} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #3',
+      template: () => <div style={false} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #4',
+      template: () => <div style={0} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #5',
+      template: () => <div style={true} />,
+      result: '<div></div>',
+    },
     {
       description: 'Should render div className as number',
       template: () => createElement('div', { className: 123 }),
@@ -250,7 +275,7 @@ describe('SSR Creation Streams - (non-JSX)', () => {
     {
       description: 'Should not render null styles',
       template: () => <div style={{ 'background-color': null, 'border-bottom-color': null }} />,
-      result: '<div style=""></div>'
+      result: '<div></div>'
     },
     {
       description: 'Should style attribute if null',

diff --git a/packages/inferno-server/__tests__/creation.spec.server.jsx b/packages/inferno-server/__tests__/creation.spec.server.jsx
@@ -112,7 +112,7 @@ describe('SSR Creation (JSX)', () => {
     {
       description: 'Should not render null styles',
       template: () => <div style={{ 'background-color': null, 'border-bottom-color': null }} />,
-      result: '<div style=""></div>'
+      result: '<div></div>'
     },
     {
       description: 'Should style attribute if null',
@@ -134,6 +134,31 @@ describe('SSR Creation (JSX)', () => {
       template: () => <div style="opacity:0.8;" />,
       result: '<div style="opacity:0.8;"></div>'
     },
+    {
+      description: 'Should not render empty style attribute #1',
+      template: () => <div style={{ }} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #2',
+      template: () => <div style={null} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #3',
+      template: () => <div style={false} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #4',
+      template: () => <div style={0} />,
+      result: '<div></div>',
+    },
+    {
+      description: 'Should not render empty style attribute #5',
+      template: () => <div style={true} />,
+      result: '<div></div>',
+    },
     {
       description: 'Should render div className as number',
       template: () => <div className={123} />,

diff --git a/packages/inferno-server/src/prop-renderers.ts b/packages/inferno-server/src/prop-renderers.ts
@@ -1,6 +1,6 @@
 import { isString, isStringOrNumber } from 'inferno-shared';
 
-export function renderStylesToString(styles: string | object): string {
+function parseStyleAsString(styles: string | object): string {
   if (isString(styles)) {
     return styles;
   } else {
@@ -15,3 +15,13 @@ export function renderStylesToString(styles: string | object): string {
     return renderedString;
   }
 }
+
+export function renderStyleAttribute(styles: string | object): string {
+  const stylesString = parseStyleAsString(styles);
+
+  if (stylesString) {
+    return ` style="${stylesString}"`;
+  }
+
+  return '';
+}
diff --git a/packages/inferno-server/src/renderToString.queuestream.ts b/packages/inferno-server/src/renderToString.queuestream.ts
@@ -12,7 +12,7 @@ import {
 } from 'inferno-shared';
 import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
 import { Readable } from 'stream';
-import { renderStylesToString } from './prop-renderers';
+import { renderStyleAttribute } from './prop-renderers';
 import {
   createDerivedState,
   escapeText,
@@ -227,9 +227,7 @@ export class RenderQueueStream extends Readable {
               break;
             case 'style':
               if (!isNullOrUndef(props.style)) {
-                renderedString += ` style="${renderStylesToString(
-                  props.style,
-                )}"`;
+                renderedString += renderStyleAttribute(props.style);
               }
               break;
             case 'children':

diff --git a/packages/inferno-server/src/renderToString.stream.ts b/packages/inferno-server/src/renderToString.stream.ts
@@ -10,7 +10,7 @@ import {
 } from 'inferno-shared';
 import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
 import { Readable } from 'stream';
-import { renderStylesToString } from './prop-renderers';
+import { renderStyleAttribute } from './prop-renderers';
 import {
   createDerivedState,
   escapeText,
@@ -209,7 +209,7 @@ export class RenderStream extends Readable {
             break;
           case 'style':
             if (!isNullOrUndef(props.style)) {
-              renderedString += ` style="${renderStylesToString(props.style)}"`;
+              renderedString += renderStyleAttribute(props.style);
             }
             break;
           case 'children':

diff --git a/packages/inferno-server/src/renderToString.ts b/packages/inferno-server/src/renderToString.ts
@@ -10,7 +10,7 @@ import {
   throwError,
 } from 'inferno-shared';
 import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
-import { renderStylesToString } from './prop-renderers';
+import { renderStyleAttribute } from './prop-renderers';
 import {
   createDerivedState,
   escapeText,
@@ -124,7 +124,7 @@ function renderVNodeToString(vNode, parent, context): string {
             break;
           case 'style':
             if (!isNullOrUndef(props.style)) {
-              renderedString += ` style="${renderStylesToString(props.style)}"`;
+              renderedString += renderStyleAttribute(props.style);
             }
             break;
           case 'children':