convert unocss classes to inline style

273 Views Asked by At

I'm migrating a svelte.kit project from windicss to unocss, but in some places of code I need to convert windicss classes to css styles in the html tags. It's occurs because a need to convert classes from content of a html element to convert in a microsoft word file or a email body. So, microsoft word and many email clients don't recognize css classes from windicss, then I convert to inline styles. I used this instructions with success:

import Processor from 'windicss';
const processor = new Processor();

export function windi(classes: string | string[], ...values: string[]): string {
  const strings = typeof classes == 'string' ? [classes] : classes;

  const str = strings.reduce((query, queryPart, i) => {
    const valueExists = i < values.length;
    const text = query + queryPart;

    return valueExists ? text + values[i] : text;
  }, '');

  const result = processor.interpret(str);
  return result.styleSheet.children
    .map((child) => {
      return child.property.map((p) => `${p.name}: ${p.value}${p.important ? '!important' : ''};`).join('');
    })
    .join('');
}

In unocss, it's possible to convert the classes in a html element to pure css styles inline?

0

There are 0 best solutions below