"compileStyle" 就是整个样式转换的大脑袋。”

从 SFCDescriptor 中拿到 style 块的原始字符串。Ru果没有 lang 属性，就直接用原生 CSS；Ru果有比如 less 或 scss，就会先交给对应预处理器转为标准 CSS。

"Vite" 或者 "rollup-plugin-vue" dou会把几个 PostCSS 插件串起来例如 autoprefixer、cssnano 等。这些插件负责：

A‑B‑C‑D… 前缀补齐。

Minnify 压缩。

`v-bind` 替换为 CSS 变量引用。

// 假设原始样式
.title { color: v-bind }
// 编译后会变成
.title { color: var }

"那里的 `var` 是怎么来的？"

// pseudo code
function cssVarsPlugin {
  return {
    Declaration {
      if ) {
        // 把 v-bind 换成 var
        decl.value = decl.value.replace(
          /v-bind\]+)\)/g,
           => `var})`
        )
      }
    }
  }
}

"嗯，这里 genVarName 就是生成唯一名字，比如 data-v-12345--color" —— 对啦，对吧？不对不对，我说错了应该叫Zuo _genVarName_。

`scoped`："只给当前组件加个 data-v-xxxx 标记，让同名类在子组件里不起作用"

`module`："彻底改名，把类名替换为随机哈希，然后通过 `$style.xxx` 来引用"

"比如你写 `` 时Zui终在 JS 里就Nengkan到类似 `_title_abc123` 那种名字。" "然后你在模板里就得写 :class="$style.title"——别忘了哦！" "哈哈，有时候我差点忘了 $style 前缀，结果页面全黑一片。" trimPlugin 简述

// pseudo code
function trimPlugin {
  return {
    Once {
      root.walk(node => {
        if  {
          node.raws.before = '
'
          node.raws.after = '
'
        }
      })
    }
  }
}

"它帮你清理多余空格，让Zui终产出的 CSS geng干净。" `sourceMap` 与依赖追踪

"在开发模式下每个样式块dou会生成 SourceMap，把浏览器调试指向你的 .vue 文件，让排错geng直观。" "而对于 `

` 引入外部 css 的情况，它也Neng记录依赖关系，以便热geng新时只重新打包相关文件。" `deep` 与 `slotted` 深度选择器处理

// 父组件深度穿透例子

"当父组件带 scoped 时这个 :deep 就让子组件内部 .inner-dom Neng被覆盖。" "但Ru果父组件改为 module，那这个深度选择器就失效——因为 class 名Yi经被改名了。” 模块化示例代码

   背景颜色演示
 

"注意这里我们给 module 指定了名字 bgModule，那 Vue 会注入一个叫 bgModule 的对象，你Ke以直接使用 $bgModule.bg 来引用。" "别搞错了这是和默认 $style 不同的命名空间。"

// Vite 使用 async 编译方式
import { compileStyleAsync } from '@vue/compiler-sfc'
const result = await compileStyleAsync({
  source: '.title{color:red}',
  filename: 'App.vue',
  id: 'data-v-123',
  postcssPlugins:
})
console.log

"这里 result.code 就是真正输出给浏览器的 CSS 字符串。" "当然Ru果你用 rollup 或 webpack，也Ke以用类似 API，只不过配置略有不同。"

渲染前期：SFC 编译阶段Yi经把所有需要添加的数据属性标记好，如 data-v-xxxx.

运行时：Vue 创建虚拟节点时会检查节点是否拥有对应的数据属性，Ru果没有则自动加入。

“真正渲染到 DOM 上的是带属性的标签，而不是纯粹的 HTML”。所以即使你手动删掉 class，也不会影响样式隔离，因为隔离靠的是属性而不是类名本身。