Description
Windows users should install node.js. Autoprefixer Rails doesn’t work with old JScript in Windows.
Autoprefixer alternatives and similar gems
Based on the "Management" category.
Alternatively, view Autoprefixer alternatives based on common mentions on social networks and blogs.
CodeRabbit: AI Code Reviews for Developers
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Autoprefixer or a related project?
README
Autoprefixer Rails
Autoprefixer is a tool to parse CSS and add vendor prefixes to CSS rules using values from the Can I Use database. This gem provides Ruby and Ruby on Rails integration with this JavaScript tool.
Differences
The best way to use Autoprefixer is with webpack or Gulp.
Autoprefixer Rails doesn’t support these Autoprefixer features:
- Browsers in
package.json
. - Custom browsers usage statistics.
Usage
Windows users should install Node.js. Autoprefixer Rails doesn’t work with old JScript in Windows.
Autoprefixer Rails uses ExecJS that will use the best available JavaScript runtime. Currently this gem is tested to work with Node.js version 10 and up and with mini_racer, but will not work with therubyracer.
Ruby on Rails
Add the autoprefixer-rails
gem to your Gemfile
:
gem "autoprefixer-rails"
Clear your cache:
rake tmp:clear
Write your CSS (Sass, Stylus, LESS) rules without vendor prefixes
and Autoprefixer will apply prefixes for you.
For example in app/assets/stylesheet/foobar.sass
:
:fullscreen a
display: flex
Autoprefixer uses the Can I Use database with browser statistics and properties support to add vendor prefixes automatically using the Asset Pipeline:
:-webkit-full-screen a {
display: -webkit-box;
display: -webkit-flex;
display: flex
}
:-moz-full-screen a {
display: flex
}
:-ms-fullscreen a {
display: -ms-flexbox;
display: flex
}
:fullscreen a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
If you need to specify browsers for your Rails project, you can save them
to .browserslistrc
and place it under app/assets/stylesheets/
or any of its ancestor directories
> 1%
last 2 versions
IE > 8 # comment
See Browserslist docs for config format. But > 5% in US
query is not
supported in Rails, because of ExecJS limitations. You should migrate to webpack
or Gulp if you want it.
Note: you have to clear cache (rake tmp:clear
) for the configuration
to take effect.
You can get what properties will be changed using a Rake task:
rake autoprefixer:info
To disable Autoprefixer just remove postprocessor:
AutoprefixerRails.uninstall(Rails.application.assets)
Sprockets
If you use Sinatra or another non-Rails framework with Sprockets, just connect your Sprockets environment with Autoprefixer and write CSS in the usual way:
assets = Sprockets::Environment.new do |env|
# Your assets settings
end
require "autoprefixer-rails"
AutoprefixerRails.install(assets)
Ruby
If you need to call Autoprefixer from plain Ruby code, it’s very easy:
require "autoprefixer-rails"
prefixed = AutoprefixerRails.process(css, from: 'main.css').css
Compass
You should consider using Gulp instead of Compass binary, because it has better Autoprefixer integration and many other awesome plugins.
But if you can’t move from Compass binary right now, there’s a hack
to run Autoprefixer after compass compile
.
Install autoprefixer-rails
gem:
gem install autoprefixer-rails
and add post-compile hook to config.rb
:
require 'autoprefixer-rails'
on_stylesheet_saved do |file|
css = File.read(file)
map = file + '.map'
if File.exists? map
result = AutoprefixerRails.process(css,
from: file,
to: file,
map: { prev: File.read(map), inline: false })
File.open(file, 'w') { |io| io << result.css }
File.open(map, 'w') { |io| io << result.map }
else
File.open(file, 'w') { |io| io << AutoprefixerRails.process(css) }
end
end
Visual Cascade
By default, Autoprefixer will change CSS indentation to create nice visual cascade of prefixes.
a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
You can disable this by specifying cascade: false
in config/autoprefixer.yml
or in process()
options.
Source Map
Autoprefixer will generate a source map if you set map
option to true
in
process
method.
You must set input and output CSS files paths (by from
and to
options)
to generate correct map.
result = AutoprefixerRails.process(css,
map: true,
from: 'main.css',
to: 'main.out.css')
Autoprefixer can also modify previous source map (for example, from Sass
compilation). Just set original source map content (as string) to map
option:
result = AutoprefixerRails.process(css, {
map: File.read('main.sass.css.map'),
from: 'main.sass.css',
to: 'main.min.css')
result.map #=> Source map from main.sass to main.min.css
See all options in PostCSS docs. AutoprefixerRails will convert Ruby style
to JS style, so you can use map: { sources_content: false }
instead of camelcase sourcesContent
.
Security Contact
To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.