// 根据环境变量决定是否启用 px 转 rem
const isProduction = process.env.NODE_ENV === 'production';
const enablePxToRem = process.env.ENABLE_PX_TO_REM !== 'false';

module.exports = {
  plugins: {
    autoprefixer: {},
    // 只在生产环境或明确启用时转换 px 为 rem
    ...(enablePxToRem && {
      'postcss-pxtorem': {
        // 根元素字体大小，通常是 16px
        // 你可以根据设计稿调整这个值
        // 如果设计稿是 750px 宽度，可以设置为 37.5
        // 如果设计稿是 375px 宽度，可以设置为 37.5
        rootValue: process.env.REM_ROOT_VALUE || 16,
        
        // 需要转换的属性，* 表示所有属性
        propList: ['*'],
        
        // 不转换的选择器，可以添加特定的类名
        selectorBlackList: [
          '.no-rem', // 添加 .no-rem 类来阻止转换
          '.px-only', // 添加 .px-only 类来阻止转换
          '.keep-px' // 添加 .keep-px 类来阻止转换
        ],
        
        // 是否替换属性值
        replace: true,
        
        // 是否转换媒体查询中的 px
        mediaQuery: false,
        
        // 最小转换的像素值，小于等于此值的不转换
        minPixelValue: 1,
        
        // 排除的目录
        exclude: /node_modules/i,
        
        // 转换后的精度，小数点后几位
        unitPrecision: 5,
        
        // 自定义转换函数
        transformUnit: function(value, unit) {
          const numValue = parseFloat(value);
          
          // 如果值小于等于 1px，不转换（保持像素）
          if (numValue <= 1) {
            return value + unit;
          }
          
          // 如果值大于 1px，转换为 rem
          return (numValue / 16) + 'rem';
        }
      }
    })
  }
};