How to correctly add Symfony UX Turbo classes to PurgeCSS deep list?

[SimonChabrier]

Hi everyone,

I'm trying to configure PurgeCSS (or a similar tool) to avoid stripping CSS classes related to Symfony UX Turbo (like turbo-frame, turbo-stream, and spinner/loading classes).

I have tried regex patterns like /^turbo(-.*)?$/ and /^turbo/ in my safelist/deep list, but the Turbo spinner styles still get removed, breaking the UI during Turbo loading states.

Does anyone know the exact classes or a foolproof regex to add to the safelist to keep all UX Turbo-related styles?

Thanks in advance!

here my config :

if (Encore.isProduction()) {
    console.warn("PurgeCSS activé");
    const twigFiles = glob.sync(path.join(__dirname, "templates/**/*.twig"), { nodir: true });
    const jsFiles = glob.sync(path.join(__dirname, "assets/{_admin,_commons,_front,js-libraries}/js/**/*.js"), { nodir: true });
    Encore.addPlugin(
        new PurgeCSSPlugin({
            paths: twigFiles.concat(jsFiles),
            safelist: {
                standard: [],

                deep: [
                    /^(data|aria|role|accordion|alert|badge|card|list|modal|navbar|nav|spinner|toast|form|invalid|d-|row-|col|col-)/,
                    /^(popover|tooltip|pagination|collapse|collapsing|show|fade|btn|dropdown|croppie|cropper|breadcrumb)/,

                    /^(p|m)([trblxy]?)-/, // padding / margin (py-5, mb-5, etc)
                    /^gap-/,
                    /^fw-/,
                    /^fs-/,
                    /^text-/,

                    // Librairies et plugins divers
                    /^ck/,
                    /^ck-/,
                    /^(treetable|indenter)/,
                    /^(ts|tom|plugin|single|item|has|input-|full)/,
                    /^filepond/,
                    /^swiper/,
                    /^vich/,
                    /^fieldset/,
                    /^cr-/,

                    // Symfony UX Turbo
                    // Classes turbo de base et dérivées (frame, stream, preview, cache, etc)
                    /^turbo$/,
                    /^turbo-.+$/, // turbo-*, exemple : turbo-frame, turbo-stream, turbo-loading
                    /^morph/,
                    /^merge/,
                    /^loading/,

                    // Classes spécifiques de chargement
                    /^turbo-frame-loading$/,
                    /^turbo-stream-loading$/,
                    /^turbo-loading$/,

                    // Classes génériques liées à Turbo (exemple : loading)
                    /^loading$/,
                    /^loading(-.+)?$/, // loading, loading-spinner, loading-active...

                    // Classes complémentaires (au cas où)
                    /^frame$/,
                    /^frame-loading$/,
                    /^stream$/,
                    /^stream-loading$/,
                    /^preview$/,
                    /^cache$/,
                    /^cache-(.+)$/,
                    /^turbo-cache-/,
                    /^turbo-cache-(.+)$/,
                    /^pswp/,
                    /^animate__/,
                    /^fw-/,
                    /^spinner(-border|-grow)?$/,
                ],
            },
            rejected: true,
        }),
    );
}