stringifyStyleObject.Function.stringifyStyleObject - GyldendalDigital/kobber GitHub Wiki

@gyldendal/kobber-components / stringifyStyleObject / stringifyStyleObject

stringifyStyleObject(selector, styles): string

Defined in: packages/kobber-components/src/utils/stringifyStyleObject.ts:78

Converts an object with CSS properties and values to a CSS string using stylis.
Useful for adding responsive properties to web components.

Parameters

selector

string

styles

Readonly<CssDeclarations>

Returns

string

Examples

Example using media queries.

stringifyStyleObject(
  ".grid",
  {
    display: "grid",
    "grid-template-columns": {
      "(max-width: 639px)": "repeat(4, 1fr)",
      "(min-width: 640px)": "repeat(6, 1fr)"
    }
  })

Outputs a string which can then be rendered into a <style>-element:

.grid {
  display: grid;
}

@media (max-width: 639px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Can be used as responsive properties in Lit elements:

@customElement("my-grid")
export class MyGrid extends LitElement {

  @property({ attribute: "grid-template-columns" })
  gridTemplateColumns?: string | Record<string, string>;

  render() {
    return html`
      <style>
        ${stringifyStyleObject(":host", { gridTemplateColumns: this.gridTemplateColumns })}
      </style>
      <slot />
    `;
  }
}

<my-grid
  .gridTemplateColumns={{
    "(max-width: 639px)": "repeat(4, 1fr)",
    "(min-width: 640px)": "repeat(6, 1fr)",
  }}
></my-grid>