PostCSS Clamp

PostCSS plugin to transform clamp() to combination of min/max.

This plugin transform this css:

css .foo { width: clamp(10px, 4em, 80px); }

into this:

css .foo { width: max(10px, min(4em, 80px)); }

Or with enabled options precalculate:

```css .foo { width: clamp(10em, 4px, 10px); }

/ becomes /

.foo { width: max(10em, 14px); } ```

Instalation

bash $ npm install postcss postcss-clamp --save-dev or $ yarn add --dev postcss postcss-clamp

```js const postcss = require('postcss'); const postcssClamp = require('postcss-clamp');

postcss([ postcssClamp(/ pluginOptions /) ]).process(YOUR_CSS /, processOptions /); ```

PostCSS Clamp runs in all Node environments, with special instructions for:

| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- | --- |

See PostCSS docs for examples for your environment.

The precalculate option determines whether values with the same unit should be precalculated. By default, these are not precalculation.

js postcssColorHexAlpha({ precalculate: true });

The second and third value has the same unit (px):

```css .foo { width: clamp(10em, 4px, 10px); }

/ becomes /

.foo { width: max(10em, 14px); } ```

Here all values have the same unit:

```css .foo { width: clamp(10px, 4px, 10px); }

/ becomes /

.foo { width: 24px; } ```