diff --git a/packages/inferno-server/__tests__/creation-queuestream.spec.server.jsx b/packages/inferno-server/__tests__/creation-queuestream.spec.server.jsx index 26ec9b9ae..0bd1f1232 100644 --- 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: '
', + result: '
', }, { description: 'Should style attribute if null', @@ -449,6 +449,31 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => { template: () =>
, result: '
', }, + { + description: 'Should not render empty style attribute #1', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #2', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #3', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #4', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #5', + template: () =>
, + result: '
', + }, { description: 'Should render style opacity #2', template: () =>
, diff --git a/packages/inferno-server/__tests__/creation-stream.spec.server.jsx b/packages/inferno-server/__tests__/creation-stream.spec.server.jsx index 65a5345bf..30c33ee70 100644 --- 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: '
' }, + { + description: 'Should not render empty style attribute #1', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #2', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #3', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #4', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #5', + template: () =>
, + result: '
', + }, { 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: () =>
, - result: '
' + result: '
' }, { 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 index 39aca42ae..816a5f8a0 100644 --- 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: () =>
, - result: '
' + result: '
' }, { description: 'Should style attribute if null', @@ -134,6 +134,31 @@ describe('SSR Creation (JSX)', () => { template: () =>
, result: '
' }, + { + description: 'Should not render empty style attribute #1', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #2', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #3', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #4', + template: () =>
, + result: '
', + }, + { + description: 'Should not render empty style attribute #5', + template: () =>
, + result: '
', + }, { description: 'Should render div className as number', template: () =>
, diff --git a/packages/inferno-server/src/prop-renderers.ts b/packages/inferno-server/src/prop-renderers.ts index c54e3ed51..3125f651f 100644 --- 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 index a495bf464..ad7798d4a 100644 --- 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 index d9a55426f..4ff4c7263 100644 --- 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 index 1ecd4512c..a72aa3137 100644 --- 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':