I’m trying to use js objects like CSSType, in css method to apply style into compontent, converting object to string, but the method don’t accept use something like css${style}. Someone know a way to use use a string or object into css method?

import { Properties } from 'csstype';
import {LitElement, css, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import { convertStyle } from '../utils/convert-style';

const style: Properties = {
  color: 'blue'
}

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`${convertStyle(style)}`;

  render() {
    return html`<p>Hello, World!</p>`;
  }
}


import { Properties } from "csstype";

/***
 * this function convert a Properties object into string
*/
export function convertStyle(style: Properties) {
  return Object.entries(style)
  .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)
  .join(' ');
}