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

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

* 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

])

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

(default)
*

This would look like this:

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