PostCSS-Interpolate

PostCSS plugin for values interpolation between breakpoints.

This plugin made for automatically interpolation of property values between breakpoints. You can specify as much breakpoints, as you need.

Use this plugin for any px/rem value interpolation (font-size, padding, margin and other). It doesn't work with % and em.

Inspired by this draft.

Installation

$ npm i --save-dev postcss-interpolate

Syntax

interpolate(direction, mediaquery-1, value-1, ... mediaquery-n, value-n)

direction

• none — if you will not specify direction, plugin will you vertically as defaul direction
• vertically or vw — default derection.
• horizontally or vh

mediaquery works only with px units

value works only with px or rem units

Examples

More examples at the tests folder.

/* Input */
.foo {
  font-size: interpolate(320px, 10px, 600px, 40px, 1200px, 10px);
}

/* Output */
.foo {
  font-size:  10px;
}
@media screen and (min-width: 320px) {
  .foo {
    font-size: calc( 10px + 30 * (100vw - 320px) / 280);
  }
}
@media screen and (min-width:  600px) {
  .foo {
    font-size: calc( 40px + -30 * (100vw -  600px) / 600);
  }
}
@media screen and (min-width:  1200px) {
  .foo {
    font-size:  10px;
  }
}

Padding example

/* Input */
.foo {
  padding-top: interpolate(320px, 5px, 600px, 80px, 1200px, 5px);
}

/* Output */
.foo {
  padding-top:  5px;
}
@media screen and (min-width: 320px) {
  .foo {
    padding-top: calc( 5px + 75 * (100vw - 320px) / 280);
  }
}
@media screen and (min-width:  600px) {
  .foo {
    padding-top: calc( 80px + -75 * (100vw -  600px) / 600);
  }
}
@media screen and (min-width:  1200px) {
  .foo {
    padding-top:  5px;
  }
}

Usage

postcss([ require('postcss-interpolate') ])

If you are using postcss-cssnext, please, turn off pxrem plugin

postcssInterpolate(),
postcssCssnext({
  features: {
    rem: false,
  }
})