postcss-automath

Automatically evaluate mathematical expressions in your CSS source files, like in SASS or LESS. No special function calls needed as with `postcss-mathjs`.

Usage no npm install needed!

<script type="module">
  import postcssAutomath from 'https://cdn.skypack.dev/postcss-automath';
</script>

README

PostCSS Auto-Math

PostCSS plugin for evaluating math expressions in your CSS sources.

This plug-in uses the LESS parser internally, in an (intentionally) very limited way- just to parse mathematical expressions. As such, all unit handling mechanics are the same as in LESS.

If you want full LESS parsing functionality in your project, see postcss-less-engine.

.foo {
    font-size: 2 * 8px;	
    margin: 4px + 2 * 3px;
}

.foo {
    font-size: 16px;
    margin: 10px;
}

Usage

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

For best results, add the plugin after any variable parsing, mixin processing or function handling plugins. Since postcss-automath works on the final numeric values of your CSS you need to process all variables, mixins and other dynamic data beforehand.

See PostCSS docs for examples for your environment.

How does this differ to postcss-calc?

They're (deliberately) trying to work towards the calc(...) standard, so for instance it doesn't support things like exponentials at the moment.

How does this differ to postcss-math & postcss-mathjs?

Those plugins want you to add non-standard function wrappers (the resolve() function) around each expression you want evaluated. This module allows you to write normal math expressions you'd be used to from using SASS, SCSS or LESS.

Since the variable handling is deferred to another plugin, you are free to use this module with SCSS, LESS, W3C or even your own custom syntax.