source: trip-planner-front/node_modules/postcss-preset-env/README.md@ 8d391a1

Last change on this file since 8d391a1 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 10.5 KB
Line 
1# PostCSS Preset Env [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
2
3[![NPM Version][npm-img]][npm-url]
4[![Build Status][cli-img]][cli-url]
5[![Support Chat][git-img]][git-url]
6
7[PostCSS Preset Env] lets you convert modern CSS into something most browsers
8can understand, determining the polyfills you need based on your targeted
9browsers or runtime environments.
10
11```bash
12npm install postcss-preset-env
13```
14
15```pcss
16@custom-media --viewport-medium (width <= 50rem);
17@custom-selector :--heading h1, h2, h3, h4, h5, h6;
18
19:root {
20 --mainColor: #12345678;
21}
22
23body {
24 color: var(--mainColor);
25 font-family: system-ui;
26 overflow-wrap: break-word;
27}
28
29:--heading {
30 background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);
31
32 @media (--viewport-medium) {
33 margin-block: 0;
34 }
35}
36
37a {
38 color: rgb(0 0 100% / 90%);
39
40 &:hover {
41 color: rebeccapurple;
42 }
43}
44
45/* becomes */
46
47:root {
48 --mainColor: rgba(18, 52, 86, 0.47059);
49}
50
51body {
52 color: rgba(18, 52, 86, 0.47059);
53 color: var(--mainColor);
54 font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;
55 word-wrap: break-word;
56}
57
58h1, h2, h3, h4, h5, h6 {
59 background-image: url(img/heading.png);
60}
61
62@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
63 h1, h2, h3, h4, h5, h6 {
64 background-image: url(img/heading@2x.png)
65 }
66}
67
68@media (max-width: 50rem) {
69 h1, h2, h3, h4, h5, h6 {
70 margin-top: 0;
71 margin-bottom: 0;
72 }
73}
74
75a {
76 color: rgba(0, 0, 255, 0.9)
77}
78
79a:hover {
80 color: #639;
81}
82```
83
84Without any configuration options, [PostCSS Preset Env] enables **Stage 2**
85features and supports **all** browsers.
86
87[![Transform with Preset Env][readme-transform-with-preset-env-img]][readme-transform-with-preset-env-url]
88[![Style with Preset Env][readme-style-with-preset-env-img]][readme-style-with-preset-env-url]
89
90## Usage
91
92Add [PostCSS Preset Env] to your project:
93
94```bash
95npm install postcss-preset-env --save-dev
96```
97
98Use [PostCSS Preset Env] to process your CSS:
99
100```js
101const postcssPresetEnv = require('postcss-preset-env');
102
103postcssPresetEnv.process(YOUR_CSS /*, processOptions, pluginOptions */);
104```
105
106Or use it as a [PostCSS] plugin:
107
108```js
109const postcss = require('postcss');
110const postcssPresetEnv = require('postcss-preset-env');
111
112postcss([
113 postcssPresetEnv(/* pluginOptions */)
114]).process(YOUR_CSS /*, processOptions */);
115```
116
117[PostCSS Preset Env] runs in all Node environments, with special instructions for:
118
119| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
120| --- | --- | --- | --- | --- | --- |
121
122## Options
123
124### stage
125
126The `stage` option determines which CSS features to polyfill, based upon their
127stability in the process of becoming implemented web standards.
128
129```js
130postcssPresetEnv({ stage: 0 })
131```
132
133The `stage` can be `0` (experimental) through `4` (stable), or `false`. Setting
134`stage` to `false` will disable every polyfill. Doing this would only be useful
135if you intended to exclusively use the [`features`](#features) option.
136
137Without any configuration options, [PostCSS Preset Env] enables **Stage 2**
138features.
139
140### features
141
142The `features` option enables or disables specific polyfills by ID. Passing
143`true` to a specific feature ID will enable its polyfill, while passing `false`
144will disable it.
145
146```js
147postcssPresetEnv({
148 /* use stage 3 features + css nesting rules */
149 stage: 3,
150 features: {
151 'nesting-rules': true
152 }
153})
154```
155
156Passing an object to a specific feature ID will both enable and configure it.
157
158```js
159postcssPresetEnv({
160 /* use stage 3 features + css color-mod (warning on unresolved) */
161 stage: 3,
162 features: {
163 'color-mod-function': { unresolved: 'warn' }
164 }
165})
166```
167
168Any polyfills not explicitly enabled or disabled through `features` are
169determined by the [`stage`](#stage) option.
170
171### browsers
172
173The `browsers` option determines which polyfills are required based upon the
174browsers you are supporting.
175
176[PostCSS Preset Env] supports any standard [browserslist] configuration, which
177can be a `.browserslistrc` file, a `browserslist` key in `package.json`, or
178`browserslist` environment variables.
179
180The `browsers` option should only be used when a standard browserslist
181configuration is not available.
182
183```js
184postcssPresetEnv({ browsers: 'last 2 versions' })
185```
186
187If not valid browserslist configuration is specified, the
188[default browserslist query](https://github.com/browserslist/browserslist#queries)
189will be used.
190
191### insertBefore / insertAfter
192
193The `insertBefore` and `insertAfter` keys allow you to insert other PostCSS
194plugins into the chain. This is only useful if you are also using sugary
195PostCSS plugins that must execute before or after certain polyfills.
196Both `insertBefore` and `insertAfter` support chaining one or multiple plugins.
197
198```js
199import postcssSimpleVars from 'postcss-simple-vars';
200
201postcssPresetEnv({
202 insertBefore: {
203 'all-property': postcssSimpleVars
204 }
205})
206```
207
208### autoprefixer
209
210[PostCSS Preset Env] includes [autoprefixer] and [`browsers`](#browsers) option
211will be passed to it automatically.
212
213Specifying the `autoprefixer` option enables passing
214[additional options](https://github.com/postcss/autoprefixer#options)
215into [autoprefixer].
216
217```js
218postcssPresetEnv({
219 autoprefixer: { grid: true }
220})
221```
222
223Passing `autoprefixer: false` disables autoprefixer.
224
225### preserve
226
227The `preserve` option determines whether all plugins should receive a
228`preserve` option, which may preserve or remove otherwise-polyfilled CSS. By
229default, this option is not configured.
230
231```js
232postcssPresetEnv({
233 preserve: false // instruct all plugins to omit pre-polyfilled CSS
234});
235```
236
237### importFrom
238
239The `importFrom` option specifies sources where variables like Custom Media,
240Custom Properties, Custom Selectors, and Environment Variables can be imported
241from, which might be CSS, JS, and JSON files, functions, and directly passed
242objects.
243
244```js
245postcssPresetEnv({
246 /*
247 @custom-media --small-viewport (max-width: 30em);
248 @custom-selector :--heading h1, h2, h3;
249 :root { --color: red; }
250 */
251 importFrom: 'path/to/file.css'
252});
253```
254
255Multiple sources can be passed into this option, and they will be parsed in the
256order they are received. JavaScript files, JSON files, functions, and objects
257will use different namespaces to import different kinds of variables.
258
259```js
260postcssPresetEnv({
261 importFrom: [
262 /*
263 @custom-media --small-viewport (max-width: 30em);
264 @custom-selector :--heading h1, h2, h3;
265 :root { --color: red; }
266 */
267 'path/to/file.css',
268
269 /* module.exports = {
270 customMedia: { '--small-viewport': '(max-width: 30em)' },
271 customProperties: { '--color': 'red' },
272 customSelectors: { ':--heading': 'h1, h2, h3' },
273 environmentVariables: { '--branding-padding': '20px' }
274 } */
275 'and/then/this.js',
276
277 /* {
278 "custom-media": { "--small-viewport": "(max-width: 30em)" }
279 "custom-properties": { "--color": "red" },
280 "custom-selectors": { ":--heading": "h1, h2, h3" },
281 "environment-variables": { "--branding-padding": "20px" }
282 } */
283 'and/then/that.json',
284
285 {
286 customMedia: { '--small-viewport': '(max-width: 30em)' },
287 customProperties: { '--color': 'red' },
288 customSelectors: { ':--heading': 'h1, h2, h3' },
289 environmentVariables: { '--branding-padding': '20px' }
290 },
291 () => {
292 const customMedia = { '--small-viewport': '(max-width: 30em)' };
293 const customProperties = { '--color': 'red' };
294 const customSelectors = { ':--heading': 'h1, h2, h3' };
295 const environmentVariables = { '--branding-padding': '20px' };
296
297 return { customMedia, customProperties, customSelectors, environmentVariables };
298 }
299 ]
300});
301```
302
303### exportTo
304
305The `exportTo` option specifies destinations where variables like Custom Media,
306Custom Properties, Custom Selectors, and Environment Variables can be exported
307to, which might be CSS, JS, and JSON files, functions, and directly passed
308objects.
309
310```js
311postcssPresetEnv({
312 /*
313 @custom-media --small-viewport (max-width: 30em);
314 @custom-selector :--heading h1, h2, h3;
315 :root { --color: red; }
316 */
317 exportTo: 'path/to/file.css'
318});
319```
320
321Multiple destinations can be passed into this option as well, and they will be
322parsed in the order they are received. JavaScript files, JSON files, and
323objects will use different namespaces to import different kinds of variables.
324
325```js
326const cachedObject = {};
327
328postcssPresetEnv({
329 exportTo: [
330 /*
331 @custom-media --small-viewport (max-width: 30em);
332 @custom-selector :--heading h1, h2, h3;
333 :root { --color: red; }
334 */
335 'path/to/file.css',
336
337 /* module.exports = {
338 customMedia: { '--small-viewport': '(max-width: 30em)' },
339 customProperties: { '--color': 'red' },
340 customSelectors: { ':--heading': 'h1, h2, h3' },
341 environmentVariables: { '--branding-padding': '20px' }
342 } */
343 'and/then/this.js',
344
345 /* {
346 "custom-media": { "--small-viewport": "(max-width: 30em)" }
347 "custom-properties": { "--color": "red" },
348 "custom-selectors": { ":--heading": "h1, h2, h3" },
349 "environment-variables": { "--branding-padding": "20px" }
350 } */
351 'and/then/that.json',
352
353 cachedObject,
354 variables => {
355 if ('customProperties' in variables) {
356 // do something special with customProperties
357 }
358
359 Object.assign(cachedObject, variables);
360 }
361 ]
362});
363```
364
365[cli-img]: https://img.shields.io/travis/csstools/postcss-preset-env/master.svg
366[cli-url]: https://travis-ci.org/csstools/postcss-preset-env
367[git-img]: https://img.shields.io/badge/support-chat-blue.svg
368[git-url]: https://gitter.im/postcss/postcss
369[npm-img]: https://img.shields.io/npm/v/postcss-preset-env.svg
370[npm-url]: https://www.npmjs.com/package/postcss-preset-env
371
372[autoprefixer]: https://github.com/postcss/autoprefixer
373[browserslist]: https://github.com/browserslist/browserslist#readme
374[caniuse]: https://caniuse.com/
375[cssdb]: https://cssdb.org/
376[PostCSS]: https://github.com/postcss/postcss
377[PostCSS Preset Env]: https://github.com/csstools/postcss-preset-env
378[readme-style-with-preset-env-img]: https://csstools.github.io/postcss-preset-env/readme-style-with-preset-env.svg
379[readme-style-with-preset-env-url]: https://codepen.io/pen?template=OZRovK
380[readme-transform-with-preset-env-img]: https://csstools.github.io/postcss-preset-env/readme-transform-with-preset-env.svg
381[readme-transform-with-preset-env-url]: https://csstools.github.io/postcss-preset-env/
Note: See TracBrowser for help on using the repository browser.