Using .purgeCss() breaks lightbox and popper

[geoff-maddock]

I'm using purgeCss 6.0.0 in webpack with my laravel 8 application. I found that for some reason my lightbox and popper code breaks when I use purgeCSS. Oddly, only in prod, not in dev.

app.scss:

$border-radius:               .25rem;
$border-radius-sm:            .2rem;
$border-radius-lg:            .3rem;
$border-radius-pill:          50rem;

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Bootstrap
@import "~bootswatch/dist/superhero/variables";
@import "~bootstrap/scss/bootstrap";

// Dropzone
@import "~dropzone/dist/min/dropzone.min.css";

// Lightbox2
@import "~lightbox2/dist/css/lightbox.min.css";

webpack.mix.js:

let mix = require('laravel-mix');

// purgecss is intended to remove any css that is not used by the project
require('laravel-mix-purgecss');

// base app js and css
// this builds public/css/app.css
mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .purgeCss()
;

// build dark theme
// use the app.css above
mix.styles([
    'public/css/app.css',
    'resources/assets/css/custom.css',
    'resources/assets/css/dark-theme.css',
    'resources/assets/css/sweetalert.css'
], 'public/css/dark.css')
;

// build light theme
mix.styles([
    'public/css/app.css',
    'resources/assets/css/custom.css',
    'resources/assets/css/light-theme.css',
    'resources/assets/css/flatly-bootstrap.min.css',
    'resources/assets/css/sweetalert.css'
], 'public/css/light.css')
;

With purgeCss enabled, my app.css and dark.css are minimized, but the lightbox and popper code breaks. When I remove or disable it, those files grow, but the lightbox and popper code is not broken. Any suggestions on when to change with the config?

[htuzel]

similar problem. It breaks my react code.

[LeonBuchner]

Generally Lightboxes, Sliders etc. are adding or removing classes based on the event. For example: When you have a lightbox on your page you will add the class "show" to your lightbox which will show the element. If PurgeCSS cleaned everything up and couldn't find any uses (because its added by javascript) the class "show" is not defined in your minified css version.

SOLUTION: Try to use the "safelist" feature and figure out which classes will be added or removed by lightbox and list them there. After that they won't get removed.

mix.sass('resources/sass/app.scss', 'public/css') .purgeCss({ safelist: ['fade', 'show', 'active', 'carousel-item-end', 'slide', 'carousel-item-prev', 'carousel-item-next', 'carousel-item- start'] });

[spatie-bot]

Dear contributor,

because this issue seems to be inactive for quite some time now, I've automatically closed it. If you feel this issue deserves some attention from my human colleagues feel free to reopen it.