GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

Home Page:https://npm.im/critters-webpack-plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to add the code inline instead of embedded

GreedHub opened this issue · comments

Hi, I'm trying the library with NextJs but, along other libraries that I've tried so far, the css it's actually generated on a style tag on the head of the HTML, even when they say that the css will be inlined.

I actually need the code to be inline because I need to make mail templates.

Am I using it wrong? Is there any way to get the code from a css file and adding it inline in the tags?

That's what inlining is, taking the CSS from the external stylesheet and add it into the HTML doc (usually to avoid FOUC).

It sounds like you're asking about converting the CSS stylesheet into the style attribute on every element? Yes, that's not what this is for nor does it really help facilitate that (at least, not in a meaningful way, though it could potentially be used as an intermediary I suppose)

Not sure if it's helpful, but it seems like you're looking for something like this:

https://jsfiddle.net/developit/31kpgd0n/

You could use JSDOM to make it run on the server.