diff options
Diffstat (limited to 'node_modules/postcss-clamp/INSTALL.md')
| -rw-r--r-- | node_modules/postcss-clamp/INSTALL.md | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/node_modules/postcss-clamp/INSTALL.md b/node_modules/postcss-clamp/INSTALL.md new file mode 100644 index 00000000..f9acbee6 --- /dev/null +++ b/node_modules/postcss-clamp/INSTALL.md @@ -0,0 +1,162 @@ +# 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 |
