Neurotic Programmer Masquerade

    postcss-vh-to-px

    0.1.2 • Public • Published

    Postcss-vh-to-px Build Status

    PostCSS plugin that converts all your references to vh units, into a static px value.

    .foo {
        /* Input example */
        min-height: 100vh;
    }
    .foo {
      /* Output example */
      min-height: 667px;
    }

    Why

    The reason this plugin exists, is to allow our CSS files to work inside the EPIServer CMS system. It has an issue, that breaks the view if the css contains vh units. It uses an iframe that gets resized to fit the height of all its content. But css viewport units are based on the size of the containing viewport, which in this case is the iframe. It would go into an infinite loop where it keeps resizing itself.

    Converting all our vh units to px inside the CMS fixes the issue, while allowing us to still use vh in our css.

    Usage

    postcss([ require('postcss-vh-to-px') ])

    Options

    unitSize

    • Type: number
    • Default: 6.67

    You can define the unit size, that's used to calculate the pixel value. The viewport height value is multiplied by this amount, to get the pixel value.

    See PostCSS docs for examples for your environment.

    License

    MIT - Daniel Schmidt

    Install

    npm i postcss-vh-to-px

    DownloadsWeekly Downloads

    0

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • thebuilder