# Installing PostCSS Clamp [PostCSS Clamp] runs in all Node environments, with special instructions for: | [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | | --- | --- | --- | --- | --- | --- | ## Node Add [PostCSS Clamp] to your project: ```bash $ npm install postcss-clamp --save-dev ``` Use [PostCSS Clamp] as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssClamp = require('postcss-clamp'); postcss([ postcssClamp(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` ## PostCSS CLI Add [PostCSS CLI] to your project: ```bash npm install postcss-cli --save-dev ``` Use **PostCSS Clamp** in your `postcss.config.js` configuration file: ```js const postcssClamp = require('postcss-clamp'); module.exports = { plugins: [ postcssClamp(/* pluginOptions */) ] } ``` ## Webpack Add [PostCSS Loader] to your project: ```bash npm install postcss-loader --save-dev ``` Use **PostCSS Clamp** in your Webpack configuration: ```js const postcssClamp = require('postcss-clamp'); module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ postcssClamp(/* pluginOptions */) ] } } ] } ] } } ``` ## Create React App Add [React App Rewired] and [React App Rewire PostCSS] to your project: ```bash npm install react-app-rewired react-app-rewire-postcss --save-dev ``` Use **React App Rewire PostCSS** and **PostCSS Clamp** in your `config-overrides.js` file: ```js const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssClamp = require('postcss-clamp'); module.exports = config => reactAppRewirePostcss(config, { plugins: () => [ postcssClamp(/* pluginOptions */) ] }); ``` ## Gulp Add [Gulp PostCSS] to your project: ```bash npm install gulp-postcss --save-dev ``` Use **PostCSS Clamp** in your Gulpfile: ```js const postcss = require('gulp-postcss'); const postcssClamp = require('postcss-clamp'); gulp.task('css', () => gulp.src('./src/*.css').pipe( postcss([ postcssClamp(/* pluginOptions */) ]) ).pipe( gulp.dest('.') )); ``` ## Grunt Add [Grunt PostCSS] to your project: ```bash npm install grunt-postcss --save-dev ``` Use **PostCSS Clamp** in your Gruntfile: ```js const postcssClamp = require('postcss-clamp'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ postcss: { options: { use: [ postcssClamp(/* pluginOptions */) ] }, dist: { src: '*.css' } } }); ``` [Gulp PostCSS]: https://github.com/postcss/gulp-postcss [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss [PostCSS CLI]: https://github.com/postcss/postcss-cli [PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Clamp]: https://github.com/polemius/postcss-clamp [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired