postcss-fixes

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 differs from 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, which is Internet Explorer only, however.

A few examples

:nth-child(n)::before {
    flex: 1;
    opacity: .5;
    height: 2.5rem;
    width: 10vmin;
}

: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

Recommended Usage

postcss-fixes is recommended to be used in conjunction with autoprefixer and cssnano (optimizations)

/* 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

preset

• recommended (default)
• safe
• fixes-only
• fallbacks-only
• enable-all
• disable-all

This would look like this:

postcss([
    require('postcss-fixes')({ preset: 'safe' }) // do only very safe transformations
])