postcss-round-subpixels

    2.0.0 • Public • Published

    postcss-round-subpixels npm version

    PostCSS plugin that rounds sub-pixel (eg: 12.87378378364px) values to the nearest full pixel.

    Why?

    If you use maths in your preprocessor, sometimes the output CSS is ugly like 12.87378378364px. This is an issue because browsers are very inconsistent in how they deal with sub-pixel values. Some round up, some round down, some round sideways - who even knows.

    Also useful for general cleanup/consistency in your stylesheets, because 12.87378378364px is not cute, and those extra bytes aren't really going to matter in how browsers render your styles.

    Ignores all non-pixel values such as percent.

    Sample

    .down {
      height: 123.456px;
      width:  321.123px;
    }
    .up {
      height: 987.654px;
      width:  1234.567px;
    }
    .dont-touch {
      height: 12.345rem;
      width:  98.7654%;
    }
    .down {
      height: 123px;
      width:  321px;
    }
    .up {
      height: 988px;
      width:  1235px;
    }
    .dont-touch {
      height: 12.345rem;
      width:  98.7654%;
    }

    Install

    npm i --save-dev postcss postcss-round-subpixels
    

    Usage

    postcss([
      require('postcss-round-subpixels')
    ])

    See PostCSS docs for examples for your environment.

    Install

    npm i postcss-round-subpixels

    DownloadsWeekly Downloads

    798

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    4.62 kB

    Total Files

    4

    Last publish

    Collaborators

    • himynameisdave