transform-v-deep

将Vue SFC中的深度选择器 /deep/、::v-deep、>>> 转换为 :deep() 或 ::v-deep 语法。

安装

pnpm add -D transform-v-deep

使用方法

命令行

# 转换为 Vue3 语法（默认）
npx transform-v-deep <source>

# 转换为 Vue2 语法
npx transform-v-deep <source> --vue 2

# 监听文件变化
npx transform-v-deep <source> --watch

# 自定义文件匹配模式
npx transform-v-deep <source> --pattern "**/*.{vue,html}"

编程方式

import { transformVDeep } from 'transform-v-deep'

// 转换为 Vue3 语法（默认）
const result = transformVDeep(source)

// 转换为 Vue2 语法
const result = transformVDeep(source, { vueVersion: '2' })

PostCSS 插件

// postcss.config.js
module.exports = {
  plugins: [
    require('transform-v-deep')({ vueVersion: '3' }) // 或 '2'
  ]
}

转换示例

Vue3 语法（默认）

/* 转换前 */
.parent /deep/ .child {
  color: red;
}
.parent >>> .child {
  color: red;
}
.parent ::v-deep .child {
  color: red;
}

/* 转换后 */
.parent :deep(.child) {
  color: red;
}

Vue2 语法

/* 转换前 */
.parent /deep/ .child {
  color: red;
}
.parent >>> .child {
  color: red;
}
.parent :deep(.child) {
  color: red;
}

/* 转换后 */
.parent ::v-deep .child {
  color: red;
}