引入

import { deepSelectorPlugin, rpxToPxPlugin } from 't-comm';

// 不支持 tree-shaking 的项目
import { deepSelectorPlugin, rpxToPxPlugin} from 't-comm/lib/postcss/index';

// 只支持 ESM 的项目
import { deepSelectorPlugin, rpxToPxPlugin} from 't-comm/es/postcss/index';

deepSelectorPlugin

描述：PostCSS 插件：将 Vue3 的 :deep() 转换为 Vue2 的 ::v-deep， 同时处理 :slotted() 和 :global() 选择器。 内置平台判断，默认在所有平台执行。

参数：

参数名	类型	描述
options	object	配置选项
options.platform	Array<string>	在哪些平台执行，默认所有平台

示例

// postcss.config.js
const { deepSelectorPlugin } = require('t-comm');

module.exports = {
  plugins: [
    // 所有平台都执行
    deepSelectorPlugin(),
    // 仅在 h5 平台执行
    deepSelectorPlugin({ platform: ['h5'] }),
  ],
};

rpxToPxPlugin

描述：PostCSS 插件：将 rpx 单位转换为 px 基于 750 设计稿，1rpx = 0.5px。 内置平台判断，默认仅在 h5 平台执行。

参数：

参数名	类型	描述
options	object	配置选项
options.ratio	number	rpx 到 px 的转换比例，默认 0.5
options.platform	Array<string>	在哪些平台执行，默认 ['h5']

示例

// postcss.config.js
const { rpxToPxPlugin } = require('t-comm');

module.exports = {
  plugins: [
    // 默认仅在 h5 平台执行，无需外部判断
    rpxToPxPlugin(),
    // 自定义比例和平台
    rpxToPxPlugin({ ratio: 1, platform: ['h5', 'mp-weixin'] }),
  ],
};