// postcss.config.js
const conflictingClasses = [
    // flex must be treated separately
    'order-first',
    'order-last',
    'cursor-not-alowed',
    'cursor-pointer',
    'block',
    'inline-block',
    'text-justify',
    'hidden',
    'invisible',
    'overflow-auto',
    'overflow-hidden',
]

// The plugin takes an object where the keys are the selectors and the values are the properties (or list of properties) to remove or all properties with "*".
const removeObj = {
    ...Object.fromEntries(conflictingClasses.map(cc => [`.${cc}`, '*'])), // Removes all properties from conflicting classes
    // body: ['font-family', 'font-size'], // You can also remove things like fonts and colors.
    '.row, .column, .flex': 'flex-wrap', // Turns out rules defining multiple classes must be targetted as a whole.
}


module.exports = {
    plugins: {
        "postcss-remove-declaration": ({ remove: removeObj }), // The plugin must be placed before Tailwind import!
        "postcss-px-to-viewport-opt": {
            "viewportWidth": 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            "viewportHeight": 1336, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
            "unitPrecision": 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
            "viewportUnit": "vw", // 指定需要转换成的视窗单位，建议使用vw
            "selectorBlackList": [".ignore", ".hairlines"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            "minPixelValue": 2, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            "mediaQuery": false, // 允许在媒体查询中转换`px`
            "exclude": /(\/|\\)(node_modules)(\/|\\)/
        },
        "postcss-viewport-units": {
            filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
        },
        tailwindcss: {},
        autoprefixer: {},
    }
}