joker-shadow-css

An vite plugin to inject css to shadow-dom after build application

Install

pnpm add joker-shadow-css

Usage

import { defineConfig } from 'vite';
import { insertCssToJsPlaceholderPlugin } from 'joker-shadow-css';
import css from 'vite-plugin-css-injected-by-js';

let collectedCss = '';

defineConfig({
  plugins: [
      //  ... other plugins
      css({
          injectCode: (css) => {
              collectedCss = css;
              return css;
          },
      }),
      insertCssToJsPlaceholderPlugin(() => collectedCss, {
          targetFile: resolve(resolve(__dirname, 'dist'), 'integration.es.js'),
          placeholder: '"APP_STYLES_PLACEHOLDER"',
      }),
  ],
)}

  const appStyles = new CSSStyleSheet();
  appStyles.replaceSync('APP_STYLES_PLACEHOLDER);
  const shadowRoot = container.attachShadow({ mode: 'open' });

  shadowRoot.adoptedStyleSheets = [appStyles];
  shadowRoot.appendChild(wrapper);