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?