t-comm
Version:
专业、稳定、纯粹的工具库
69 lines (67 loc) • 2.43 kB
JavaScript
/**
* PostCSS 插件：将 Vue3 的 :deep() 转换为 Vue2 的 ::v-deep，
* 同时处理 :slotted() 和 :global() 选择器。
* 内置平台判断，默认在所有平台执行。
*
* @param {object} options - 配置选项
* @param {string[]} options.platform - 在哪些平台执行，默认所有平台
*
* @example
*
* ```js
* // postcss.config.js
* const { deepSelectorPlugin } = require('t-comm');
*
* module.exports = {
* plugins: [
* // 所有平台都执行
* deepSelectorPlugin(),
* // 仅在 h5 平台执行
* deepSelectorPlugin({ platform: ['h5'] }),
* ],
* };
* ```
*/
var deepSelectorPlugin = function deepSelectorPlugin() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var platform = options.platform;
var currentPlatform = process.env.UNI_PLATFORM || '';
var shouldRun = !platform || platform.includes(currentPlatform);
return {
postcssPlugin: 'postcss-deep-to-v-deep',
Rule: function Rule(rule) {
if (!shouldRun) return;
// 转换 :deep(xxx) 为 ::v-deep xxx
// 支持多种情况：
// 1. :deep(.class) -> ::v-deep .class
// 2. .parent :deep(.child) -> .parent ::v-deep .child
// 3. :deep(.a .b) -> ::v-deep .a .b
if (rule.selector.includes(':deep(')) {
rule.selector = rule.selector.replace(/:deep\(([^)]+)\)/g, function (match, innerSelector) {
return "::v-deep ".concat(innerSelector.trim());
});
}
// 处理 ::v-deep() 带括号的写法
if (rule.selector.includes('::v-deep(')) {
rule.selector = rule.selector.replace(/::v-deep\(([^)]+)\)/g, function (match, innerSelector) {
return "::v-deep ".concat(innerSelector.trim());
});
}
// 处理 :slotted() -> 直接移除（Vue2 不支持）
if (rule.selector.includes(':slotted(')) {
rule.selector = rule.selector.replace(/:slotted\(([^)]+)\)/g, function (match, innerSelector) {
return innerSelector.trim();
});
}
// 处理 :global() -> 直接提取内容（Vue2 不支持）
if (rule.selector.includes(':global(')) {
rule.selector = rule.selector.replace(/:global\(([^)]+)\)/g, function (match, innerSelector) {
return innerSelector.trim();
});
}
}
};
};
// PostCSS 插件标识
deepSelectorPlugin.postcss = true;
export { deepSelectorPlugin };