@davidwells/postcss-math
Version:
PostCSS plugin for making calculations with math.js
82 lines (59 loc) • 1.45 kB
Markdown
# PostCSS Math Plugin
Support advanced math via [mathjs](https://github.com/josdejong/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:
```css
.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:
```css
.foo {
font-size: 16px;
padding: 22px;
margin: 10px;
height: 60px;
}
```
Multiline:
```css
p {
font-size: resolve(
1 +
2 +
3
)px;
}
```
Output:
```css
p {
font-size: 6px;
}
```
## Usage
```js
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.
## Prior art
Updated fork of https://github.com/shauns/postcss-math