如何借助Vite/Rollup插件将CSS模块样式注入React Web Component

核心思路 #

要解决复杂组件手动处理子组件CSS的繁琐问题，可自定义Vite插件，借助Rollup的构建钩子追踪组件依赖链，自动提取所有关联CSS模块的内容，最终替换代码中的占位符，实现Shadow DOM样式的自动注入。

步骤1：编写Vite插件实现依赖追踪与CSS收集 #

以下插件会标记目标Web Component文件，递归收集其所有依赖的CSS模块，最后替换占位符：

import fs from 'fs';
import path from 'path';

export default function vitePluginWebComponentCss() {
  const cssCache = new Map(); // 缓存已处理的CSS内容
  const targetComponents = new Set(); // 标记需要处理的组件文件

  return {
    name: 'vite-plugin-webcomponent-css',
    // 标记目标组件（可根据项目约定调整规则，比如文件名含WebComponent）
    resolveId(id) {
      if ((id.endsWith('.jsx') || id.endsWith('.tsx')) && id.includes('WebComponent')) {
        targetComponents.add(id);
      }
      return null;
    },
    // 加载CSS模块并缓存原始内容（可添加PostCSS编译等逻辑）
    load(id) {
      if (id.endsWith('.css') && !id.includes('?inline')) {
        const cssContent = fs.readFileSync(id, 'utf-8');
        cssCache.set(id, cssContent);
      }
      return null;
    },
    // 转换目标组件代码，替换占位符为合并后的CSS
    async transform(code, id) {
      if (!targetComponents.has(id)) return code;

      // 递归收集当前组件所有依赖的CSS模块ID
      const collectCssIds = (module) => {
        const cssIds = [];
        module.importedIds.forEach(importId => {
          if (importId.endsWith('.css')) {
            cssIds.push(importId);
          }
          const childModule = this.getModuleInfo(importId);
          if (childModule) {
            cssIds.push(...collectCssIds(childModule));
          }
        });
        return [...new Set(cssIds)]; // 去重避免重复注入
      };

      const moduleInfo = this.getModuleInfo(id);
      if (!moduleInfo) return code;

      const cssIds = collectCssIds(moduleInfo);
      const combinedCss = cssIds.map(id => cssCache.get(id)).join('\n');

      // 替换占位符为合并后的CSS字符串
      return code.replace(
        `{/* vite-plugin-webcomponent:CSSPlaceholder */}`,
        JSON.stringify(combinedCss)
      );
    }
  };
}

步骤2：在Vite配置中启用插件 #

修改vite.config.js，引入并启用自定义插件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import vitePluginWebComponentCss from './vite-plugin-webcomponent-css';

export default defineConfig({
  plugins: [react(), vitePluginWebComponentCss()],
});

步骤3：组件中使用占位符 #

保持组件代码结构不变，直接使用约定的占位符即可：

import css from "./MyComponent.css";

function MyComponent() {
  return (
    <>
      <style>{/* vite-plugin-webcomponent:CSSPlaceholder */}</style>
      <div className={css.container}>Hello</div>
    </>
  );
}

// 导出为Web Component示例
import { createRoot } from 'react-dom/client';
class MyWebComponent extends HTMLElement {
  connectedCallback() {
    const root = createRoot(this.attachShadow({ mode: 'open' }));
    root.render(<MyComponent />);
  }
}
customElements.define('my-web-component', MyWebComponent);

关键细节说明 #

• 依赖追踪：通过this.getModuleInfo(id)获取模块依赖关系，递归遍历所有子模块提取CSS文件ID。
• 缓存机制：避免重复读取和编译同一CSS文件，提升构建效率。
• 占位符替换：将合并后的CSS字符串通过JSON.stringify注入，确保在React中正确渲染为样式内容。
• 标记规则：示例通过文件名包含WebComponent标记目标组件，可根据项目需求调整为特定目录、注释标记等规则。

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