1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
# PostCSS Fixes [![Build Status][ci-img]][ci] [](https://codeclimate.com/github/MattDiMu/postcss-fixes)
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/MattDiMu/postcss-fixes.svg
[ci]: https://travis-ci.org/MattDiMu/postcss-fixes
[PostCSS] pack to fix known Browser Bugs, making it easier to write your CSS according to the official W3C Syntax. Additionally it adds safe fallbacks.
[postcss-fixes](https://github.com/MattDiMu/postcss-fixes) differs from [cssnext](https://github.com/MoOx/postcss-cssnext) by doing only transformations for stable CSS Features, whereas cssnext is more progressively tries to implement features, which aren't official W3C recommendations yet and could therefore change/break in the future. Another alternative is [oldie](https://github.com/jonathantneal/oldie), which is Internet Explorer only, however.
## A few examples
```css
:nth-child(n)::before {
flex: 1;
opacity: .5;
height: 2.5rem;
width: 10vmin;
}
```
```css
:nth-child(1n):before {
flex: 1 1 0%; /* fix some flexbox issues */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* opacity for IE */
opacity: .5;
height: 40px; /* rem to px fallback */
height: 2.5rem;
width: 10vm;
width: 10vmin;
}
```
## Used Plugins
Hint: An opinionated config for these plugins is used, to make them more future-safe
* [pixrem](https://github.com/robwierzbowski/node-pixrem)
* [postcss-calc](https://github.com/postcss/postcss-calc)
* [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes) (also in 'safe' mode)
* [postcss-pseudoelements](https://github.com/axa-ch/postcss-pseudoelements) (also in 'safe' mode)
* [postcss-unopacity](https://github.com/jonathantneal/postcss-unopacity)
* [postcss-unroot](https://github.com/jonathantneal/postcss-unroot)
* [postcss-nth-child-fix](https://github.com/MattDiMu/postcss-nth-child-fix)
* [postcss-vmin](https://github.com/iamvdo/postcss-vmin)
### Recommended Usage
[postcss-fixes](https://github.com/MattDiMu/postcss-fixes) is recommended to be used in conjunction with [autoprefixer](https://github.com/postcss/autoprefixer) and [cssnano](https://github.com/ben-eb/cssnano) (optimizations)
```js
/* for developement */
postcss([
require('postcss-fixes')(),
require('autoprefixer')()
])
/* for production */
postcss([
require('postcss-fixes')(),
require('autoprefixer')(),
require('cssnano')({
'safe': true, // I would recommend using cssnano only in safe mode
'calc': false // calc is no longer necessary, as it is already done by postcss-fixes due to precision rounding reasons
})
])
```
See [PostCSS](https://github.com/postcss/postcss) docs for examples for your environment (e.g. if you are using a task runner like grunt, gulp, broccoli, webpack, etc.).
## Options
### `preset`
* `recommended` (default)
* `safe`
* `fixes-only`
* `fallbacks-only`
* `enable-all`
* `disable-all`
This would look like this:
```js
postcss([
require('postcss-fixes')({ preset: 'safe' }) // do only very safe transformations
])
```
|
