Grunt plugin to inline the contents of a css file - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
June 22, 2017 at 3:56 am #256013
Morgan
Participant
Hi everyone,

Is anyone aware of a Grunt plugin that takes a CSS file and inlines it into the head of the page (pre-processed)?
```
...
<head>
...

<style>body { background: red };</style>
...
</head>
...
```
Instead of:
```
...
<head>
...
<link rel="stylesheet" href="css/critical.css">
...
</head>
...
```
I’ve seen a couple of websites that do this, but I can’t find the name of the Grunt plugin that does it. I’m also using PostCSS, so a plugin for that would be great, too.

Cheers!
June 22, 2017 at 4:37 pm #256036
Atelierbram
Participant
There is this grunt-copy plugin that I use for inlining CSS in a style-block. So in gruntfile.js within a “copy task” one can copy anything and rename it to something else. Like, for example, copy a prefixed and minified build/css/critical.min.css file to build/inc/critical-css.inc.

Maybe you don’t need this but anyway: a PHP-include within those style tags can output this with the.inc suffix. Or in a template language like twig:
```
{% if page.page_type == "post" %}<style>{% include "build/inc/critical-css.inc" %}</style>{% endif %}
```
June 23, 2017 at 12:51 am #256044
Morgan
Participant
Hi Atelierbram

I’m using Pug as my templating language. The thought to simply include the file via that didn’t even cross my mind. Thank you, it’s now working exactly how I wanted.
```
style(type='text/css')
    include ../../staging/css/critical.css
```
Thank you for your help,
Morgan
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘CSS’ is closed to new topics and replies.