fs/rails-base — pull request #148 by vast (2014-05-13 09:38:30+00:00)
Title: Add autoprefixer

Adds [autoprefixer-rails](https://github.com/ai/autoprefixer-rails).

TLDR:

* https://github.com/rails/rails/issues/13712
* http://vimeo.com/album/2810311/video/90633041
* https://github.com/ai/autoprefixer#autoprefixer

Autoprefixer is a CSS post-processor which _removes_ no longer necessary prefixes and adds required prefixes.

Before:

```css
a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
```

After:

```css
a {
border-radius: 5px;
}
```

Before:

```css
.post {
columns: 2;
}
```

After:

```css
.post {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2
}
```

In addition autoprefixer does some other clever things:

1. understands that flexbox and gradients have different syntax in browsers. See the full list of such 'hacks' here: https://github.com/ai/autoprefixer/tree/master/lib/hacks
2. properly handles `@keyframes` by expanding them:

Before:

```css
@keyframes foo {
from { top: 0 }
to { top: 100px }
}
```

After:

```css
@-webkit-keyframes foo {
from { top: 0 }
to { top: 100px }
}

@keyframes foo {
from { top: 0 }
to { top: 100px }
}
```

3. supports gradients:

Before:

```css
.post {
background: linear-gradient(to bottom, #fff, #000);
}
```

After:

```css
.post {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
background: -webkit-linear-gradient(top, #fff, #000);
background: linear-gradient(to bottom, #fff, #000);
}
```