vite-plugin-css-prefix-auto
Advanced tools
Vite 插件：CSS 作用域隔离，解决微前端和模块联邦中的样式冲突问题。
.btn → .appProcess .btn）index.html 的 <body> 添加作用域类名:root、html、body、@keyframes 等全局选择器npm install vite-plugin-css-prefix-auto -D
# 或
pnpm add vite-plugin-css-prefix-auto -D
// vite.config.ts
import { defineConfig } from 'vite';
import cssScopePlugin from 'vite-plugin-css-prefix-auto';
export default defineConfig({
plugins: [
cssScopePlugin({
scope: 'appProcess', // 作用域类名
include: ['src/', 'node_modules/@designable/'], // 要处理的目录
exclude: ['node_modules/antd'] // 排除的目录（可选）
})
]
});
interface CssScopePluginOptions {
/**
* 作用域类名（会加到 body 上，也会作为 CSS 选择器的父级）
* @example 'appProcess'
*/
scope: string;
/**
* 要处理的目录列表（相对于项目根目录）
* @example ['src/', 'node_modules/@designable/']
*/
include: string[];
/**
* 排除的目录或文件（可选）
* @example ['node_modules/antd']
*/
exclude?: string[];
}
/* 原代码 */
.btn { color: red; }
.card, .panel { padding: 10px; }
.ant-modal { z-index: 1000; }
/* 转换后 */
.appProcess .btn { color: red; }
.appProcess .card, .appProcess .panel { padding: 10px; }
.appProcess .ant-modal { z-index: 1000; }
// vite.config.ts 中配置了 federation exposes
federation({
exposes: {
'./FormDesigner': './src/views/FormDesigner/FormDesigner.jsx'
}
})
// 原代码 - FormDesigner.jsx
function FormDesigner() {
return <div>表单设计器</div>;
}
// 自动转换后（注入回调 ref）
function FormDesigner() {
const __scopeRefCallback = (__el) => {
if (__el) {
const __parent = __el.parentElement;
if (__parent) {
__parent.classList.add("appProcess");
__el.remove(); // 删除辅助 div
}
}
};
return (
<>
<div ref={__scopeRefCallback} style={{width: 0, height: 0, overflow: 'hidden'}}></div>
<div>表单设计器</div>
</>
);
}
工作原理：
优势：
/* 这些选择器保持原样，不会被包裹 */
:root { --color: red; }
html { font-size: 16px; }
body { margin: 0; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
<!-- 原代码 -->
<body>
<!-- 转换后 -->
<body class="appProcess">
.scope 父级transformIndexHtml 钩子给 <body> 自动加上作用域类名1. configResolved 钩子
↓
提取 vite.config 中的 federation.exposes 配置
↓
2. transform 钩子（处理 JSX/TSX）
↓
检查文件是否在 exposes 列表中
↓
使用 Babel 解析 AST
↓
检测所有 export 的内容（支持 forwardRef/memo 等 HOC）
↓
过滤出返回 JSX 的 React 组件
↓
注入回调 ref + 辅助 div
↓
3. PostCSS 插件（处理 CSS）
↓
给选择器包裹作用域前缀
↓
4. transformIndexHtml 钩子
↓
给 <body> 添加作用域类名
<body> 和组件的挂载容器上，确保样式能正确匹配MIT
FAQs
Vite 插件：CSS 作用域隔离，解决微前端和模块联邦中的样式冲突问题
We found that vite-plugin-css-prefix-auto demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Socket found 37 malicious PyPI wheels that abuse Python startup hooks to launch a Bun-powered credential stealer tied to Mini Shai-Hulud/Miasma.
Security News
RubyGems and Bundler 4.0.13 introduced an opt-in cooldown feature that delays newly published gems during dependency resolution.
Security News
pnpm 11.5 now recognizes npm staged publish approvals in release metadata, preventing those releases from being mistaken for lower-trust package publishes.