You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			|  | 3 years ago | |
|---|---|---|
| .. | ||
| INSTALL.md | 3 years ago | |
| LICENSE | 3 years ago | |
| README.md | 3 years ago | |
| index.js | 3 years ago | |
| index.test.js | 3 years ago | |
| package.json | 3 years ago | |
		
			
				
				README.md
			
		
		
			
			
		
	
	PostCSS Clamp
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);
}
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
