@davidwells/postcss-math NPM

PostCSS Math Plugin

Support advanced math via mathjs

This plug-in supports:

Plain-old maths, as per math.js built-in functionality
px, em, rem, vh, vmax and other units
CSS-friendly rendering (10cm not 10 cm)
Unit stripping e.g. strip(25px) becomes 25
Unit math operations e.g. floor(12.6px) becomes 12px and ceil(12.6px) becomes 13px

Contributions are very welcome!

Example usage

Input:

.foo {
  /* Basic usage */
  font-size: resolve(2 * 8px);
  /* nested */
  margin: resolve(4px + resolve(2 * 3px));
  /* with postcss simple variables. $navHeight = 80px  */
  height: resolve($navHeight - 20px);
  /* strip values */
  padding: resolve(strip(16cm) * (2px + 3))px;
}

Output:

.foo {
  font-size: 16px;
  padding: 22px;
  margin: 10px;
  height: 60px;
}

Multiline:

p {
  font-size: resolve(
    1 +
    2 +
    3
  )px;
}

Output:

p {
  font-size: 6px;
}

Usage

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

See PostCSS docs for examples for your environment.

How does this differ to `postcss-calc` or CSS `calc()`?

They're (deliberately) trying to work towards the calc(...) standard, so for instance it doesn't support things like exponentials at the moment. This wraps up math.js so you have a wider range of things you can do.