Vite 插件顺序：从 CSS v-bind() 失效说起
在 Vue 字体预览组件里，我想把固定布局和动态字体、颜色一起写进 @apply。项目已经接入 UnoCSS 的 Wind3 预设和 directives transformer，普通工具类能工作，构建也成功，但 apply 中的 CSS v-bind() 没有随组件状态更新。
后来发现，只交换 Vite 配置里 UnoCSS() 和 vue() 的位置，结果就变了。问题发生在两个转换步骤之间：UnoCSS 需要先把 apply 展开为普通声明，Vue 才能把声明值中的绑定函数转换为 CSS 变量引用。
这件事也暴露了一个容易混淆的地方：UnoCSS 的工具类扫描本来就在 pre 阶段，默认 apply 转换却在普通阶段。一个工厂返回的多个插件，并不沿着同一条顺序整体移动。
这里以这次失效为例，追踪工厂配置、实际插件阶段和最终 CSS。语义类名、BEM、SCSS 与 apply 的日常组织方式，另见《我所理解的 UnoCSS 最佳实践》。
先看哪一行没有被转换
把问题缩小后，只需要一个能改变颜色的组件：
<script setup lang="ts">
import { ref } from 'vue';
const ink = ref('red');
</script>
<template>
<button @click="ink = ink === 'red' ? 'blue' : 'red'">切换颜色</button>
<p class="preview">观察颜色是否变化</p>
</template>
<style scoped lang="scss">
.preview
{
@apply [color:v-bind(ink)];
}
</style>期望是点击按钮后，文字在红色与蓝色之间切换。失败时，最终组件 CSS 中还留着 color: v-bind(ink)；浏览器不认识这个函数，属性值无法生效。Vue 正常编译后的结果应该是 color: var(--组件绑定变量)，再由运行时随着状态更新变量值。
普通 Vue + Vite 项目保留默认 directives 阶段，并统一采用下面的顺序：
import vue from '@vitejs/plugin-vue';
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [UnoCSS(), vue()],
});这个配置让普通阶段的 apply 转换先于 Vue。它不是将所有 UnoCSS 工作强制放到最前面，也没有把 directives 改成 enforce: 'pre'。
UnoCSS 引擎、预设、转换器和集成各做什么
要看清谁先处理源码，先把平时统称为「UnoCSS」的几层职责分开：
| 层次 | 职责 | 例子 |
|---|---|---|
引擎 @unocss/core |
根据候选工具类、规则和变体等配置生成 CSS | 将 flex 对应为 display: flex |
| 预设 preset | 提供成组的规则、变体、shortcut、preflight 等配置 | Wind3 提供相应的工具类体系，图标等能力另选预设 |
| Transformer | 改写输入源码，支持额外语法 | directives 展开 apply，variant-group 支持模板中的变体分组 |
Vite 集成 unocss/vite |
加载配置，接入提取、转换、虚拟 CSS、开发更新和生产输出 | 提供 virtual:uno.css，安排各阶段的 transformer |
引擎本身不绑定 Vue 或 Vite，具体工具类由规则和预设提供。直接使用 core API时，即使配置里包含 transformer，也需要调用方安排执行。构建集成才把这些步骤串起来。UnoCSS 概念说明
与之配合的 Vue 插件负责拆解 SFC、编译脚本与模板，以及 scoped CSS、CSS 绑定等 Vue 特有转换。Vite 则组织模块、插件和资源，并提供 CSS 预处理、开发服务器与生产构建能力。
apply-only 实际用到了什么
字体预览采用语义化 template class，只在组件样式里消费工具类：
import { defineConfig, presetWind3, transformerDirectives } from 'unocss';
export default defineConfig({
presets: [presetWind3()],
content: { pipeline: false },
transformers: [transformerDirectives()],
});这里用到了 Wind3 的工具类定义、引擎的 CSS 生成和 directives 的源码转换。组件里的 @apply flex p-16px 仍会调用引擎生成声明，再放回当前选择器，由后续的 Vue scoped CSS 等步骤处理。
content.pipeline: false 关闭的是从构建管线内容中提取独立工具类，不会关闭 directives 或这条生成路径。filesystem、inline、safelist 等来源也需要分别判断。混合使用模板工具类时，应恢复所需提取。提取来源说明
Vite 插件还负责配置加载、转换安排和开发更新；virtual:uno.css 接入全局生成结果，不代表所有 apply 声明都经过这个模块。图标、Attributify、模板 variant-group 等可选能力，则按实际配置判断，不能从「已注册 UnoCSS」推导出全部启用。
Vite 怎样安排插件
这里的插件运行在开发服务器和构建进程中，处理源码并输出浏览器能使用的 JS 和 CSS。页面里的 Vue 响应式更新由 Vue 运行时负责。
Vite 官方的 Plugins Config说明，一个工厂可以返回多个插件，嵌套数组会被展开。因此，plugins: [UnoCSS(), vue()] 只是工厂配置，不等于两个不可拆分的处理步骤。
Plugin Ordering进一步区分了 enforce 阶段：用户 pre 插件位于相关 Vite 核心插件之前，未指定 enforce 的普通用户插件位于其后，另有 post 等阶段。同阶段才继续按配置顺序排列；具体 hook 还可能通过自身的 order 调整顺序。
模块请求经过的 hook包括 resolveId、load、transform。它们分别参与模块解析、加载和转换，不能把所有 hook 都看成只按数组从左到右执行一次的函数列表。排查时要落实到具体阶段、输入模块及其中的一次转换。
pre 扫描为什么不决定 apply 的顺序
在默认 global 模式下，只写静态模板工具类时，[UnoCSS(), vue()] 和 [vue(), UnoCSS()] 通常都能工作。这并不意味着 Vue 前后的源码对所有功能都等价；这部分扫描的实际位置首先就没有随工厂交换而改变。
UnoCSS 66.12.0 的开发扫描插件包含下面的处理，节选省略了服务器与 CSS 模块逻辑：
{
name: 'unocss:global',
apply: 'serve',
enforce: 'pre',
transform(code, id) {
if (filter(code, id))
tasks.push(extract(code, id));
return null;
},
}生产扫描插件的名称是 unocss:global:build:scan，同样声明 pre。标准 Vue 插件处于普通阶段，所以两种工厂顺序下，扫描仍可以先读取原始 SFC。
例如 class="flex p-16px text-red-500"，UnoCSS 只需提取候选工具类，再生成对应 CSS；扫描钩子返回 null，继续把源码交给后续插件。Vue 编译这个静态 class 时，也不需要先拿到工具类 CSS，两项工作没有相互等待的依赖。
默认 directives 由普通阶段的 unocss:transformers:default 执行，见 Vite transformer 映射。只列与本例有关的阶段，区别是：
| 工厂数组写法 | pre 阶段 | 普通阶段的相对顺序 |
|---|---|---|
[UnoCSS(), vue()] |
UnoCSS global 扫描 | 默认 directives，再 Vue |
[vue(), UnoCSS()] |
UnoCSS global 扫描 | Vue，再默认 directives |
我用上述静态模板对比了两种数组顺序的开发模式转换与生产构建，共四组检查：扫描都读到了原始 SFC，同种运行方式下生成的 CSS 相同。扫描阶段记录弹窗保留实际插件顺序、输入特征与生成结果；开发检查没有另做浏览器绘制、HMR 或 SSR 验收。
Vue 为什么会错过 v-bind()
扫描记录了候选，不代表动态声明已经转换。对于 @apply [color:v-bind(ink)]，负责展开指令的 directives 与 Vue 之间存在明确依赖。
Vue 3.5.44 的 CSS variables 插件访问 CSS 声明的值，关键入口是：
// packages/compiler-sfc/src/style/cssVars.ts，节选。
Declaration(decl) {
const value = decl.value;
if (vBindRE.test(value)) {
// 解析绑定表达式，并将声明值中的函数替换为 var(--...)。
}
}当 directives 先展开，Vue 会看到普通的 color: v-bind(ink) 声明，并把值改成 CSS 变量引用。如果 Vue 先处理，函数还在 apply 的参数中，尚未成为声明值；随后才生成的新声明，也不会让 Vue 的这轮转换自动再跑一次。
图中两种配置各自从上往下读，顶部扫描只在启用内容提取时运行。apply-only 可以关闭这一步，下面的 directives 与 Vue 转换仍然存在。图里的 CSS 变量名仅作示意。
这也解释了几种容易混淆的结果：直接写 color: v-bind(ink) 时，Vue 处理的已经是声明，无需等待 apply；--at-apply 本身也是声明，值里的绑定函数可以先被 Vue 改写。给整条 apply 加引号则不会改变它属于指令参数的事实。
这里使用的是静态写在源码中的工具类，只有属性值由组件状态提供，没有在运行时拼接工具类名称。Vue 最终仍会在组件根节点写入和更新内联 CSS 变量，改用 scoped 声明也会改变原行内属性的优先级，迁移时需要检查层叠与更新时机。
为什么 directives 不默认使用 pre
直接把 directives 设成 pre，能让它先于普通 Vue 插件运行，但同时改变了它与 CSS 预处理器的先后关系。
Vite 8.3.5 的插件组装把用户 pre 插件放在内置 cssPlugin 前，普通用户插件则在其后。对于 SCSS 样式请求，保留默认阶段可以等 Sass 处理完成后再运行 directives；强制 pre，则可能在 Sass 展开导入前先处理入口：
// main.scss
@use "./buttons";// _buttons.scss
.button
{
@apply bg-red-500;
}UnoCSS 不执行 Sass 的 @use。它提前处理入口时，只看到导入语句；等 Sass 带入 _buttons.scss 的内容，这轮指令转换已经结束，依赖文件里的 apply 就可能留下来。Sass 内部加载依赖，也不保证触发独立的 Vite transform。
这类问题曾在 UnoCSS 0.47.1 出现：#1929报告入口 apply 有效、@use / @forward 导入文件的 apply 失效，恢复默认阶段后正常；随后 #1930回退了 #1923 引入的默认 pre。核读的 66.12.0 directives 实现仍使用 enforce: options?.enforce，没有默认填入 pre。
因此，保留默认 directives 阶段、将 UnoCSS 放在 Vue 前，可以同时满足本例的两个依赖：先等预处理器生成 CSS，再展开 apply，随后交给 Vue 转换绑定。验收时要分别检查入口和导入文件，入口正常不能证明依赖文件正常。
Tailwind CSS v4 为什么采用另一种阶段
Tailwind v4 的官方 @tailwindcss/vite也处理工具类与 CSS 编译，v4.3.3 实现为开发和生产 CSS 转换声明了 pre。
它同时把自身定位为 CSS 构建与预处理工具，会处理 CSS 导入和嵌套；官方明确说明，v4 不设计为与 Sass、Less、Stylus 搭配使用。这套工作流无需等待 Sass 生成导入内容，不能只因为两者都有 apply，就要求采用相同阶段。
在 Vue SFC 样式中使用 Tailwind v4 的 apply，还需用 @reference 引用主题与工具类定义；Vue CSS 绑定仍由 Vue 编译器处理。这里讨论的是 v4 的 Vite 集成，旧版 PostCSS 链路需要按实际阶段判断。
怎样验证没有只修好一个样例
最先要核对的是具体模块经过了什么转换。Vite 官方推荐用 vite-plugin-inspect查看各插件的中间源码，定位哪一步生成了语法、哪一步没有消费它；UnoCSS Inspector 主要查看工具类与生成样式，二者的观察对象不同。
在 UnoCSS 66.12.0、Vue 3.5.44、Vite 8.3.5、plugin-vue 6.0.10 的隔离复现中，开发与生产得到相同结果：
| 写法 | Vue 在前 | UnoCSS 在前 |
|---|---|---|
color: v-bind(ink) |
随状态更新 | 随状态更新 |
@apply [color:v-bind(ink)] |
未更新 | 随状态更新 |
| 整组加引号的 apply | 未更新 | 随状态更新 |
--at-apply 中的同一属性 |
随状态更新 | 随状态更新 |
随后用 Vue 3.6.0-rc.14、UnoCSS 66.12.0、Vite 8.3.5、Sass Embedded 1.107.0 对比了 26 组 SCSS 生产场景，覆盖普通 Vue 与 Vapor、直接绑定、SCSS @use 导入及纯 apply 提取。配置对照与实验记录弹窗列出版本、输入和覆盖范围；该轮没有复验 Less、@forward、HMR 或 SSR。
还要分开检查两项结果：组件的动态声明是否生效，以及输出是否额外生成无效的独立 utility。原始 SFC 的扫描可能提取到含 v-bind() 的候选并生成未使用的全局规则；不能据此直接否定已生效的组件绑定。纯 apply 的配置可以关闭 pipeline 提取，混合使用模板工具类时则保留所需来源。
下面的实际预览同时验证了字体和颜色更新，固定的 padding、圆角、字号及行高保持一致，最终组件 CSS 没有残留绑定函数。预览计算值与完整产物弹窗保留切换前后的浏览器数据。
项目可以用 @sheng/vue-vite-unocss-plugin-order warning 保护明确可见的工厂顺序，但单文件 AST 无法证明加载配置后的完整插件链。规则接入与动态样式迁移边界见原文的 Lint 实践。
构建回归应解析 CSS，检查目标声明是否残留真正的 v-bind()、apply 是否展开，再改变状态验证 computed style。全文子串搜索只能提供线索，注释、字符串和转义选择器不能直接算作编译失败。
总结
插件工厂在数组中的位置、展开后各插件的执行阶段、具体 hook 的输入输出，是三个不同层次。默认 global 的扫描为 pre，不会因为工厂交换位置就整体移到 Vue 后；默认 directives 处于普通阶段，才会与 Vue 的声明转换产生本例中的顺序依赖。
普通 Vue + Vite 采用 UnoCSS 在前，同时保留默认 directives 阶段，可以兼顾 apply 动态绑定与 SCSS 预处理。遇到其他模式、模板改写或框架包装时，应继续检查实际模块和转换结果，而不是只看数组或构建是否成功。
默认 global 模式的扫描阶段记录
使用 UnoCSS 66.12.0、Vite 8.3.5、plugin-vue 6.0.10 和 Vue 3.6.0-rc.14，对比两种工厂顺序的开发转换与生产构建，共四组。记录包含展开后的插件阶段、扫描输入是否仍为原始 SFC、生成的 CSS 及其指纹。
开发检查经过服务器 transform 与引擎生成，未另验浏览器绘制、HMR 或 SSR。同种运行方式下，两种工厂顺序的 CSS 一致。
四组扫描与 CSS 生成记录
{
"versions": {
"vite": "8.3.5",
"vue": "3.6.0-rc.14",
"unocss": "66.12.0",
"@vitejs/plugin-vue": "6.0.10"
},
"records": [
{
"command": "serve",
"order": "uno-first",
"scans": [
{
"plugin": "unocss:global",
"enforce": "pre",
"readsSfc": true,
"readsClasses": true
}
],
"stages": [
{
"name": "unocss:transformers:pre",
"enforce": "pre"
},
{
"name": "unocss:global:content",
"enforce": "pre"
},
{
"name": "unocss:global",
"enforce": "pre"
},
{
"name": "unocss:config",
"enforce": "default"
},
{
"name": "unocss:transformers:default",
"enforce": "default"
},
{
"name": "unocss:devtools",
"enforce": "default"
},
{
"name": "unocss:api",
"enforce": "default"
},
{
"name": "vite:vue",
"enforce": "default"
},
{
"name": "unocss:transformers:post",
"enforce": "post"
},
{
"name": "unocss:global:post",
"enforce": "post"
}
],
"css": "*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.flex{display:flex;}.p-16px{padding:16px;}.text-red-500{--un-text-opacity:1;color:rgb(239 68 68 / var(--un-text-opacity)) /* #ef4444 */;}",
"cssSha256": "8fe28df51fc40adee04f9b1f37fe2daf1affe05b50e98bb3bd9c6cec9d995463"
},
{
"command": "serve",
"order": "vue-first",
"scans": [
{
"plugin": "unocss:global",
"enforce": "pre",
"readsSfc": true,
"readsClasses": true
}
],
"stages": [
{
"name": "unocss:transformers:pre",
"enforce": "pre"
},
{
"name": "unocss:global:content",
"enforce": "pre"
},
{
"name": "unocss:global",
"enforce": "pre"
},
{
"name": "vite:vue",
"enforce": "default"
},
{
"name": "unocss:config",
"enforce": "default"
},
{
"name": "unocss:transformers:default",
"enforce": "default"
},
{
"name": "unocss:devtools",
"enforce": "default"
},
{
"name": "unocss:api",
"enforce": "default"
},
{
"name": "unocss:transformers:post",
"enforce": "post"
},
{
"name": "unocss:global:post",
"enforce": "post"
}
],
"css": "*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.flex{display:flex;}.p-16px{padding:16px;}.text-red-500{--un-text-opacity:1;color:rgb(239 68 68 / var(--un-text-opacity)) /* #ef4444 */;}",
"cssSha256": "8fe28df51fc40adee04f9b1f37fe2daf1affe05b50e98bb3bd9c6cec9d995463"
},
{
"command": "build",
"order": "uno-first",
"scans": [
{
"plugin": "unocss:global:build:scan",
"enforce": "pre",
"readsSfc": true,
"readsClasses": true
}
],
"stages": [
{
"name": "unocss:transformers:pre",
"enforce": "pre"
},
{
"name": "unocss:global:build:scan",
"enforce": "pre"
},
{
"name": "unocss:global:content",
"enforce": "pre"
},
{
"name": "unocss:config",
"enforce": "default"
},
{
"name": "unocss:transformers:default",
"enforce": "default"
},
{
"name": "unocss:devtools",
"enforce": "default"
},
{
"name": "unocss:api",
"enforce": "default"
},
{
"name": "unocss:global:build:generate",
"enforce": "default"
},
{
"name": "vite:vue",
"enforce": "default"
},
{
"name": "unocss:transformers:post",
"enforce": "post"
}
],
"css": "*,:before,:after,::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset: ;--un-shadow:0 0 #0000;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:#93c5fd80;--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.flex{display:flex}.p-16px{padding:16px}.text-red-500{--un-text-opacity:1;color:rgb(239 68 68/var(--un-text-opacity)) }\n",
"cssSha256": "d6e057f962644d93f3198e06861f1ff4d91f51c94e90072932ba656b93deafeb"
},
{
"command": "build",
"order": "vue-first",
"scans": [
{
"plugin": "unocss:global:build:scan",
"enforce": "pre",
"readsSfc": true,
"readsClasses": true
}
],
"stages": [
{
"name": "unocss:transformers:pre",
"enforce": "pre"
},
{
"name": "unocss:global:build:scan",
"enforce": "pre"
},
{
"name": "unocss:global:content",
"enforce": "pre"
},
{
"name": "vite:vue",
"enforce": "default"
},
{
"name": "unocss:config",
"enforce": "default"
},
{
"name": "unocss:transformers:default",
"enforce": "default"
},
{
"name": "unocss:devtools",
"enforce": "default"
},
{
"name": "unocss:api",
"enforce": "default"
},
{
"name": "unocss:global:build:generate",
"enforce": "default"
},
{
"name": "unocss:transformers:post",
"enforce": "post"
}
],
"css": "*,:before,:after,::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset: ;--un-shadow:0 0 #0000;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:#93c5fd80;--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.flex{display:flex}.p-16px{padding:16px}.text-red-500{--un-text-opacity:1;color:rgb(239 68 68/var(--un-text-opacity)) }\n",
"cssSha256": "d6e057f962644d93f3198e06861f1ff4d91f51c94e90072932ba656b93deafeb"
}
]
}apply 动态绑定的配置对照与原始记录
打开原文件 apply-css-bind-order-matrix.json
这份记录使用 Vue 3.6.0-rc.14、UnoCSS 66.12.0、Vite 8.3.5 与 Sass Embedded 1.107.0，包含 26 组 SCSS 生产构建和浏览器检查。组件绑定与额外 utility 的残留分别记录，覆盖普通 Vue、Vapor、引号、变量中转、directives pre、UnoCSS 在前、纯 apply 与 SCSS 导入等输入。
26 组 SCSS 配置对照
{
"environment": {
"vue": "3.6.0-rc.14",
"vite": "8.3.5",
"unocss": "66.12.0",
"sass-embedded": "1.107.0"
},
"languages": [
"scss"
],
"browser": "156.0.8078.4",
"rows": [
{
"mode": "vdom",
"language": "scss",
"name": "separate",
"declarations": "@apply px-12px py-8px; font-family: v-bind(family); color: v-bind(ink);",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": false,
"cleanOutput": true,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v16b6764a: serif; --v88f10c62: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v16b6764a: monospace; --v88f10c62: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".preview[data-v-256ccee4]{font-family:var(--v16b6764a);color:var(--v88f10c62);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "arbitrary-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v762e10ee: serif; --v6069f5e1: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v762e10ee: monospace; --v6069f5e1: #935a81;"
},
"componentReactive": false,
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-4cb0870c]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "quoted-property",
"declarations": "@apply 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v1e2cf107: serif; --v86a2c5ba: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v1e2cf107: monospace; --v86a2c5ba: #935a81;"
},
"componentReactive": false,
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-d58f24e1]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "named-utility",
"declarations": "@apply px-12px py-8px font-[v-bind(family)] text-[color:v-bind(ink)];",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v0082e120: serif; --v09af4baa: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v0082e120: monospace; --v09af4baa: #935a81;"
},
"componentReactive": false,
"passed": false,
"css": ".text-\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.font-\\[v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-31db9d76]{color:v-bind(ink);font-family:v-bind(family);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "expression",
"declarations": "@apply px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')];",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v6e76c23b: serif; --v668511ac: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v6e76c23b: monospace; --v668511ac: #935a81;"
},
"componentReactive": false,
"passed": false,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-c2c19734]{font-family:v-bind(\"theme.family\");color:v-bind(\"theme.color\");padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "variable-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply px-12px py-8px font-$probe-family text-$probe-ink;",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": false,
"cleanOutput": true,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v4a9a41bf: serif; --v3799c76b: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v4a9a41bf: monospace; --v3799c76b: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".preview[data-v-b8df2b96]{--probe-family:var(--v4a9a41bf);--probe-ink:var(--v3799c76b);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "quoted-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply 'px-12px py-8px font-$probe-family text-$probe-ink';",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": false,
"cleanOutput": true,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v7bc86027: serif; --v18be8203: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v7bc86027: monospace; --v18be8203: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".preview[data-v-c0c25a16]{--probe-family:var(--v7bc86027);--probe-ink:var(--v18be8203);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "apply-variable",
"declarations": "--at-apply: 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v6563d107: serif; --v3be3bd23: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v6563d107: monospace; --v3be3bd23: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-8a398897]{font-family:var(--v6563d107);color:var(--v3be3bd23);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "apply-variable-expression",
"declarations": "--at-apply: \"px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')]\";",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v5b7893f9: serif; --v5d79dfa4: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v5b7893f9: monospace; --v5d79dfa4: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-1f3eb258]{font-family:var(--v5b7893f9);color:var(--v5d79dfa4);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "pre-transform-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v762e10ee: serif; --v6069f5e1: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v762e10ee: monospace; --v6069f5e1: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-4cb0870c]{font-family:var(--v762e10ee);color:var(--v6069f5e1);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "uno-first-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "uno-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v762e10ee: serif; --v6069f5e1: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v762e10ee: monospace; --v6069f5e1: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-4cb0870c]{font-family:var(--v762e10ee);color:var(--v6069f5e1);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "uno-first-apply-only",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "uno-first",
"pipelineExtraction": false,
"compiled": true,
"residualSyntax": false,
"cleanOutput": true,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v762e10ee: serif; --v6069f5e1: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v762e10ee: monospace; --v6069f5e1: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".preview[data-v-4cb0870c]{font-family:var(--v762e10ee);color:var(--v6069f5e1);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "uno-first-imported-apply",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "uno-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "2px",
"vars": "--v108f77b6: serif; --v0d3e2cd4: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "2px",
"vars": "--v108f77b6: monospace; --v0d3e2cd4: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-4509c4ef]{font-family:var(--v108f77b6);color:var(--v0d3e2cd4);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "separate",
"declarations": "@apply px-12px py-8px; font-family: v-bind(family); color: v-bind(ink);",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": false,
"cleanOutput": true,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v5f26811c: serif; --v62840d2e: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v5f26811c: monospace; --v62840d2e: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".preview[data-v-9377825c]{font-family:var(--v5f26811c);color:var(--v62840d2e);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "arbitrary-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f08ba140: serif; --v3b24a56a: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f08ba140: monospace; --v3b24a56a: #935a81;"
},
"componentReactive": false,
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-b0da20fc]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "quoted-property",
"declarations": "@apply 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v16456a94: serif; --v0bdb5294: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v16456a94: monospace; --v0bdb5294: #935a81;"
},
"componentReactive": false,
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-e0ee9ead]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "named-utility",
"declarations": "@apply px-12px py-8px font-[v-bind(family)] text-[color:v-bind(ink)];",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v2e81064c: serif; --v0469d404: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v2e81064c: monospace; --v0469d404: #935a81;"
},
"componentReactive": false,
"passed": false,
"css": ".text-\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.font-\\[v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-1451c446]{color:v-bind(ink);font-family:v-bind(family);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "expression",
"declarations": "@apply px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')];",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v0edcbf51: serif; --b4ffcc54: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v0edcbf51: monospace; --b4ffcc54: #935a81;"
},
"componentReactive": false,
"passed": false,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-c0d96e67]{font-family:v-bind(\"theme.family\");color:v-bind(\"theme.color\");padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "variable-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply px-12px py-8px font-$probe-family text-$probe-ink;",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": false,
"cleanOutput": true,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--dd80b5a2: serif; --v676c99fb: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--dd80b5a2: monospace; --v676c99fb: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".preview[data-v-352cedcf]{--probe-family:var(--dd80b5a2);--probe-ink:var(--v676c99fb);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "quoted-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply 'px-12px py-8px font-$probe-family text-$probe-ink';",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": false,
"cleanOutput": true,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f278f926: serif; --v2649947d: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f278f926: monospace; --v2649947d: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".preview[data-v-b46ec115]{--probe-family:var(--f278f926);--probe-ink:var(--v2649947d);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "apply-variable",
"declarations": "--at-apply: 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v9d145f72: serif; --v1e37f43a: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--v9d145f72: monospace; --v1e37f43a: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-820403e1]{font-family:var(--v9d145f72);color:var(--v1e37f43a);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "apply-variable-expression",
"declarations": "--at-apply: \"px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')]\";",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--aa299f52: serif; --v78fc7010: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--aa299f52: monospace; --v78fc7010: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-589b2a30]{font-family:var(--aa299f52);color:var(--v78fc7010);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "pre-transform-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "vue-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f08ba140: serif; --v3b24a56a: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f08ba140: monospace; --v3b24a56a: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-b0da20fc]{font-family:var(--f08ba140);color:var(--v3b24a56a);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "uno-first-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "uno-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f08ba140: serif; --v3b24a56a: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f08ba140: monospace; --v3b24a56a: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-b0da20fc]{font-family:var(--f08ba140);color:var(--v3b24a56a);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "uno-first-apply-only",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "uno-first",
"pipelineExtraction": false,
"compiled": true,
"residualSyntax": false,
"cleanOutput": true,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f08ba140: serif; --v3b24a56a: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "0px",
"vars": "--f08ba140: monospace; --v3b24a56a: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".preview[data-v-b0da20fc]{font-family:var(--f08ba140);color:var(--v3b24a56a);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "uno-first-imported-apply",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"order": "uno-first",
"pipelineExtraction": true,
"compiled": true,
"residualSyntax": true,
"cleanOutput": false,
"componentResidualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"border": "2px",
"vars": "--v660f2671: serif; --v6ef7200e: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"border": "2px",
"vars": "--v660f2671: monospace; --v6ef7200e: #935a81;"
},
"componentReactive": true,
"passed": true,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-d397cf07]{font-family:var(--v660f2671);color:var(--v6ef7200e);padding:8px 12px}"
}
]
}它不替代 Less、@forward、HMR 或 SSR 验证。更早的预处理器兼容性样本使用不同版本，单独保留如下，不能与当前矩阵混作同一轮实验：
早期 SCSS 与 Less 兼容性样本
{
"environment": {
"vue": "3.6.0-rc.14",
"vite": "8.3.4",
"unocss": "66.11.0",
"sass-embedded": "1.105.2",
"less": "4.9.1"
},
"browser": "156.0.8078.4",
"rows": [
{
"mode": "vdom",
"language": "scss",
"name": "separate",
"declarations": "@apply px-12px py-8px; font-family: v-bind(family); color: v-bind(ink);",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v16b6764a: serif; --v88f10c62: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v16b6764a: monospace; --v88f10c62: #935a81;"
},
"passed": true,
"css": ".preview[data-v-256ccee4]{font-family:var(--v16b6764a);color:var(--v88f10c62);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "arbitrary-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v762e10ee: serif; --v6069f5e1: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v762e10ee: monospace; --v6069f5e1: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-4cb0870c]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "quoted-property",
"declarations": "@apply 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v1e2cf107: serif; --v86a2c5ba: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v1e2cf107: monospace; --v86a2c5ba: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-d58f24e1]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "named-utility",
"declarations": "@apply px-12px py-8px font-[v-bind(family)] text-[color:v-bind(ink)];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v0082e120: serif; --v09af4baa: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v0082e120: monospace; --v09af4baa: #935a81;"
},
"passed": false,
"css": ".text-\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.font-\\[v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-31db9d76]{color:v-bind(ink);font-family:v-bind(family);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "expression",
"declarations": "@apply px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v6e76c23b: serif; --v668511ac: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v6e76c23b: monospace; --v668511ac: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-c2c19734]{font-family:v-bind(\"theme.family\");color:v-bind(\"theme.color\");padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "variable-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply px-12px py-8px font-$probe-family text-$probe-ink;",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v4a9a41bf: serif; --v3799c76b: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v4a9a41bf: monospace; --v3799c76b: #935a81;"
},
"passed": true,
"css": ".preview[data-v-b8df2b96]{--probe-family:var(--v4a9a41bf);--probe-ink:var(--v3799c76b);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "quoted-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply 'px-12px py-8px font-$probe-family text-$probe-ink';",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v7bc86027: serif; --v18be8203: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v7bc86027: monospace; --v18be8203: #935a81;"
},
"passed": true,
"css": ".preview[data-v-c0c25a16]{--probe-family:var(--v7bc86027);--probe-ink:var(--v18be8203);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "apply-variable",
"declarations": "--at-apply: 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v6563d107: serif; --v3be3bd23: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v6563d107: monospace; --v3be3bd23: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-8a398897]{font-family:var(--v6563d107);color:var(--v3be3bd23);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "apply-variable-expression",
"declarations": "--at-apply: \"px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')]\";",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v5b7893f9: serif; --v5d79dfa4: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v5b7893f9: monospace; --v5d79dfa4: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-1f3eb258]{font-family:var(--v5b7893f9);color:var(--v5d79dfa4);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "scss",
"name": "pre-transform-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v762e10ee: serif; --v6069f5e1: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v762e10ee: monospace; --v6069f5e1: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-4cb0870c]{font-family:var(--v762e10ee);color:var(--v6069f5e1);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "less",
"name": "separate",
"declarations": "@apply px-12px py-8px; font-family: v-bind(family); color: v-bind(ink);",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--ab16e198: serif; --v1ba67616: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--ab16e198: monospace; --v1ba67616: #935a81;"
},
"passed": true,
"css": ".preview[data-v-029cc496]{font-family:var(--ab16e198);color:var(--v1ba67616);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "less",
"name": "arbitrary-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"compiled": false,
"passed": false,
"css": "",
"error": "@apply rule is missing block or ending semi-colon"
},
{
"mode": "vdom",
"language": "less",
"name": "quoted-property",
"declarations": "@apply 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v96893ce2: serif; --v5401399b: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v96893ce2: monospace; --v5401399b: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-ad88c8eb]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "less",
"name": "named-utility",
"declarations": "@apply px-12px py-8px font-[v-bind(family)] text-[color:v-bind(ink)];",
"compiled": false,
"passed": false,
"css": "",
"error": "@apply rule is missing block or ending semi-colon"
},
{
"mode": "vdom",
"language": "less",
"name": "expression",
"declarations": "@apply px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')];",
"compiled": false,
"passed": false,
"css": "",
"error": "@apply rule is missing block or ending semi-colon"
},
{
"mode": "vdom",
"language": "less",
"name": "variable-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply px-12px py-8px font-$probe-family text-$probe-ink;",
"compiled": false,
"passed": false,
"css": "",
"error": "Property '$probe-family' is undefined"
},
{
"mode": "vdom",
"language": "less",
"name": "quoted-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply 'px-12px py-8px font-$probe-family text-$probe-ink';",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v62a10756: serif; --fefaf6d6: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v62a10756: monospace; --fefaf6d6: #935a81;"
},
"passed": true,
"css": ".preview[data-v-4ee1d47e]{--probe-family:var(--v62a10756);--probe-ink:var(--fefaf6d6);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "less",
"name": "apply-variable",
"declarations": "--at-apply: 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v30da73d2: serif; --v58cf6213: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v30da73d2: monospace; --v58cf6213: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-d01bfccf]{font-family:var(--v30da73d2);color:var(--v58cf6213);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "less",
"name": "apply-variable-expression",
"declarations": "--at-apply: \"px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')]\";",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v51624549: serif; --v2c941644: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v51624549: monospace; --v2c941644: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-c6b6b4f7]{font-family:var(--v51624549);color:var(--v2c941644);padding:8px 12px}"
},
{
"mode": "vdom",
"language": "less",
"name": "pre-transform-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v5db0e15c: serif; --bdcaca90: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v5db0e15c: monospace; --bdcaca90: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-c85f7e15]{font-family:var(--v5db0e15c);color:var(--bdcaca90);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "separate",
"declarations": "@apply px-12px py-8px; font-family: v-bind(family); color: v-bind(ink);",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v5f26811c: serif; --v62840d2e: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v5f26811c: monospace; --v62840d2e: #935a81;"
},
"passed": true,
"css": ".preview[data-v-9377825c]{font-family:var(--v5f26811c);color:var(--v62840d2e);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "arbitrary-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--f08ba140: serif; --v3b24a56a: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--f08ba140: monospace; --v3b24a56a: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-b0da20fc]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "quoted-property",
"declarations": "@apply 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v16456a94: serif; --v0bdb5294: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v16456a94: monospace; --v0bdb5294: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-e0ee9ead]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "named-utility",
"declarations": "@apply px-12px py-8px font-[v-bind(family)] text-[color:v-bind(ink)];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v2e81064c: serif; --v0469d404: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v2e81064c: monospace; --v0469d404: #935a81;"
},
"passed": false,
"css": ".text-\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.font-\\[v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-1451c446]{color:v-bind(ink);font-family:v-bind(family);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "expression",
"declarations": "@apply px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v0edcbf51: serif; --b4ffcc54: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v0edcbf51: monospace; --b4ffcc54: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-c0d96e67]{font-family:v-bind(\"theme.family\");color:v-bind(\"theme.color\");padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "variable-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply px-12px py-8px font-$probe-family text-$probe-ink;",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--dd80b5a2: serif; --v676c99fb: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--dd80b5a2: monospace; --v676c99fb: #935a81;"
},
"passed": true,
"css": ".preview[data-v-352cedcf]{--probe-family:var(--dd80b5a2);--probe-ink:var(--v676c99fb);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "quoted-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply 'px-12px py-8px font-$probe-family text-$probe-ink';",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--f278f926: serif; --v2649947d: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--f278f926: monospace; --v2649947d: #935a81;"
},
"passed": true,
"css": ".preview[data-v-b46ec115]{--probe-family:var(--f278f926);--probe-ink:var(--v2649947d);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "apply-variable",
"declarations": "--at-apply: 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v9d145f72: serif; --v1e37f43a: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v9d145f72: monospace; --v1e37f43a: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-820403e1]{font-family:var(--v9d145f72);color:var(--v1e37f43a);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "apply-variable-expression",
"declarations": "--at-apply: \"px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')]\";",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--aa299f52: serif; --v78fc7010: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--aa299f52: monospace; --v78fc7010: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-589b2a30]{font-family:var(--aa299f52);color:var(--v78fc7010);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "scss",
"name": "pre-transform-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--f08ba140: serif; --v3b24a56a: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--f08ba140: monospace; --v3b24a56a: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-b0da20fc]{font-family:var(--f08ba140);color:var(--v3b24a56a);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "less",
"name": "separate",
"declarations": "@apply px-12px py-8px; font-family: v-bind(family); color: v-bind(ink);",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v503016b0: serif; --v8d8effcc: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v503016b0: monospace; --v8d8effcc: #935a81;"
},
"passed": true,
"css": ".preview[data-v-49ecbf4c]{font-family:var(--v503016b0);color:var(--v8d8effcc);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "less",
"name": "arbitrary-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"compiled": false,
"passed": false,
"css": "",
"error": "@apply rule is missing block or ending semi-colon"
},
{
"mode": "vapor",
"language": "less",
"name": "quoted-property",
"declarations": "@apply 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v5ad9a8a6: serif; --v8649bc38: #3f755b;"
},
"after": {
"font": "\"Times New Roman\"",
"color": "rgb(0, 0, 0)",
"padding": "8px 12px",
"vars": "--v5ad9a8a6: monospace; --v8649bc38: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-5f7e8f87]{font-family:v-bind(family);color:v-bind(ink);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "less",
"name": "named-utility",
"declarations": "@apply px-12px py-8px font-[v-bind(family)] text-[color:v-bind(ink)];",
"compiled": false,
"passed": false,
"css": "",
"error": "@apply rule is missing block or ending semi-colon"
},
{
"mode": "vapor",
"language": "less",
"name": "expression",
"declarations": "@apply px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')];",
"compiled": false,
"passed": false,
"css": "",
"error": "@apply rule is missing block or ending semi-colon"
},
{
"mode": "vapor",
"language": "less",
"name": "variable-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply px-12px py-8px font-$probe-family text-$probe-ink;",
"compiled": false,
"passed": false,
"css": "",
"error": "Property '$probe-family' is undefined"
},
{
"mode": "vapor",
"language": "less",
"name": "quoted-bridge",
"declarations": "--probe-family: v-bind(family); --probe-ink: v-bind(ink); @apply 'px-12px py-8px font-$probe-family text-$probe-ink';",
"compiled": true,
"residualSyntax": false,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v59ae4b8e: serif; --v2a849131: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v59ae4b8e: monospace; --v2a849131: #935a81;"
},
"passed": true,
"css": ".preview[data-v-450939e4]{--probe-family:var(--v59ae4b8e);--probe-ink:var(--v2a849131);color:var(--probe-ink);font-family:var(--probe-family);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "less",
"name": "apply-variable",
"declarations": "--at-apply: 'px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)]';",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v1ab32ece: serif; --v74b89ed1: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v1ab32ece: monospace; --v74b89ed1: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-8a0566d5]{font-family:var(--v1ab32ece);color:var(--v74b89ed1);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "less",
"name": "apply-variable-expression",
"declarations": "--at-apply: \"px-12px py-8px [font-family:v-bind('theme.family')] [color:v-bind('theme.color')]\";",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v6336dcdb: serif; --v3bf1b9e8: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v6336dcdb: monospace; --v3bf1b9e8: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(\\'theme\\.color\\'\\)\\]{color:v-bind(\"theme.color\")}\n.\\[font-family\\:v-bind\\(\\'theme\\.family\\'\\)\\]{font-family:v-bind(\"theme.family\")}\n.preview[data-v-2f9392d9]{font-family:var(--v6336dcdb);color:var(--v3bf1b9e8);padding:8px 12px}"
},
{
"mode": "vapor",
"language": "less",
"name": "pre-transform-property",
"declarations": "@apply px-12px py-8px [font-family:v-bind(family)] [color:v-bind(ink)];",
"compiled": true,
"residualSyntax": true,
"errors": [],
"before": {
"font": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"vars": "--v7b64db7c: serif; --ceea6264: #3f755b;"
},
"after": {
"font": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"vars": "--v7b64db7c: monospace; --ceea6264: #935a81;"
},
"passed": false,
"css": ".\\[color\\:v-bind\\(ink\\)\\]{color:v-bind(ink)}\n.\\[font-family\\:v-bind\\(family\\)\\]{font-family:v-bind(family)}\n.preview[data-v-0814054f]{font-family:var(--v7b64db7c);color:var(--ceea6264);padding:8px 12px}"
}
]
}字体预览的计算值与完整编译产物
该预览使用 Vue 3.6.0-rc.14、UnoCSS 66.12.0、Vite 8.3.5 和 Sass Embedded 1.107.0。字体由 serif 改为 monospace，颜色由 rgb(63, 117, 91) 改为 rgb(147, 90, 129)，固定布局值保持一致；记录同时包含 CSS 变量、完整 CSS 和页面错误数组。
切换前后的计算样式与完整 CSS
{
"versions": {
"vue": "3.6.0-rc.14",
"vite": "8.3.5",
"unocss": "66.12.0",
"sass-embedded": "1.107.0"
},
"browser": "156.0.8078.4",
"before": {
"fontFamily": "serif",
"color": "rgb(63, 117, 91)",
"padding": "8px 12px",
"borderRadius": "6px",
"fontSize": "20px",
"lineHeight": "32px",
"variables": "--v701e55a9: serif; --v3506587e: #3f755b;",
"inlineFont": ""
},
"after": {
"fontFamily": "monospace",
"color": "rgb(147, 90, 129)",
"padding": "8px 12px",
"borderRadius": "6px",
"fontSize": "20px",
"lineHeight": "32px",
"variables": "--v701e55a9: monospace; --v3506587e: #935a81;",
"inlineFont": ""
},
"compiledCss": "*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset: ;--un-shadow:0 0 #0000;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:#93c5fd80;--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset: ;--un-shadow:0 0 #0000;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:#93c5fd80;--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.font-preview[data-v-3dfb06e6]{font-family:var(--v701e55a9);color:var(--v3506587e);border-radius:6px;padding:8px 12px;font-size:20px;line-height:32px}.demo[data-v-572e6ac7]{color:#282b32;width:700px;margin-left:auto;margin-right:auto;padding:28px;font-family:system-ui,sans-serif;font-size:16px}.demo__eyebrow[data-v-572e6ac7]{color:#707780;letter-spacing:1px;font-size:12px}.demo h1[data-v-572e6ac7]{margin-top:10px;margin-bottom:20px;font-size:26px;font-weight:600}.demo__controls[data-v-572e6ac7]{align-items:center;gap:28px;margin-bottom:20px;display:flex}.demo label[data-v-572e6ac7]{align-items:center;gap:12px;display:flex}.demo select[data-v-572e6ac7]{background:#fff;border:1px solid #bbc4c9;border-radius:5px;padding:6px 10px;font-size:16px}.demo input[data-v-572e6ac7]{width:52px;height:34px}.demo section[data-v-572e6ac7]{background:#edf1f0;border-radius:8px}.demo__caption[data-v-572e6ac7]{color:#606772;margin-top:12px;margin-bottom:0;font-size:14px}body{background:#fcfbf8;margin:0}*{box-sizing:border-box}.font-preview{margin:0}\n",
"errors": []
}