applying to an entire site?

[starchild]

More a question: using this on a single html page is ok, but in reality most sites comprise many pages.

Is there a way to apply this to a range of pages, or an entire site?

This is the holy grail IMO.

[leeoniya]

hey @starchild ,

Is there a way to apply this to a range of pages, or an entire site?

good question. i think this can easily be done by doing it per page first, then taking all the results and concatenating them together and feeding that to a structural optimizer that would merge duplicates (as recommended in the README.

This is the holy grail IMO.

this is debatable. you could very well end up with a lot of waste per page. in my experience, per page css files give the ideal results.

[starchild]

Well that's fine if you have 4 or 5 pages, but what about a site with hundreds or more? Don't get me wrong , this is some great work, but I'd love to be able to trim down css for a large site.

[leeoniya]

honestly, you should try it and tell me what you get.

Well that's fine if you have 4 or 5 pages,

it really depends on the pages. a typical case after css removal is < 10 KB per page of remaining css. multiply that by how much css your optimizer can chomp through and just do it in multiple stages if needed.

let pages123456 = optimize(optimize(drop(1) + drop(2) + drop(3) + optimize(drop(4) + drop(5) + drop(6))

this is exactly the process that would be required to do this, but the exact details depend on which optimizer you pick and how many pages you can batch together. it would be computationally prohibitive to take 1,000's of html sources into a single 30MB html file and do it all in one go. but i dont see any issues with doing an entire site incrementally as i described.

[leeoniya]

@starchild

v1.0.7 now returns all used selectors, too. this can be used on multiple html sources. see https://github.com/leeoniya/dropcss#accumulating-a-whitelist

[gbrlmtrz]

I ran across the same "issue" and I applied the following script. Nothing too complicated, I just run this after building an angular app. I asume the script can the tweaked for whatever setup you have.

const dropcss = require('dropcss');
const glob = require('glob-all');
const { readFileSync, writeFileSync } = require('fs');

const cssSourceRoute = glob.sync('./dist/styles.*.css').toString();
const cssSource = readFileSync(cssSourceRoute, 'utf-8');

const files = glob.sync([
    './src/app/**/*.html',
    './src/app/**/*.ts'
]);

const htmlSources = new Map();
const whitelist = new Set();
const whiteRegex = [
    /toast/gi,
    /toastr/gi,
    /lazyload/gi
];

for(const file of files){
    htmlSources.set(file, readFileSync(file, 'utf-8'));
}

htmlSources.forEach((value, key) => {
    let res = dropcss({
        css : cssSource,
        html : value
    });
    res.sels.forEach(sel => whitelist.add(sel));
})

const cleaned = dropcss({
    html: '',
    css : cssSource,
    shouldDrop: sel => {

        if(whitelist.has(sel))
            return false;

        for(const regex of whiteRegex){
            if(sel.match(regex)){
                //console.log("keep ", sel);
                return false;
                break;
            }
        }

        //console.log("drop ", sel);
        return true;
    }
});
writeFileSync(cssSourceRoute, cleaned.css);