optimize css

.eleventy.js

@@ -1,5 +1,6 @@
 const lunr = require("lunr");
 const markdownit = require("markdown-it");
+const CleanCSS = require("clean-css");
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("src/css");
@@ -65,6 +66,10 @@ module.exports = function (eleventyConfig) {
   };
   eleventyConfig.setLibrary("md", markdownit(options));
 
+  eleventyConfig.addFilter("cssmin", function(code) {
+    return new CleanCSS({}).minify(code).styles;
+  });
+
   return {
     dir: {
       input: "src",

package.json

@@ -15,6 +15,7 @@
     "@11ty/eleventy": "^2.0.1"
   },
   "dependencies": {
+    "clean-css": "^5.3.2",
     "lunr": "^2.3.9",
     "markdown-it": "^13.0.1"
   }

src/css/bundle.html

@@ -0,0 +1,20 @@
+---
+permalink: bundle.css
+---
+{% capture css %}
+    {% include "css/base.css" %}
+    {% include "css/index.css" %}
+    {% include "css/contacto.css" %}
+    {% include "css/cooperativa.css" %}
+    {% include "css/noticia-card.css" %}
+    {% include "css/noticia.css" %}
+    {% include "css/noticias.css" %}
+    {% include "css/project-card.css" %}
+    {% include "css/proyecto.css" %}
+    {% include "css/proyectos.css" %}
+    {% include "css/servicios.css" %}
+    {% include "css/servicios/participacion.css" %}
+    {% include "css/kit-digital.css" %}
+{% endcapture %}
+
+{{ css | cssmin }}

src/layouts/base.html

@@ -79,12 +79,7 @@
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />
     <link rel="icon" href="/assets/favicon.ico" type="image/png" />
-    <link rel="stylesheet" href="/css/base.css" />
-    <link rel="stylesheet" href="/css/project-card.css" />
-    <link rel="stylesheet" href="/css/noticia-card.css" />
-    {% if css %} {% for link in css %}
-    <link rel="stylesheet" href="{{link}}" type="text/css" />
-    {% endfor %} {% endif %}
+    <link rel="stylesheet" href="/bundle.css" type="text/css" />
     <meta name="generator" content="{{ eleventy.generator }}" />
     <script src="/js/transitions.js" type="module"></script>
     <script src="/js/base.js" type="module" defer></script>