Как переопределить плагин в пакете vite для стилей?
У меня есть проект написанный на React который собирается vite
Мой конфиг
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),
},
},
},
},
});
При сборке стили попадают в head страницы, а мне надо, что бы они добавлялись в shadow dom.
Я нашел, где это можно изменить. Это добавление происходит в модуле vite:css-post
function cssPostPlugin(config) {
return {
name: 'vite:css-post'
....
}
}
В функции
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) {
}
// Здесь я заменил document.head на document.body.shadowRoot
document.body.shadowRoot.appendChild(style);
}
....
}
Как только я здесь поправил точку куда будут добавляться стили, все заработало.
Как мне переопределить эту функцию внутри vite.config.ts ?