Как переопределить плагин в пакете 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 ?


Ответы (0 шт):