Eleventy: Minify CSS and overwrite file (without inline integration)

.eleventy.js

module.exports = function (eleventyConfig) {

// npm install --save-dev clean-css
    eleventyConfig.on('afterBuild', () => {
        const CleanCSS = require("clean-css");
        const fs = require('fs');

        // Run me after the build ends
        var inputFile = 'src/assets/css/main.css';
        var input = fs.readFileSync(inputFile, 'utf8');
        var output = new CleanCSS().minify(input);
        fs.writeFile('_site/assets/css/main.css', output.styles, function (err) {
            if (err) return console.log('Error minifying main.css' + err);
            //success
          });
    });
}

// if you want to use inline styles, see: https://www.11ty.dev/docs/quicktips/inline-css/

An ESM version for 11ty v3.0.0 looks like this:

import CleanCSS from 'clean-css';
import fs from 'fs';

eleventyConfig.on('afterBuild', () => {
  const inputFile = 'src/assets/css/main.css';
  const input = fs.readFileSync(inputFile, 'utf8');
  const output = new CleanCSS().minify(input);

  fs.writeFile('_site/assets/css/main.css', output.styles, (err) => {
    if (err) return console.log('Error minifying main.css' + err);
    //success
  });
});

@Nooshu Cool, thanks very much for adding this information!

Thought about upgrading https://github.com/mandrasch/11ty-plain-bootstrap5 to v3 (and Vite) as well, but don't know If I'll find the time.

No problem @mandrasch! I believe it will take a while for the community to migrate all resources across to v3! It may be that AI could help you with this?