Package Exports

postcss-interpolate

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-interpolate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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,
  }
})