Is there an analogue of gulp uncss for cleaning css from unnecessary code in php templates and taking into account dynamic classes?

Question

css

Good day!
I would be grateful if you could help me solve the problem. There is a project, its frame \ layout was assembled from admin modules, which is based on Twitter Bootstrap. The project is already quite large. It was assembled without static page layout, the blocks were immediately integrated into the program code. There was a need not only to use the "minified" css, but also to cut out a lot of unnecessary and unused code in a good way. I read about gulp uncss, but the github says the following

For projects using a framework such as Foundation or Bootstrap you will have to maintain an ignore list for classes that are added by the JS components.

It turns out that uncss cannot help in any way. I would be grateful if you could suggest a suitable gallp plugin/bundle of plugins or a methodology that will cut this Gordian knot. :) Thanks.

Answer 1

No static. Dynamic classes have not yet learned how to filter. There is a way, but very dreary. You need to run static in the browser, copy the source code from the browser to the new html, then activate all the dynamic elements and copy the code again to the same html - run the resulting file for uncss. But even this option will not give a 100% guarantee, since in any framework (and not only in them) there are also temporary classes that do not remain in the code, but are necessary for the animations to work correctly.

Answer 2

Why not?
We execute the script by hook, on the server side. All classes that are needed for effects are added to the ignore list. In principle, set up 1 time, and everything will be fine.

.pipe(uncss({
            html: ['index.html'],
                ignore: [
                ".fade",
                ".fade.in",
                ".collapse",
                ".collapse.in",
                ".collapsing",
                ".alert-danger",
                ".open",
                "/open+/"
            ]
        }))

Answer 3

There is an option to combine plugins

import gulp from 'gulp';
import php2html from 'gulp-php2html';
import phpinc from 'php-include-html';
import htmlmin from 'gulp-htmlmin';
import uncss from 'gulp-uncss';
export function newBuildHTML() {
    return gulp
        .src(['app/buf/success.php', 'app/buf/index.php'])
        .pipe(phpinc({ verbose: true }))
        .pipe(php2html())
        .pipe(htmlmin({ collapseWhitespace: true, removeComments: true }))
        .pipe(gulp.dest('app/buf'));
}
export function newStylesIndex() {
    return gulp
        .src('./app/scss/style.scss')
        .pipe(scss({ outputStyle: 'compressed' }))
        .pipe(concat('style.min.css'))
        .pipe(
            uncss({
                html: ['./app/buf/index.html'],
                ignore: [
                    '.open',
                    '.is-open',
                    '.opened',
                    '.close',
                    '.show',
                    '.hide',
                    '.active',
                    '.d-none',
                    '.сompleted',
                    '.visible',
                    '.checked',
                    /\.js\-.*/,
                ],
            })
        )
        .pipe(autoprefixer())
        .pipe(gulp.dest('app/buf/css'));
}
export const buildAssembly = gulp.series( newBuildHTML, newStylesIndex);

If you use Gulp, then separate these functions and run one after the other, because the first function is asynchronous and it may not have time to issue a file before the second function is launched, then we divide it into 2 functions and wait for return