joker-shadow-css

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

Install

1pnpm add joker-shadow-css

Usage

1import { defineConfig } from 'vite';
2import { insertCssToJsPlaceholderPlugin } from 'joker-shadow-css';
3import css from 'vite-plugin-css-injected-by-js';
4
5let collectedCss = '';
6
7defineConfig({
8  plugins: [
9      //  ... other plugins
10      css({
11          injectCode: (css) => {
12              collectedCss = css;
13              return css;
14          },
15      }),
16      insertCssToJsPlaceholderPlugin(() => collectedCss, {
17          targetFile: resolve(resolve(__dirname, 'dist'), 'integration.es.js'),
18          placeholder: '"APP_STYLES_PLACEHOLDER"',
19      }),
20  ],
21)}

1  const appStyles = new CSSStyleSheet();
2  appStyles.replaceSync('APP_STYLES_PLACEHOLDER);
3  const shadowRoot = container.attachShadow({ mode: 'open' });
4
5  shadowRoot.adoptedStyleSheets = [appStyles];
6  shadowRoot.appendChild(wrapper);