Isolation in embedded apps

hey there guys,

just looking for a bit of guidance… we using Uno in an embedded UI (going into customer’s websites)… and are looking for a way to isolate CSS classes and prevent interaction between the sites and the embedded ui (could be an issue with standard tailwind style css)

Ideally, we’d just run an obfuscation plugin or option to hash classes on builds, but from what I can tell, that hasn’t been implemented yet. For now, we are running the transformerCompileClass transformer, but that forces us to add a special class (:uno:) on all elements… which is a bit tedious…

Is there a better way to do this?

[antfu]

:uno: is required because otherwise, the UnoCSS won’t be able to identify what is the class and what is not. consider the following example:

const classes = 'mx1 grid' // this should be compiled
const article = 'some grid' // this should not

<div :class="classes"/>

Until someone can provide a better solution, I don’t think it’s something doable to be consider as a roadmap

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.