Remove unused CSS

[jdbit]

Hi,
Just curious if someone managed to make django-compressor work with UnCSS, PurgeCSS, or other tools that remove unused CSS? Would be nice to minimize bloated bootstrap.css by removing all the styles that are not in use.

[carltongibson]

@jdbit — not that I know of, but that would be a cool thing to do.

1. Process templates for in-use selectors.
2. Pass that to a filter running PurgeCSS
3. Workout how to optimise that a bit.

Fancy pottering on it?

[jdbit]

Thanks! I'm not that good in Python/Django, but I will try to figure out.

[jdbit]

Okay, I wrote this filter and looks like it works:

from compressor.filters import CompilerFilter
from django.conf import settings
from pathlib import Path
from django.template.loaders.app_directories import get_app_template_dirs


COMPRESS_PURGECSS_BINARY = "purgecss"
COMPRESS_PURGECSS_ARGS = ""
COMPRESS_PURGECSS_APPS_INCLUDED = ['allauth']


class PurgeCSSFilter(CompilerFilter):
    command = '{binary} --css {infile} -o {outfile} {args}'
    options = (
        ("binary",
         getattr(
             settings,
             "COMPRESS_PURGECSS_BINARY",
             COMPRESS_PURGECSS_BINARY)),
        ("args",
         getattr(
            settings,
            "COMPRESS_PURGECSS_ARGS",
            COMPRESS_PURGECSS_ARGS)),
             )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        template_files = " ".join(self.get_all_template_files())
        self.command += " --content {}".format(template_files)

    def get_all_template_files(self):
        files = []
        apps = getattr(settings, "COMPRESS_PURGECSS_APPS_INCLUDED", COMPRESS_PURGECSS_APPS_INCLUDED)
        dirs = get_app_template_dirs('templates')
        for d in dirs:
            if 'site-packages' in str(d):
                for app in apps:
                    if app in str(d):
                        for f in Path(d).glob('**/*.html'):
                            files.append(str(f))
            else:
                for f in Path(d).glob('**/*.html'):
                    files.append(str(f))
        return files

It removes some classes that were added by third-party apps like allauth, crispy, etc. as their template files are not included, but these classes can be added via --safelist classnameToSafelist argument. Will test it tomorrow on my websites.
Could you please tell me what do you mean by "use subprocess for the actual filtering step"?

UPDATE: A bit improved the filter as it didn't work when cached template loader used. Now it also has COMPRESS_PURGECSS_APPS_INCLUDED option to include apps that should be also scanned for templates.

[carltongibson]

It's okay, compressor is handling it for you... command = '{binary} --css {infile} -o {outfile} {args}'

[carltongibson]

This looks good. I shall try to have a play with it. 🚀

[jdbit]

Thank you, would be great to hear your feedback!