# Vue CSS 隔离 - 使用示例

## 问题

当 Vue 组件展开后，CSS 选择器可能会：
1. **误选**：选中了不该选中的元素
2. **漏选**：没有选中应该选中的元素

## 解决方案

为每个 Vue 组件添加唯一的 `class_iris` 属性，并相应重写 CSS 选择器。

## 示例

### 输入 Vue SFC

```vue
<template>
  <div class="app">
    <ElButton type="primary">Click</ElButton>
    <ElButton type="danger">Delete</ElButton>
  </div>
</template>

<style>
.ElButton {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

.ElButton.primary {
  background: blue;
  color: white;
}

.ElButton.danger {
  background: red;
  color: white;
}
</style>
```

### 处理后输出

**HTML：**
```html
<div class="app">
  <ElButton class_iris="iris_tCZYrzHFaYB" type="primary">Click</ElButton>
  <ElButton class_iris="iris_tCZYrzHFaYB" type="danger">Delete</ElButton>
</div>
```

**CSS：**
```css
.ElButton[class_iris="iris_tCZYrzHFaYB"] {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

.ElButton[class_iris="iris_tCZYrzHFaYB"].primary {
  background: blue;
  color: white;
}

.ElButton[class_iris="iris_tCZYrzHFaYB"].danger {
  background: red;
  color: white;
}
```

## 工作原理

### 1. 生成唯一 class

```rust
let unique_class = VueCssIsolator::generate_unique_class("ElButton");
// 输出: "iris_tCZYrzHFaYB"
```

- 使用组件名的哈希值生成
- 同一组件始终生成相同的 class
- 不同组件生成不同的 class

### 2. 为组件标签添加 class_iris

```rust
let html = r#"<ElButton type="primary">Click</ElButton>"#;
let components = vec!["ElButton".to_string()];

let isolated = VueCssIsolator::add_unique_class(html, &components);
// 输出: <ElButton class_iris="iris_tCZYrzHFaYB" type="primary">Click</ElButton>
```

### 3. 重写 CSS 选择器

```rust
let css = r#".ElButton { padding: 8px; }"#;
let mut classes = HashMap::new();
classes.insert("ElButton".to_string(), "iris_tCZYrzHFaYB".to_string());

let rewritten = VueCssIsolator::rewrite_css_selectors(css, &classes);
// 输出: .ElButton[class_iris="iris_tCZYrzHFaYB"] { padding: 8px; }
```

## 优势

✅ **避免误选**：CSS 选择器只会选中带有正确 `class_iris` 的元素  
✅ **避免漏选**：确保所有相同组件都能被选中  
✅ **保持兼容性**：不改变原有 CSS 选择器的行为  
✅ **唯一性保证**：哈希算法确保 class 唯一  
✅ **性能优化**：缓存机制避免重复生成  

## API 参考

### `VueCssIsolator::add_unique_class(html, components)`

为 Vue 组件标签添加唯一的 `class_iris` 属性。

**参数：**
- `html`: 原始 HTML
- `components`: Vue 组件名列表

**返回：** 添加了 `class_iris` 的 HTML

### `VueCssIsolator::rewrite_css_selectors(css, classes)`

重写 CSS 选择器，添加 `class_iris` 限定。

**参数：**
- `css`: 原始 CSS
- `classes`: 组件名到唯一 class 的映射

**返回：** 重写后的 CSS

### `isolate_vue_css(template, style, components)`

完整的 CSS 隔离处理。

**参数：**
- `template`: Vue template HTML
- `style`: Vue style CSS
- `components`: Vue 组件名列表

**返回：** `(isolated_html, isolated_css)`

## 集成到 iris-sfc

在 `component_loader.rs` 中调用：

```rust
// 在展开组件后，应用 CSS 隔离
let (isolated_html, isolated_css) = isolate_vue_css(
    &expanded_template,
    &styles.join("\n"),
    &component_names,
);
```
