feature_request(option): automatic generation of HTML lists

Kristinita commented 2 years ago

1. Summary

It would be nice, if PurgeCSS automatically generated a list of HTML for content key, based on files settings.

2. Example of desired behavior

Example of desired purgecss.coffee configuration for Grunt:

module.exports =

    options:
        # [INFO] Suggested option
        autoGenerateTargetsContent: true
        # [INFO] Folder of my project
        cwd: "output/"
        # [INFO] List of all HTML files of my project
        #
        # [INFO] “cwd” setting applied for this option,
        # the full path — "output/**/*.html"
        contentProject: ["**/*.html"]

    kiraexampletarget:
        files:
            # [INFO] The full path — "output/theme/css/Bulma/bulma-modules.css"
            "theme/css/KiraExampleTheme.css": ["theme/css/Bulma/KiraExampleTheme.css"]

When I run command:

grunt purgecss:kiraexampletarget

PurgeCSS will search all files in my output/**/*.html that contain theme/css/KiraExampleTheme.css. Styles can be added in a variety of ways:

<!-- [INFO] 1. Simple adding styles -->
<link rel="stylesheet" href="../theme/css/KiraExampleTheme.css">
<!-- [INFO] 2. Relative path to links can be different -->
<link rel="stylesheet" href="./theme/css/KiraExampleTheme.css">
<!-- [INFO] 3. Critical CSS loading:
https://www.filamentgroup.com/lab/async-css.html#a-modern-approach -->
<link rel="preload" href="../theme/css/KiraExampleTheme.css" as="style" onload="this.rel='stylesheet'">
<!-- [INFO] 4. Asynchronous CSS loading:
https://www.filamentgroup.com/lab/load-css-simpler/#the-code -->
<link rel="stylesheet" href="../theme/css/KiraExampleTheme.css" media="print" onload="this.media='all'">
<!-- [INFO] 5. Deferred CSS loading:
https://github.com/shinsenter/defer.js/#Defer.css -->
<script>
    Defer.css("../theme/css/KiraExampleTheme.css", "kira-styles", 1000);
</script>

If HTML file contains theme/css/KiraExampleTheme.css added by any method, PurgeCSS add this file to the list — the value of content key.

For example, 2 of my files in **/*.html contain theme/css/KiraExampleTheme.css — output/KiraFirstFolder/KiraFirstExample.html and output/KiraFolderSecond/KiraExampleSecond.html. PurgeCSS will treat these 2 files as key of value "content". That is, PurgeCSS will work as if the configuration were:

module.exports =

    kiraexampletarget:
        options:
            content: [
                "output/KiraFirstFolder/KiraFirstExample.html"
                "output/KiraFolderSecond/KiraExampleSecond.html"
            ]
        files:
            "output/theme/css/KiraExampleTheme.css": ["output/theme/css/Bulma/KiraExampleTheme.css"]

3. Reasons for the desirability of feature

3.1. Automation

Currently, users are forced to manually add values for the content key. This takes a lot of time, especially if the site is large.

Also, as changes are made to the site, PurgeCSS users have to constantly check the values of the content key. It also takes time.

3.2. Accuracy

Errors can occur when manually adding values for the content key. The user may not add the necessary HTML files, or vice versa, add extra files. The user may forget to make changes to the PurgeCSS configuration after making changes to the site.

Automatic generation of values of the content key would prevent such user errors.

Thanks.