如何在Vite中重写vite:css-post模块的updateStyle函数？

可通过自定义Vite插件拦截并修改内置vite:css-post模块的updateStyle函数，实现将样式注入document.body.shadowRoot的需求，具体实现如下：

步骤说明 #

1. 编写自定义Vite插件，在configureServer钩子中定位到内置的vite:css-post插件实例。
2. 重写其updateStyle函数，调整样式挂载目标为Shadow DOM，并处理Shadow DOM的创建逻辑。
3. 将自定义插件加入Vite配置的插件列表。

修改后的完整Vite配置 #

import react from '@vitejs/plugin-react';
import * as path from 'path';
import { defineConfig, splitVendorChunkPlugin, Plugin } 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;
}

// 自定义插件：重写vite:css-post的updateStyle函数，注入样式到Shadow DOM
const shadowDomStyleInjectPlugin: Plugin = {
  name: 'shadow-dom-style-inject',
  configureServer(server) {
    // 定位内置的vite:css-post插件
    const cssPostPlugin = server.config.plugins.find(plugin => plugin.name === 'vite:css-post');
    if (!cssPostPlugin?.api?.updateStyle) return;

    // 重写updateStyle函数
    cssPostPlugin.api.updateStyle = function(id: string, content: string) {
      let style = document.querySelector(`style[data-vite-dev-id="${id}"]`);
      
      if (!style) {
        style = document.createElement('style');
        style.setAttribute('type', 'text/css');
        style.setAttribute('data-vite-dev-id', id);
        style.textContent = content;
        
        // 确保body已挂载Shadow DOM，避免重复创建
        if (!document.body.shadowRoot) {
          try {
            document.body.attachShadow({ mode: 'open' });
          } catch (e) {
            console.error('Shadow DOM创建失败:', e);
            // 创建失败时回退到默认挂载位置
            document.head.appendChild(style);
            return;
          }
        }
        
        // 将样式注入Shadow DOM
        document.body.shadowRoot.appendChild(style);
      } else {
        // 更新已有样式内容
        style.textContent = content;
      }
    };
  }
};

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(),
    shadowDomStyleInjectPlugin // 注册自定义插件
  ],
  build: {
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          ...renderChunks(dependencies),
        },
      },
    },
  },
});

补充说明 #

• 该插件仅对开发环境生效，因为updateStyle是Vite开发服务器用于样式热更新的函数。
• 生产环境下，需额外处理CSS打包后的注入逻辑：可将所有CSS打包为单个文件，在应用初始化时手动创建Style元素并注入到Shadow DOM；或通过Rollup插件修改CSS输出行为。
• 代码中加入了错误回退机制，若Shadow DOM创建失败，样式会默认挂载到document.head，避免页面样式完全失效。

内容的提问来源于stack exchange，提问作者Sergey