How to include autoprefixer for Jekyll - css

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

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.

Answer 3

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

Answer 4

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.