I’m developing React components that can be embedded on various websites. A potential issue is that the host site might have CSS rules with the same class selectors, which could disrupt the layout of my component. To avoid this, I’m considering either randomizing my CSS class names or prefixing them with a unique identifier. Specifically, I’m using Swiper to create a slider. The problem arises when my component is embedded on a site that also uses Swiper CSS, altering its appearance and breaking my slider.

I already use CSS modules, which work well. However, Swiper is an external component, so I can’t apply CSS modules to its classes.

My craco.config.js for now looks like this:

let config = {
    'style': {
        'modules': {
            'localIdentName': (process.env.NODE_ENV === 'production') ? '[hash:base64:5]' : '[name]__[local]'
        },
        'css': {
            'modules': {}
        },
        'postcss': {
            'mode': 'file',
        },
    }
}

module.exports = config;

My postcss.config.js looks like:

module.exports = {
    plugins: [
        require('autoprefixer'),
        require('cssnano')({
            preset: 'default',
        }),
        require('@fullhuman/postcss-purgecss')({
            content: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts'],
            css: ['./src/**/*.scss'],
            skippedContentGlobs: ['node_modules/**'],
            safelist: [/^swiper*/, /^pnlm*/, '_2kfM8']
        })
    ],
};

All CSS is already renamed, except for styles from any node_modules/* package (e.g., Swiper). Any advice on how to tackle this issue would be greatly appreciated.

Thanks for any help!