source: frontend/node_modules/postcss-clamp/INSTALL.md

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 11 days ago

Fix frontend appearance

  • Property mode set to 100644
File size: 3.2 KB
Line 
1# Installing PostCSS Clamp
2
3[PostCSS Clamp] runs in all Node environments, with special instructions for:
4
5| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
6| --- | --- | --- | --- | --- | --- |
7
8## Node
9
10Add [PostCSS Clamp] to your project:
11
12```bash
13$ npm install postcss-clamp --save-dev
14```
15
16Use [PostCSS Clamp] as a [PostCSS] plugin:
17
18```js
19const postcss = require('postcss');
20const postcssClamp = require('postcss-clamp');
21
22postcss([
23 postcssClamp(/* pluginOptions */)
24]).process(YOUR_CSS /*, processOptions */);
25```
26
27## PostCSS CLI
28
29Add [PostCSS CLI] to your project:
30
31```bash
32npm install postcss-cli --save-dev
33```
34
35Use **PostCSS Clamp** in your `postcss.config.js` configuration file:
36
37```js
38const postcssClamp = require('postcss-clamp');
39
40module.exports = {
41 plugins: [
42 postcssClamp(/* pluginOptions */)
43 ]
44}
45```
46
47## Webpack
48
49Add [PostCSS Loader] to your project:
50
51```bash
52npm install postcss-loader --save-dev
53```
54
55Use **PostCSS Clamp** in your Webpack configuration:
56
57```js
58const postcssClamp = require('postcss-clamp');
59
60module.exports = {
61 module: {
62 rules: [
63 {
64 test: /\.css$/,
65 use: [
66 'style-loader',
67 { loader: 'css-loader', options: { importLoaders: 1 } },
68 { loader: 'postcss-loader', options: {
69 ident: 'postcss',
70 plugins: () => [
71 postcssClamp(/* pluginOptions */)
72 ]
73 } }
74 ]
75 }
76 ]
77 }
78}
79```
80
81## Create React App
82
83Add [React App Rewired] and [React App Rewire PostCSS] to your project:
84
85```bash
86npm install react-app-rewired react-app-rewire-postcss --save-dev
87```
88
89Use **React App Rewire PostCSS** and **PostCSS Clamp** in your
90`config-overrides.js` file:
91
92```js
93const reactAppRewirePostcss = require('react-app-rewire-postcss');
94const postcssClamp = require('postcss-clamp');
95
96module.exports = config => reactAppRewirePostcss(config, {
97 plugins: () => [
98 postcssClamp(/* pluginOptions */)
99 ]
100});
101```
102
103## Gulp
104
105Add [Gulp PostCSS] to your project:
106
107```bash
108npm install gulp-postcss --save-dev
109```
110
111Use **PostCSS Clamp** in your Gulpfile:
112
113```js
114const postcss = require('gulp-postcss');
115const postcssClamp = require('postcss-clamp');
116
117gulp.task('css', () => gulp.src('./src/*.css').pipe(
118 postcss([
119 postcssClamp(/* pluginOptions */)
120 ])
121).pipe(
122 gulp.dest('.')
123));
124```
125
126## Grunt
127
128Add [Grunt PostCSS] to your project:
129
130```bash
131npm install grunt-postcss --save-dev
132```
133
134Use **PostCSS Clamp** in your Gruntfile:
135
136```js
137const postcssClamp = require('postcss-clamp');
138
139grunt.loadNpmTasks('grunt-postcss');
140
141grunt.initConfig({
142 postcss: {
143 options: {
144 use: [
145 postcssClamp(/* pluginOptions */)
146 ]
147 },
148 dist: {
149 src: '*.css'
150 }
151 }
152});
153```
154
155[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
156[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
157[PostCSS]: https://github.com/postcss/postcss
158[PostCSS CLI]: https://github.com/postcss/postcss-cli
159[PostCSS Loader]: https://github.com/postcss/postcss-loader
160[PostCSS Clamp]: https://github.com/polemius/postcss-clamp
161[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
162[React App Rewired]: https://github.com/timarney/react-app-rewired
Note: See TracBrowser for help on using the repository browser.