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!

Answer 1

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.

Answer 2

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

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.