Clear and concise description of the problem

Use case:

Creating a component, island or extension with a single shadow root, but consisting of multiple nested components.

Currently, the shadow-dom mode requires each component to have:

• A declaration outside of the component (jsx), but inside the same module. Otherwise the styles won't get evaluated:

// Outside of a SolidJS component
const unoStyles = `@unocss-placeholder`;

• Inlined styles in each component, but applied via innerHtml as some selectors get escaped otherwise:

// inside a SolidJS component
<style ref={(ref) => (ref.innerHTML = unoStyles)} />

This both pollutes the DOM tree, impacts selector parsing performance, especially as preflight styles, normalization and other general styles are applied in each style tag, and requires the developer to write additional boilerplate in each component.

Suggested solution

The vite plugin should be able to compile all styles from every component inside the project and inject it into the virtual one, making it also importable as a string.

// do this once, in the root of the project
import unocssText from 'virtual:uno.css?inline';
// alternatively, without using vite's ?inline syntax
import unoCssInline from "virtual:uno.css.inline"


<SomeShadowRoot>
    <style>{unocssText}</style
</SomeShadowRoot>

Alternative

Make the @unocss-placeholder work on a project-level, not a file-level.

Additional context

Related issues and PRs:

#2570
#2579
#2533

Validations

• Read the Contributing Guidelines.
• Read the README.md of using the package.
• Already used the Interactive Docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.