postcss-fixes

    3.0.0 • Public • Published

    PostCSS Fixes Build Status Code Climate

    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

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

    Install

    npm i postcss-fixes

    DownloadsWeekly Downloads

    872

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • mattdimu