How to include autoprefixer for Jekyll

Question

New to Jekyll and new to Ruby I tried to include autoprefixer-rails for my (s)css files directly into Jekyll. So once the page is generated by Jekyll autoprefixer would run over my generated css files. Unfortunately, I haven't managed to set things up properly and autoprefixer doesn't seem to even touch my files.

Following my Gemfile:

source "https://rubygems.org"

gem 'jekyll'
gem 'jekyll-assets'
gem 'autoprefixer-rails'

And parts of my Jekyll configuration file:

...
gems: ['jekyll-assets', 'autoprefixer-rails']
...

Which settings are missing to make it work? Any help is appreciated!

Bisque

I recently started to do it all with grunt, So I'll let Autoprefixer run, before the site is recompiled, so it is only run when the CSS changes and not whenever any content changes. So I do highly recommend a jekyll workflow with grunt. – Berners

Thanks, I've read about grunt but I was hoping that there is build-in solution, guess I will have a look at it now :) – Bisque

I feel like it is a great addition to the whole jekyll workflow. If you use Sass and lots of javascript it just really helps with the whole process. Concatenation, minification, autoprefixer, livereload. I really only see advantages to using jekyll alone. – Berners

Answer 1

autoprefixer-rails is a Rails plugin, it has nothing to do with Jekyll and can't be used in Jekyll.

If you need a similar feature in Jekyll, you currently have no other options than develop it yourself. You can grab part of the code from the Rails plugin, but the way Jekyll plugins work is significantly different.

Tyishatyke

Thank you for the answer. I know about autoprefixer being a Rails plugin but isn't Jekyll a Rail application? Looking on the official autprefixer-rails github repo Jekyll gets even mentioned as "Other Build Tool". There at least it looks as if the two can somehow be combined, no? – Bisque

Jekyll is not a Rails application, it's a Ruby software. Jekyll shares nothing with Rails (except the fact that they are written with the same programming language). – Tyishatyke

Thank you! So I guess I have to run them one after another, too bad. – Bisque

@SimoneCarletti jekyll-assets uses autoprefixer-rails: github.com/jekyll/jekyll-assets#addons – Whinny

Answer 2

I am able to use it with jekyll 3 by installing the octopress autoprefixer here: https://github.com/octopress/autoprefixer.

You then put: gems: [octopress-autoprefixer] in your config file. I am not using octopress, I only installed this to see if it would work.

In the process I also installed node.js (on a pc , win 10), so I could install autoprefixer-rails. Not sure if the octopress installer took care of this or not though, I was just trying random things to see if it would work. I think node.js was a requirement as I remember nothing happened until I rebooted and then everything worked.

It works great, though it does slow my build time down - on a small site that normally builds in .5 seconds it goes up to 12 seconds.

Shenitashenk

Answer 3

That's perfectly possible, and easy, too!

Most resources you'll find online will suggest to switch to Jekyll Assets, which comes with a number of default plugins, including autoprefixer-rails. That, however, replaces the entire Jekyll asset pipeline, and requires changes in lots of places. A fairly high investment up front, just to get it working. Plus, the project appears to be dormant.

Continuing my quest to find a simple solution to a simple problem, I came across jekyll-autoprefixer, available as a Ruby Gem. Integrating that into my Jekyll workflow was embarrassingly straightforward:

• Update the Gemfile to include the following:

  gem "jekyll-autoprefixer", "~> 1.0.2"
  

• Add the following to _config.yml:

  plugins:
    - jekyll-autoprefixer
  

• Optionally add required browser support to _config.yml (e.g. for the latest 2 versions and Edge version 14 and up):

  autoprefixer:
    browsers: 
      - last 2 versions
      - Edge >= 14
  

  Note: You can alternatively supply a .browserslistrc file in the root directory.

• Optionally enable CSS Grid Layout prefixing. This appears to be unsafe, and is disabled by default. You can either enable it from CSS code using a control comment (e.g. /* autoprefixer grid: autoplace */), or globally through _config.yml:

  autoprefixer:
    grid: autoplace
  

That's all that's needed to integrate autoprefixer into Jekyll.

Predictor

How did you manage this to work since during my jekyll build it complains about not having a javascript runtime Error: Could not find a JavaScript runtime. – Galer

Answer 4

Documentation to add Autoprefixer to Jekyll with jekyll-assets and autoprefixer-rails has been updated: https://github.com/jekyll/jekyll-assets#addons

Whinny