Script to insert the minimal CSS in your HTML

[peterbe]

First of all; minimalcss should be about generating that minimal CSS. That's the core and it's good to only have 1 core function.

I have my own hacky solutions (that work because the scope is tight) that change the HTML (e.g. build/index.html) so that it first loads the minimal CSS and then lazy loads in the CSS with JavaScript.
It would be nice to build such a script into the repo so it can be shared and improved on collectively.

Another option is to build this script into a separate repo and separate npmjs.com package.

[stereobooster]

Psst... I know one tool

[peterbe]

We should definitely do a better job of explaining, in the README about how react-snap uses minimalcss. It probably belongs more to #93 though.

[stereobooster]

As soon as you publish latest version of code to npm, I will update it in react-snap and craft example with gh-pages or firebase so you can see how it works.

[JohnAllen]

Did any script to inject CSS into html get written? Would be a huge help for something I'm working on!

[peterbe]

@JohnAllen Nothing got added to this repo and I think that's good. It's just too many "it depends". For example, I have my own blog that uses minimalcss but the tooling that replaces the <link rel=stylesheet> tags with <style> (and lazy loading <link>) is done in Python.

If you're looking for inspiration you should definitely look at react-snap.

[JohnAllen]

Cool. I think what I need/will use is this: https://github.com/Automattic/juice. Want to extra CSS from all files (html, CSS + JS) and inline it.

[peterbe]

Cool. I think what I need/will use is this: https://github.com/Automattic/juice. Want to extra CSS from all files (html, CSS + JS) and inline it.

No. That's something entirely different.

What tools like react-snap does is it converts...

<link rel=stylesheet href=/bloated.css>
</head>

...into this...

<style>
...minimal CSS extracted from bloated.css...
</style>
<link rel=preload as=style href=/bloated.css>
</head>

[JohnAllen]

I get that. The other thing is what I need though.