critters icon indicating copy to clipboard operation
critters copied to clipboard

How to add the code inline instead of embedded

Open GreedHub opened this issue 2 years ago • 2 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?

GreedHub avatar May 16 '22 18:05 GreedHub

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)

rschristian avatar May 31 '22 14:05 rschristian

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.

developit avatar Jun 02 '22 23:06 developit