Whitelist selectors on Purgecss

1.js

var Purgecss = require('purgecss')

var purgecss = new Purgecss({
  content: ['**/*.html'],
  css: ['**/*.css']
})

var purgecssResult = purgecss.purge()

2.php

<div class"alert alert-<?php echo $type; ?>" ><?php echo $message; ?></div>

// A prettier version using Laravel-Blade

<div class="aler alert-{{ $type }}">{{ $message }}</div>

3.css

.alert {
    color: white;
}
.alert-error {
    background: red;
}
.alert-success {
    background: green;
}

4.js

const purgecss = new Purgecss({
    content: [], // content
    css: [], // css
    whitelist: ['alert-success', 'alert-success']
})

5.js

const purgecss = new Purgecss({
    content: [], // content
    css: [], // css
    whitelistPatterns: [/alert/]
})

6.css

/* purgecss ignore */
.alert-success {
    background: green;
}

7.js

const mix = require('laravel-mix');
require('laravel-mix-purgecss');

// ...

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .purgeCss();