@jiayouzuo/vite-plugin-css-scope 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,9 +4,10 @@ Vite 插件：CSS 作用域隔离，解决微前端和模块联邦中的样式
|
|
|
4
4
|
|
|
5
5
|
## 功能特性
|
|
6
6
|
|
|
7
|
-
- **CSS 选择器包裹**：`.btn` →
|
|
8
|
-
- **JSX
|
|
9
|
-
- **HTML 自动注入**：自动给 `<body>`
|
|
7
|
+
- **CSS 选择器包裹**：`.btn` → `[data-scope-appProcess="1"] .btn`
|
|
8
|
+
- **JSX 自动注入**：自动给模块联邦暴露的组件父元素添加作用域属性
|
|
9
|
+
- **HTML 自动注入**：自动给 `<body>` 添加作用域属性
|
|
10
|
+
- **Portal 容器处理**：自动处理 antd Modal、Drawer、Dropdown、Select、Tooltip、Message、Notification 等全局挂载组件
|
|
10
11
|
- **智能过滤**：自动跳过 `:root`、`html`、`body`、`@keyframes` 等全局选择器
|
|
11
12
|
- **HOC 支持**：支持 `forwardRef`、`memo` 等高阶组件
|
|
12
13
|
- **多格式支持**：CSS、Less、SCSS、Sass、JSX、TSX
|
|
@@ -29,7 +30,7 @@ import cssScopePlugin from '@jiayouzuo/vite-plugin-css-scope';
|
|
|
29
30
|
export default defineConfig({
|
|
30
31
|
plugins: [
|
|
31
32
|
cssScopePlugin({
|
|
32
|
-
scope: 'appProcess', //
|
|
33
|
+
scope: 'appProcess', // 作用域名称
|
|
33
34
|
include: ['src/', 'node_modules/@designable/'], // 要处理的目录
|
|
34
35
|
exclude: ['node_modules/antd'] // 排除的目录（可选）
|
|
35
36
|
})
|
|
@@ -41,7 +42,7 @@ export default defineConfig({
|
|
|
41
42
|
|
|
42
43
|
| 参数 | 类型 | 必填 | 说明 |
|
|
43
44
|
|-----|------|-----|------|
|
|
44
|
-
| `scope` | `string` | 是 |
|
|
45
|
+
| `scope` | `string` | 是 | 作用域名称，会生成 `data-scope-{scope}="1"` 属性选择器 |
|
|
45
46
|
| `include` | `string[]` | 是 | 要处理的目录列表（相对于项目根目录） |
|
|
46
47
|
| `exclude` | `string[]` | 否 | 排除的目录或文件 |
|
|
47
48
|
|
|
@@ -55,8 +56,8 @@ export default defineConfig({
|
|
|
55
56
|
.card, .panel { padding: 10px; }
|
|
56
57
|
|
|
57
58
|
/* 转换后 */
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
[data-scope-appProcess="1"] .btn { color: red; }
|
|
60
|
+
[data-scope-appProcess="1"] .card, [data-scope-appProcess="1"] .panel { padding: 10px; }
|
|
60
61
|
```
|
|
61
62
|
|
|
62
63
|
### JSX 组件自动注入（模块联邦）
|
|
@@ -74,9 +75,8 @@ function FormDesigner() {
|
|
|
74
75
|
const __scopeRefCallback = (__el) => {
|
|
75
76
|
if (__el) {
|
|
76
77
|
const __parent = __el.parentElement;
|
|
77
|
-
if (__parent) {
|
|
78
|
-
__parent.
|
|
79
|
-
__el.remove();
|
|
78
|
+
if (__parent && !__parent.hasAttribute("data-scope-appProcess")) {
|
|
79
|
+
__parent.setAttribute("data-scope-appProcess", "1");
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
};
|
|
@@ -97,9 +97,17 @@ function FormDesigner() {
|
|
|
97
97
|
<body>
|
|
98
98
|
|
|
99
99
|
<!-- 转换后 -->
|
|
100
|
-
<body
|
|
100
|
+
<body data-scope-appProcess="1">
|
|
101
101
|
```
|
|
102
102
|
|
|
103
|
+
### Portal 容器自动处理
|
|
104
|
+
|
|
105
|
+
antd 的 Modal、Drawer、Dropdown、Select、Tooltip、Message、Notification 等组件会将弹层挂载到 `document.body`，插件会自动处理这些 Portal 容器：
|
|
106
|
+
|
|
107
|
+
- `@rc-component/portal` - Modal、Drawer
|
|
108
|
+
- `rc-trigger` - Dropdown、Select、Tooltip、Popover 等
|
|
109
|
+
- `rc-notification` - Message、Notification
|
|
110
|
+
|
|
103
111
|
### 自动跳过的选择器
|
|
104
112
|
|
|
105
113
|
```css
|
|
@@ -118,9 +126,10 @@ body { margin: 0; }
|
|
|
118
126
|
|
|
119
127
|
## 工作原理
|
|
120
128
|
|
|
121
|
-
1. **CSS 处理**：使用 PostCSS 遍历所有规则，给选择器外层包裹
|
|
122
|
-
2. **JSX 处理**：使用 Babel AST 解析，注入回调 ref，通过辅助 div
|
|
123
|
-
3. **HTML 注入**：通过 Vite 的 `transformIndexHtml` 钩子给 `<body>`
|
|
129
|
+
1. **CSS 处理**：使用 PostCSS 遍历所有规则，给选择器外层包裹 `[data-scope-xxx="1"]` 属性选择器
|
|
130
|
+
2. **JSX 处理**：使用 Babel AST 解析，注入回调 ref，通过辅助 div 获取父元素并添加作用域属性
|
|
131
|
+
3. **HTML 注入**：通过 Vite 的 `transformIndexHtml` 钩子给 `<body>` 自动加上作用域属性
|
|
132
|
+
4. **Portal 处理**：拦截 antd rc-* 组件的容器创建代码，自动注入作用域属性
|
|
124
133
|
|
|
125
134
|
## License
|
|
126
135
|
|