unocss-inline

customize unocss css side effect

Installation

pnpm add unocss-inline

Usage

old usage

// vite.config.ts
import unocss from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [unocss()],
});

// main.ts
import 'virtual:uno.css';

new usage -> unocss-example

// vite.config.ts
import unocss from 'unocss/vite';
import unocssInline from 'unocss-inline';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [unocss(), unocssInline()],
});

// main.ts
import { createUnoStyle } from 'unocss-inline/css';

const shadowRoot = document.body
  .appendChild(document.createElement('div'))
  .attachShadow({ mode: 'open' });
shadowRoot.appendChild(createUnoStyle());

const style2 = createUnoStyle(); // independent element, also with HMR support

CSS text and subscriptions

import { unoCss } from 'unocss-inline/css';

console.log(unoCss.value); // string; the current generated CSS

const unsubscribe = unoCss.subscribe((text) => {
  console.log('CSS changed:', text);
});
// Call unsubscribe() when the consumer is disposed.

value is read-only. Subscribers receive subsequent changes, not an immediate initial callback; read unoCss.value for the initial value. This is a plain JavaScript object, not reactive framework state. Assigning its value to a DOM node or a framework state variable once does not subscribe that consumer to updates.

During development the plugin sends UnoCSS updates to subscribers. It excludes the runtime entry point from Vite dependency optimization. Production builds embed the generated CSS as a string and do not emit a stylesheet for these entry point. Use UnoCSS's default global mode and include both Vite plugins in each client and server build. A separate import 'virtual:uno.css' is not needed; adding one retains UnoCSS's normal global stylesheet side effects.

SSR / SSG

The CSS entry works without a DOM. Read unoCss.value during rendering and pass it to your framework's style element or head API to include styles in the generated HTML. For example, a Solid server-rendered component can return:

import type { JSX } from 'solid-js';
import { unoCss } from 'unocss-inline/css';

export default function UnoStyle(): JSX.Element {
  return <style>{unoCss.value}</style>;
}

Use the framework's supported serialization for style content; the exported value is CSS text, not pre-escaped HTML. Static generation captures the CSS available when the page is rendered. In development, CSS contains utilities already scanned by UnoCSS; configure content.filesystem or a safelist for classes that must be available before lazy modules load. Dynamically assembled class names still need UnoCSS extraction configuration or a safelist. Production CSS is generated after the build's modules have been scanned. It is global CSS, not a per-request or per-route stylesheet.

Importing unocss-inline/css is also safe on the server, but creating a DOM node with createUnoStyle() requires a browser. Call it after mounting on the client, for example inside Solid's onMount.

Each factory call returns a new element backed by the same CSS source. During development, these elements share CSS updates, including elements created after an update. Use another createUnoStyle() call instead of cloneNode() when you need another element with live updates.

The runtime entry has two named exports: unoCss and createUnoStyle. Replace default imports from unocss-inline/style with named imports from unocss-inline/css. The old /style entry has been removed.