Automate inserting stylesheet into HTML

Question

How do I automate turning something like ...

<link rel="stylesheet" href="css/main.css">

... into something like ...

<style>
    /* lotsa CSS rules */
</style>

... in an HTML document?

I currently do it manually. I also use a postCSS with a bunch of plugins. So, I start with a separate CSS file and I use a link tag initially. When I'm done working on the CSS, I comment out the link tag and add a style tag and copy all of the CSS into the document. Vim makes this a little easier:

:read css/main.css

I already use gulp for automating some of my workflow, so I prefer a solution that can be easily integrated with that.

Gulp has been a great benefit for me, but I might not understand enough about how it works. I tried searching the plugins and I found too many that look like they'll do what I want. Some of them seem to process the CSS and HTML to add style tags to the individual elements, which is not what I want.

Out of curiosity why are you even interested in doing this? What's the benefit of putting the CSS directly inside the ` — james_s_tayler, Jan 18 '16 at 03:34
@JamesScottTayler to eliminate [Render blocking CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=en) and [Minimize HTTP Requests](https://developer.yahoo.com/performance/rules.html) — Vince, Jan 18 '16 at 04:33
Ah ok. Those seem like some pretty good reasons. Wasn't aware of them, thanks for the info. Looking at gulp-smoosher isn't that what you are wanting to achieve? It says it takes a traditionally linked css file and inlines the contents of the css file into the `` tag in the `` section of the document. Did you give it a try? Failing that i'd just write bash one-liner with `grep` and `sed` to do it, but these tools seem much more appropriate. — james_s_tayler, Jan 18 '16 at 04:50
Smoosher looked like the right one to me too, but so did a few others. I tried smoosher and it works, but I ran into [another problem](http://stackoverflow.com/q/34846749/2948042), but I'm probably misunderstanding something about how Gulp works internally. I was hoping for an answer from someone with experience to say something like "this is how I do it". — Vince, Jan 18 '16 at 05:30

score 1 · Answer 1 · answered Jan 18 '16 at 05:00

1

It looks like Grunt has a task for this. Check out the github repo here.

Install the plugin:

npm install grunt-inline --save-dev

Enable the plugin inside your gruntfile:

grunt.loadNpmTasks('grunt-inline');

In your project's Gruntfile, add a section named inline to the data object passed into grunt.initConfig().

grunt.initConfig({
  inline: {
    dist: {
     src: 'src/index.html',
    dest: 'dist/index.html'
   }
  }
})

Which should turn this:

<link href="css/style.css?__inline=true" rel="stylesheet" />

Into this:

<style>
    /* contents of css/style.css */
</style>`

answered Jan 18 '16 at 05:00

james_s_tayler

1,823
1
15
20

This would probably do it, but I'm really hoping for a Gulp solution. There has been so much time lost to learning and setting up the build environment. I'd write that bash code before switching again for this one bit of functionality. I thought web development was supposed to be easier these days :] – Vince Jan 18 '16 at 05:35
It's supposed to be easier if you're using [yeoman](http://yeoman.io/) but it's that initial learning curve that slows things down. – james_s_tayler Jan 18 '16 at 05:38

Automate inserting stylesheet into HTML

1 Answers1