import { defineConfig } from '@tarojs/cli'
import path from 'node:path'
import dev from './dev'
import prod from './prod'

export default defineConfig(async (merge) => {
  const baseConfig = {
    projectName: 'sec-warehouse',
    date: '2026-9-8',
    designWidth: 750,
    deviceRatio: { 640: 2, 750: 1, 828: 1.5, 375: 2, 414: 1.7 },
    sourceRoot: 'src',
    outputRoot: 'dist',
    plugins: ['@tarojs/plugin-framework-react'],
    framework: 'react',
    compiler: 'webpack5',
    cache: { enable: false },
    alias: {
      '@': path.resolve(__dirname, '..', 'src')
    },
    sass: { resource: ['src/styles/variables.scss'] },
    // Taro 会用白名单挑字段传给小程序编译器（Config.getConfigWithNamed），
    // postcss 必须放在 mini 分端配置下才生效；默认 cssModules.enable=false 会让
    // *.module.scss 默认导入为 undefined，页面渲染 styles.page 抛错白屏
    mini: {
      postcss: {
        cssModules: {
          enable: true,
          config: {
            namingPattern: 'module',
            generateScopedName: '[name]__[local]___[hash:base64:5]'
          }
        }
      },
      // css-loader v7 默认 exportLocalsConvention='as-is'，kebab-case 类名
      // （如 device-row）无法以 styles.deviceRow 访问，必须开启 camelCase 转换
      cssLoaderOption: {
        modules: {
          exportLocalsConvention: 'camelCaseOnly'
        }
      }
    }
  }

  // merge 由 defineConfig 回调注入，无需额外引入 webpack-merge
  if (process.env.NODE_ENV === 'development') {
    return merge({}, baseConfig, dev)
  }
  return merge({}, baseConfig, prod)
})