From a5173616a7338bc7356cf1ceda8d9c8277cbb5f9 Mon Sep 17 00:00:00 2001
From: TrebledJ <39648915+TrebledJ@users.noreply.github.com>
Date: Tue, 11 Jun 2024 01:21:01 +0800
Subject: [PATCH] fix(site): bundle css and remove css minification

html-minifier uses cleancss. After testing a bit, it seems CleanCSS will the ENTIRE icon-table CSS styles... which, btw, is just a simple:
```css
.icon-table {
    td {
      text-align: center;
      vertical-align: middle;
    }
  }
```
Why? IDK! It's utterly preposterous. What did this innocent CSS ever do to deserve this?!?
---
 _includes/head.html                           |  1 +
 ...2024-05-23-optimising-web-icons-for-fun.md | 11 ++++-
 eleventy.config.js                            |  2 +-
 eleventy/shortcodes.js                        |  2 +-
 package-lock.json                             | 41 ++++++++-----------
 5 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 72807df48..05d3676c7 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -21,6 +21,7 @@
             <link rel="stylesheet" href="{{asset}}" media="print"/>
         {% endfor %}
     {% endif %}
+    <style>{% getBundle "css" %}</style>
 
     {% include "utilities/async-css.html" %}
     {% include "utilities/theme-switch.html" %}
diff --git a/content/posts/programming/mini-projects/2024-05-23-optimising-web-icons-for-fun.md b/content/posts/programming/mini-projects/2024-05-23-optimising-web-icons-for-fun.md
index 2e2d13251..4037b88d4 100644
--- a/content/posts/programming/mini-projects/2024-05-23-optimising-web-icons-for-fun.md
+++ b/content/posts/programming/mini-projects/2024-05-23-optimising-web-icons-for-fun.md
@@ -80,7 +80,16 @@ It's a lot of indirection, and this is one reason why SVGs are preferred; but he
 
 To complicate matters, FA fonts have different **variants**, and they modularise this by using the same codepoint, but separate font files. Not all fonts do this though. Devicon packs all their styles into a single font file. Here are some examples of FA styles.
 
-{% table "td {text-align: center; vertical-align: middle; }" %}
+{% css %}
+  .icon-table {
+    td {
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
+{% endcss %}
+
+{% table "icon-table" %}
 
 |                         | Solid                            | Regular                          | Brands                        |
 |-------------------------|----------------------------------|----------------------------------|-------------------------------|
diff --git a/eleventy.config.js b/eleventy.config.js
index b997f46aa..906d720f8 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -88,7 +88,7 @@ module.exports = function (eleventyConfig) {
         const minified = htmlmin.minify(content, {
           removeComments: true,
           includeAutoGeneratedTags: false,
-          minifyCSS: true,
+          minifyCSS: false,
           minifyJS: true,
           collapseWhitespace: true,
           collapseBooleanAttributes: true, // e.g. no <script defer="defer">.
diff --git a/eleventy/shortcodes.js b/eleventy/shortcodes.js
index 56db3d927..5d0ff3a6a 100644
--- a/eleventy/shortcodes.js
+++ b/eleventy/shortcodes.js
@@ -45,7 +45,7 @@ module.exports = function (eleventyConfig) {
     '<div class="details-collapse-bottom"><sub><a class="details-collapse-button">(collapse)</a></sub></div></div></details>'
   ));
 
-  eleventyConfig.addShortcode('table', style => `<div class="table-container" style="${style ?? ''}">`);
+  eleventyConfig.addShortcode('table', clss => `<div class="table-container ${clss ?? ''}">`);
 
   // Paired shortcode workaround: see Note [endalert Workaround].
   eleventyConfig.addShortcode('endtable', () => '</div>');
diff --git a/package-lock.json b/package-lock.json
index f8dcaef29..1c17ed429 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3048,14 +3048,15 @@
 			"license": "MIT"
 		},
 		"node_modules/clean-css": {
-			"version": "4.2.4",
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+			"integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
 			"dev": true,
-			"license": "MIT",
 			"dependencies": {
 				"source-map": "~0.6.0"
 			},
 			"engines": {
-				"node": ">= 4.0"
+				"node": ">= 10.0"
 			}
 		},
 		"node_modules/clean-css-cli": {
@@ -3075,17 +3076,6 @@
 				"node": ">= 10.12.0"
 			}
 		},
-		"node_modules/clean-css-cli/node_modules/clean-css": {
-			"version": "5.3.3",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"source-map": "~0.6.0"
-			},
-			"engines": {
-				"node": ">= 10.0"
-			}
-		},
 		"node_modules/clean-css-cli/node_modules/commander": {
 			"version": "7.2.0",
 			"dev": true,
@@ -4777,6 +4767,18 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/html-minifier/node_modules/clean-css": {
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
+			"integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==",
+			"dev": true,
+			"dependencies": {
+				"source-map": "~0.6.0"
+			},
+			"engines": {
+				"node": ">= 4.0"
+			}
+		},
 		"node_modules/html-validate": {
 			"version": "8.20.0",
 			"resolved": "https://registry.npmjs.org/html-validate/-/html-validate-8.20.0.tgz",
@@ -4960,17 +4962,6 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
-		"node_modules/icon-minifier/node_modules/clean-css": {
-			"version": "5.3.3",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"source-map": "~0.6.0"
-			},
-			"engines": {
-				"node": ">= 10.0"
-			}
-		},
 		"node_modules/icon-minifier/node_modules/commander": {
 			"version": "12.0.0",
 			"dev": true,