website preprocessor to embed .css files into .html files

Question

I'm looking for a tool that will embed link CSS files into the .html file.

This tool would scan the .html file. It would replace a line like:

<link rel="stylesheet" href="main.css" type="text/css" />

with the contents of the file main.css (wrapped in a <style> element). It would re-write the .html file with the embedded CSS code from file main.css.

I have found tools that "inline" the CSS within HTML elements (<div style="...">). These are intended for email. I do not want those tools.
I want a tool that would copy the CSS file into a single <style> element within the .html file.

This tool should have a CLI, run on Linux, and be free (no payments, no shareware).

Answer 1

One solution could be to use Gulp + Critical extension.

It's a free cross platform CLI tool. And it allows to extract critical CSS and either embed it into HTML file or extract it to another CSS file.

When you get to configuring your gulpfile.js, here's mine which I've used while testing this:

const gulp          = require('gulp');
const critical      = require('critical').stream;
function inline(cb) {
    return gulp.src('./src/*.html')
    .pipe(critical({
        inline: true,
        base: './src',
        width: 320,
        height: 480,
        minify: false
    }))
    .on('error', function(err) { log.error(err.message); })
    .pipe(gulp.dest('./dist'));
}
exports.inline = inline;

When you run gulp inline it analyses your index.html file and creates a copy of it in dist directory, but with critical CSS inlined and extra JS for asynchronous loading.

See a nice Gulp tutorial and Critical documentation for more examples and info.

Note: This requires getting hang of Gulp first if you are not familiar with it yet.