My project is assembled using the vite package.
I need add all style in shadow dom.
I didn’t find a plugin that could do this.
My config
import react from '@vitejs/plugin-react';
import * as path from 'path';
import { defineConfig, splitVendorChunkPlugin } from 'vite';
import htmlPlugin from 'vite-plugin-html-config';
import { dependencies } from './package.json';
const exclVendors = ['react', 'react-router-dom', 'react-dom'];
function renderChunks(deps: Record<string, string>) {
let chunks = {};
Object.keys(deps).forEach((key) => {
if (exclVendors.includes(key)) return;
chunks[key] = [key];
});
return chunks;
}
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 8082,
}
envPrefix: 'APP_',
resolve: {
alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
},
plugins: [
react(),
htmlPlugin({ favicon: './src/assets/logo.svg' }),
splitVendorChunkPlugin(),
],
build: {
sourcemap: false,
rollupOptions: {
output: {
manualChunks: {
...renderChunks(dependencies),
},
},
},
},
});
But I found a module that does this.
it is plugin in vite with name ‘vite:css-post’
function cssPostPlugin(config) {
return {
name: 'vite:css-post'
....
}
}
In
function updateStyle(id, content) {
....
if (!style) {
style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.setAttribute('data-vite-dev-id', id);
style.textContent = content;
try {
const shadow = document.body.attachShadow({mode: 'open'});
} catch (e) {
}
// It is i chenged *document.head* to document.body.shadowRoot
document.body.shadowRoot.appendChild(style);
}
....
}
if change one line all work.
document.body.shadowRoot.appendChild(style);
How can I override this function in vite.config.ts ?