epiphany/node_modules/postcss-clamp
2023-12-09 22:48:07 -08:00
..
index.js stylelint/eleventy config 2023-12-09 22:48:07 -08:00
index.test.js stylelint/eleventy config 2023-12-09 22:48:07 -08:00
INSTALL.md stylelint/eleventy config 2023-12-09 22:48:07 -08:00
LICENSE stylelint/eleventy config 2023-12-09 22:48:07 -08:00
package.json stylelint/eleventy config 2023-12-09 22:48:07 -08:00
README.md stylelint/eleventy config 2023-12-09 22:48:07 -08:00

PostCSS Clamp

Build Status codecov.io

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

This plugin transform this css:

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

into this:

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

Or with enabled options precalculate:

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

/* becomes */

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

'Can I use' table

Instalation

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

Usage

Use PostCSS Clamp as a PostCSS plugin:

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.

Options

precalculate

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

postcssColorHexAlpha({
  precalculate: true
});

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

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

/* becomes */

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

Here all values have the same unit:

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

/* becomes */

.foo {
  width: 24px;
}

LICENSE

See LICENSE