PostCSS plugin pack to fix known Browser Bugs.
npm install postcss-fixescss
: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
* postcss-calc
* postcss-flexbugs-fixes (also in 'safe' mode)
* postcss-pseudoelements (also in 'safe' mode)
* postcss-unopacity
* postcss-unroot
* postcss-nth-child-fix
* postcss-vmin
$3
postcss-fixes is recommended to be used in conjunction with autoprefixer and 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 docs for examples for your environment (e.g. if you are using a task runner like grunt, gulp, broccoli, webpack, etc.).
Options
$3
* 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
])
``