ssrStyle

Renders a style attribute from a style value: the helper the compiler's server output calls for style and style: attributes.

Renders a style attribute from a style value: the helper the compiler's server output calls for style and style: attributes. Sources in an array are written in order, so a later declaration wins in CSS.

Import#

import { ssrStyle } from "@shadow-js/web/server";

Signature#

function ssrStyle(value: unknown): string

Parameters#

Name Description

value A string (written as is), an object of properties, or an array of strings and objects (not nested). Object keys are camelCase (converted to kebab-case, msTransform gives -ms-transform), kebab-case, or custom properties (--gap, kept). null, undefined and false values are skipped; a number is in pixels unless it is 0, the property is unitless (opacity, zIndex, ...) or a custom property, as in React. A value that could end its own declaration (a ;, { or } outside quotes and parentheses, or an unbalanced quote or parenthesis) is dropped.

Name	Description
`value`	A string (written as is), an object of properties, or an array of strings and objects (not nested). Object keys are camelCase (converted to kebab-case, `msTransform` gives `-ms-transform`), kebab-case, or custom properties (`--gap`, kept). `null`, `undefined` and `false` values are skipped; a number is in pixels unless it is `0`, the property is unitless (`opacity`, `zIndex`, ...) or a custom property, as in React. A value that could end its own declaration (a `;`, `{` or `}` outside quotes and parentheses, or an unbalanced quote or parenthesis) is dropped.

Returns#

Markup such as ' style="color:red"' (HTML-escaped), or "" when there is nothing to write.

Throws#

TypeError INVALID_STYLE_PROPERTY for an invalid property name, UNRECOGNIZED_INSERT_VALUE for a symbol or a value that is not a string, object or array, and a TypeError for a nested array.

Examples#

import { ssrStyle } from "@shadow-js/web/server";

ssrStyle({ backgroundColor: "red", width: 10, "--gap": "4px" });
// ' style="background-color:red;width:10px;--gap:4px"'
ssrStyle([{ color: "red" }, "color: blue"]); // the later declaration wins