t-comm/lib/postcss/deep-selector-plugin.js

专业、稳定、纯粹的工具库

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

/**
 * 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;

exports.deepSelectorPlugin = deepSelectorPlugin;