Add PurgeCSS u-gc* tasks

2026-01-15 00:55:08 +08:00 · 2022-03-24 17:53:45 -04:00
parent de6b3d73a1
commit ad4a1c7d47
5 changed files with 176 additions and 3 deletions
--- a/build/tasks/styles.js
+++ b/build/tasks/styles.js
@@ -2,6 +2,7 @@ import loconfig from '../utils/config.js';
 import message from '../utils/message.js';
 import notification from '../utils/notification.js';
 import postcss, { pluginsMap as postcssPluginsMap } from '../utils/postcss.js';
+import { PurgeCSS } from 'purgecss';
 import resolve from '../utils/template.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
@@ -142,7 +143,10 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
            }

            try {
-                await writeFile(outfile, result.css);
+                await writeFile(outfile, result.css).then(() => {
+                    //Purge css once file exists.
+                    purgeUnusedCSS(outfile, filestem);
+                });

                if (result.css) {
                    message(`${label || `${filestem}.css`} compiled`, 'success', timeLabel);
@@ -212,3 +216,39 @@ function createPostCSSProcessor(pluginsListOrMap, options)

    return postcss(plugins);
 }
+
+/**
+ * Purge unused styles of minified CSS files.
+ *
+ * @async
+ *
+ * @param  {string}         [outfile=false] - The path of a css file
+ *      If missing the function stops.
+ * @param {string} text      - The file name.
+ */
+async function purgeUnusedCSS(outfile = false, filestem) {
+    if(!outfile) {
+        return;
+    }
+
+    const timeLabel = `${filestem}.css purged in`;
+        console.time(timeLabel);
+
+    const purgeCSSContentFiles = Array.from(loconfig.tasks.purgeCSS.content);
+
+    const purgeCSSResults = await new PurgeCSS().purge({
+        content: purgeCSSContentFiles,
+        css: [outfile],
+        rejected: true,
+        defaultExtractor: content => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
+        safelist: {
+            standard: [/^((?!\bu-gc-).)*$/]
+        }
+    })
+
+    for(let result of purgeCSSResults) {
+        await writeFile(outfile, result.css)
+
+        message(`${filestem}.css purged`, 'cleaning', timeLabel);
+    }
+}
--- a/build/utils/message.js
+++ b/build/utils/message.js
@@ -17,6 +17,10 @@ export default function message(text, type, timerID) {
            console.log('✅ ', kleur.bgGreen().black(text));
            break;

+        case 'cleaning':
+            console.log('🧹 ', kleur.bgGreen().black(text));
+            break;
+
        case 'notice':
            console.log('ℹ️  ', kleur.bgBlue().black(text));
            break;
--- a/loconfig.json
+++ b/loconfig.json
@@ -19,7 +19,7 @@
            "dest": "./www/assets/images"
        },
        "views": {
-            "src": "./views/boilerplate/template"
+            "src": "./www/"
        }
    },
    "tasks": {
@@ -56,6 +56,14 @@
                ],
                "outfile": "{% paths.svgs.dest %}/sprite.svg"
            }
-        ]
+        ],
+        "purgeCSS": {
+            "content": [
+                "./www/**/*.html",
+                "./views/app/template/**/*.mustache",
+                "./src/App/Template/*.php",
+                "./assets/scripts/**/*"
+            ]
+        }
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
                "node-notifier": "^10.0.1",
                "node-sass": "^7.0.1",
                "postcss": "^8.4.12",
+                "purgecss": "^4.1.3",
                "svg-mixer": "^2.3.14",
                "tiny-glob": "^0.2.9"
            },
@@ -1406,6 +1407,18 @@
                "node": ">= 8"
            }
        },
+        "node_modules/cssesc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true,
+            "bin": {
+                "cssesc": "bin/cssesc"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
        "node_modules/dashdash": {
            "version": "1.14.1",
            "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -4966,6 +4979,19 @@
                "url": "https://opencollective.com/postcss/"
            }
        },
+        "node_modules/postcss-selector-parser": {
+            "version": "6.0.9",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz",
+            "integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==",
+            "dev": true,
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
        "node_modules/postcss-value-parser": {
            "version": "4.2.0",
            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -5128,6 +5154,50 @@
                "node": ">=6"
            }
        },
+        "node_modules/purgecss": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
+            "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
+            "dev": true,
+            "dependencies": {
+                "commander": "^8.0.0",
+                "glob": "^7.1.7",
+                "postcss": "^8.3.5",
+                "postcss-selector-parser": "^6.0.6"
+            },
+            "bin": {
+                "purgecss": "bin/purgecss.js"
+            }
+        },
+        "node_modules/purgecss/node_modules/commander": {
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+            "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+            "dev": true,
+            "engines": {
+                "node": ">= 12"
+            }
+        },
+        "node_modules/purgecss/node_modules/glob": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+            "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+            "dev": true,
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.0.4",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
        "node_modules/qs": {
            "version": "6.2.3",
            "resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz",
@@ -8186,6 +8256,12 @@
                "which": "^2.0.1"
            }
        },
+        "cssesc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true
+        },
        "dashdash": {
            "version": "1.14.1",
            "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -10899,6 +10975,16 @@
                }
            }
        },
+        "postcss-selector-parser": {
+            "version": "6.0.9",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz",
+            "integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==",
+            "dev": true,
+            "requires": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            }
+        },
        "postcss-value-parser": {
            "version": "4.2.0",
            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -11042,6 +11128,40 @@
            "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
            "dev": true
        },
+        "purgecss": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
+            "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
+            "dev": true,
+            "requires": {
+                "commander": "^8.0.0",
+                "glob": "^7.1.7",
+                "postcss": "^8.3.5",
+                "postcss-selector-parser": "^6.0.6"
+            },
+            "dependencies": {
+                "commander": {
+                    "version": "8.3.0",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+                    "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+                    "dev": true
+                },
+                "glob": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+                    "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+                    "dev": true,
+                    "requires": {
+                        "fs.realpath": "^1.0.0",
+                        "inflight": "^1.0.4",
+                        "inherits": "2",
+                        "minimatch": "^3.0.4",
+                        "once": "^1.3.0",
+                        "path-is-absolute": "^1.0.0"
+                    }
+                }
+            }
+        },
        "qs": {
            "version": "6.2.3",
            "resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz",
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
        "node-notifier": "^10.0.1",
        "node-sass": "^7.0.1",
        "postcss": "^8.4.12",
+        "purgecss": "^4.1.3",
        "svg-mixer": "^2.3.14",
        "tiny-glob": "^0.2.9"
    }