Support for CSS autoprefixer gem

[nz]

The CSS autoprefixer gem looks great, and it can be used by Sprockets as a CSS post-processor. Seems like a nice addition for jekyll-assets to lazily include if the gem is present in the load path.

https://github.com/ai/autoprefixer-rails

I have a local fork that's just dynamically injecting in the Jekyll::AssetsPlugin::Environment#initialize method if it can require the gem:

# load css autoprefix post-processor
begin
  require 'autoprefixer-rails'
  AutoprefixerRails.install(self)
rescue LoadError
end

That gets the job done without much fuss, though there may be a better way. Happy to whip this up into a proper pull request if I can get some guidance on a more modular place to hook in to the Sprockets environment object.

[ai]

Cool. Don’t forget add Jekyll How To to Autoprefixer’s README, when you will release it :).

[ixti]

@ai @nz I have merged PR of @nz, but have some thoughts on refactoring it later (gonna rework how extras are enabled / installed in general -- want to support options / configs etc). Will try to provide PR for autoprefixer README afterwards

[adamjgrant]

Autoprefixer's docs instruct simply to install jekyll-assets and autoprefixer-rails but I assume there's more to it than that. Is this documented somewhere?

[nz]

@ajkochanowicz simple as that.

Jekyll Assets tries to require the autoprefixer-rails gem. If successful, then it sets up Autoprefixer, otherwise it quietly rescues the LoadError moves on.

• Original PR: https://github.com/ixti/jekyll-assets/pull/68/files
• Current implementation: install_autoprefixer! in https://github.com/ixti/jekyll-assets/blob/master/lib/jekyll/assets_plugin/environment.rb#L69-74

[adamjgrant]

@nz Thanks, so the output CSS should already have prefixes (where applicable) without any other steps? This isn't happening on my end.

[adamjgrant]

Are you sure I don't need to create a converter plugin as well? http://jekyllrb.com/docs/plugins/

[adamjgrant]

It seems like you would also need to add the two gems to _config.yml per the jekyll docs. I did that, but still no success.

[danschultz]

@ajkochanowicz did you have any luck with this? I'm having the same issue.

[ixti]

As part of my roadmap for 1.0 release all 3rd-party integrations are moved out of the core (by different reasons). So, if you are using master branch and not latest stable release, you won't have any integrations like bourbon or compass out of the box. You will need to either setup integrations yourself with configure api:

::Jekyll::Assets.configure do |assets|
  assets.append_path "some path to compass assets"
end

Or, in case of Autoprefixer, you can use jekyll-assets-autoprefixer gem to do all the magic for you.

NB This instructions are valid for master branch only. If you are using stable release (0.14.x) you should follow instructions given on Jekyll::Assets README or Autoprefixer's README.

[ixti]

If you are experiencing troubles with 0.14 version of jekyll-assets, please, provide some more details (a test repo will be huge help). Basically, installation should be pretty simple:

• add gem "autoprefxer-rails" into your Gemfile with gem "jekyll-assets" and you're done.

If you need to tune-up autoprefixer config, create autoprefixer.yml config file in the root of your site directory.

[danschultz]

@ixti, I'm using jekyll-assets version 0.14, with autoprefixer version 5.1.0. You should be able to reproduce the problem on my branch.

[escapedcat]

Hm, having the same problem...

jekyll 2.5.3
autoprefixer-rails-6.0.3
jekyll-assets-1.0.0

I added _autoprefixer.yml:

:safe: false
:browsers:
  - "last 5 version"
  - "> 1%"
  - "iOS 7"
  - "Explorer 7"

No prefixed output for flexbox.

Using Autoprefixer with Jekyll looks more promising.
I created _plugins/ext.rb, placed a test file into _assetes/stylesheets and served it with the {% stylesheet style.css %} tag. I get this css-file in the created page, but not prefixed. I tried it with the config I mentioned above.

[envygeeks]

If you are 1.0.0 then there is nothing we can do for you as it's legacy that is unless somebody wants to send a pull request to the legacy branch. However if you are on 2.0.0.pre.beta1 then all you need do is install autoprefixer-rails and it will enable autoprefixing for you. _autoprefixer.yml is not supported in 2.0.0 a sa file that we accept. If you would like it accepted then file a ticket and we'll look into it for 2.1 or 2.2 once we can audit it's options.

[envygeeks]

To add another note, just like autoprefixer-rails with Rails, you need to have a JavaScript runtime available too, NodeJS or TheRubyRacer are preferable. TheRubyRhino tends to have issues with NodeJS stuff.

[aastudio]

It doesn't work for me since Jekyll 3. Anyone else ? (before I spend hours debugging ;))

[envygeeks]

Then update to the beta version.

[aastudio]

of Jekyll ? or autoprefixer-rails ? or jekyll-assets ?

[envygeeks]

@aastudio jekyll-assets, use the beta version from RubyGems or master from your Gemfile and you'll get autoprefixer support by just installing the Gem: https://github.com/jekyll/jekyll-assets#addons

[amfischer]

I've been having trouble for a couple days trying to get autoprefixer working. I'm probably doing something obvious wrong, but after browsing documents and issues for autoprefixer-rails and jekyll-assets I can't figure out what I'm doing wrong.

In my Gemfile I have

gem "jekyll", "3.7.3"

group :jekyll_plugins do
  gem "jekyll-assets"
  gem "autoprefixer-rails"
end

In my _config.yml I have

assets:
  autoprefixer:
    browsers:
      - "last 2 versions"
      - "IE > 9"

I tried adding to the autoprefixer configuration, even though docs show this shouldn't be necessary

assets:
  autoprefixer:
    browsers:
      - "last 2 versions"
      - "IE > 9"
  plugins:
    css: { autoprefixer: { flexbox: true, grid: true }}

My file structure is default for Jekyll

assets 
  _sass
  css

I still can't get it to work though. Any help would be much appreciated.

[ChidoYo]

In what location should the _config.yml file be placed?
I am trying to enable grid: true. Only -webkit- vendor prefixes are being added and no -ms- prefixes are added.