/*
 * @Descripttion: px 自动转换 成 vw/vh  关键配置 viewportWidth: (file) => (file.indexOf('van') > 0 ? 375 : 750),
 * @version:
 * @Author: lhl
 * @Date: 2024-09-01 15:18:08
 * @LastEditors: lhl
 * @LastEditTime: 2024-09-08 21:13:38
 */
import postcssPxToViewport from 'postcss-px-to-viewport-8-plugin';
import autoprefixer from 'autoprefixer';

const config = {
  plugins: [
    // 配置 autoprefixer 自动加前缀
    autoprefixer({
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8', '> 1%'],
      grid: true
    }),
    postcssPxToViewport({
      unitToConvert: 'px',
      viewportWidth: (file) => {
        // 所有在 src 目录下的 Vue 组件内部的自定义样式也符合预期、css文件、less文件 转换规则都与 Vant 组件一致
        if (file.indexOf('node_modules/vant') > -1 || /src\/.*\.(css|less|vue)$/.test(file)) {
          return 375;
        }
        return 750;
      },
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 能转化为vw的属性列表
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位
      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: true, // 媒体查询里的单位是否需要转换单位
      replace: true, //  是否直接更换属性值，而不添加备用属性
      exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 里面是正则表达式才不会报错
      include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 横屏时使用的单位
      landscapeWidth: 1024 // 横屏时使用的视口宽度
    })
  ]
};

export default config;