postcss-fixes

PostCSS Fixes

PostCSS pack to fix known Browser Bugs, making it easier to write your CSS according to the official W3C Syntax.

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.

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

Example (many more transformations)

::before {
    flex: 1;
    opacity: .5;
    height: 2.5rem;
}

: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;
}

Usage

postcss([ require('postcss-fixes') ]) // do recommended transformations

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

See PostCSS docs for examples for your environment.