const prefixSelector = require('postcss-prefix-selector');

module.exports = {
    plugins: {
        '@tailwindcss/postcss': {},
        autoprefixer: {},
        'postcss-prefix-selector': {
            prefix: '.formipay-design-system',
            transform(prefix, selector) {
                // Don't prefix root-level selectors like :root, @keyframes
                if (selector.startsWith(':root') || selector.startsWith('@keyframes') || selector.startsWith('@font-face')) {
                    return selector;
                }
                // Don't prefix html/body selectors
                if (selector.startsWith('html') || selector.startsWith('body')) {
                    return selector;
                }
                // Don't double-prefix
                if (selector.startsWith(prefix)) {
                    return selector;
                }
                return `${prefix} ${selector}`;
            },
        },
    },
};