Add CSS nesting in prod

Ansimorph · Jun 1, 2024 · 25123e4 · 25123e4
1 parent e2319c6
commit 25123e4
Show file tree

Hide file tree

Showing 4 changed files with 1,344 additions and 208 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,6 +1,7 @@
 const eleventyVue = require("@11ty/eleventy-plugin-vue");
 const svgContents = require("eleventy-plugin-svg-contents");
 const imageShortcode = require("./src/utils/image.js");
+const htmlnano = require("htmlnano");
 
 module.exports = function (config) {
     config.addPlugin(eleventyVue, {
@@ -9,7 +10,6 @@ module.exports = function (config) {
                 postcssPlugins: [
                     require("postcss-import"),
                     require("postcss-mixins"),
-                    require("postcss-nested"),
                     require("postcss-custom-units"),
                     require("postcss-round-float"),
                 ],
@@ -19,7 +19,11 @@ module.exports = function (config) {
 
     config.addPlugin(svgContents);
 
-    config.addTransform("htmlmin", require("./src/utils/htmlmin.js"));
+    config.addTransform("htmlnano", async (content, outputPath) => {
+        if (!outputPath.endsWith("html")) return content;
+
+        return await htmlnano.process(content).html;
+    });
 
     config.addPassthroughCopy({ "./src/assets/": "/" });