0

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).

  • @Izzy Linux. Free. Updated the question. Thanks. – JamesThomasMoon1979 Oct 4 at 23:09
  • Thanks! Added the linux tag for better discovery (gratis tag no longer fits due to max-tags=5). Good luck! Cleaning up comments then. – Izzy Oct 5 at 10:36
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.

  • Gulp looks very powerful. But I am a javascript newbie so using gulp will be a challenging learning experience. Thanks @Oleg! – JamesThomasMoon1979 Oct 5 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.