Skip to content

lisonge/unocss-inline

Repository files navigation

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 -> playground/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 unoStyle from 'unocss-inline/style'; // with hmr support

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

const style2 = unoStyle.cloneNode(true); // also hmr support

About

customize unocss css side effect

Topics

Resources

Stars

Watchers

Forks

Contributors