source: trip-planner-front/node_modules/postcss-env-function/README.md@ 6fe77af

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

initial commit

  • Property mode set to 100644
File size: 3.7 KB
Line 
1# PostCSS Environment Variables [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
2
3[![NPM Version][npm-img]][npm-url]
4[![CSS Standard Status][css-img]][css-url]
5[![Build Status][cli-img]][cli-url]
6[![Support Chat][git-img]][git-url]
7
8[PostCSS Environment Variables] lets you use `env()` variables in CSS,
9following the [CSS Environment Variables] specification.
10
11```pcss
12@media (max-width: env(--branding-small)) {
13 body {
14 padding: env(--branding-padding);
15 }
16}
17
18/* becomes */
19
20@media (min-width: 600px) {
21 body {
22 padding: 20px;
23 }
24}
25
26/* when the `importFrom` option is: {
27 "environmentVariables": {
28 "--branding-small": "600px",
29 "--branding-padding": "20px"
30 }
31} */
32```
33
34## Usage
35
36Add [PostCSS Environment Variables] to your project:
37
38```bash
39npm install postcss-env-function --save-dev
40```
41
42Use [PostCSS Environment Variables] to process your CSS:
43
44```js
45const postcssEnvFunction = require('postcss-env-function');
46
47postcssEnvFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
48```
49
50Or use it as a [PostCSS] plugin:
51
52```js
53const postcss = require('postcss');
54const postcssEnvFunction = require('postcss-env-function');
55
56postcss([
57 postcssEnvFunction(/* pluginOptions */)
58]).process(YOUR_CSS /*, processOptions */);
59```
60
61[PostCSS Environment Variables] runs in all Node environments, with special instructions for:
62
63| [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) |
64| --- | --- | --- | --- | --- | --- |
65
66## Options
67
68### importFrom
69
70The `importFrom` option specifies sources where Environment Variables can be
71imported from, which might be JS and JSON files, functions, and directly passed
72objects.
73
74```js
75postcssCustomProperties({
76 importFrom: 'path/to/file.js' /* module.exports = {
77 environmentVariables: {
78 '--branding-padding': '20px',
79 '--branding-small': '600px'
80 }
81 } */
82});
83```
84
85```pcss
86@media (max-width: env(--branding-small)) {
87 body {
88 padding: env(--branding-padding);
89 }
90}
91
92/* becomes */
93
94@media (min-width: 600px) {
95 body {
96 padding: 20px;
97 }
98}
99```
100
101Multiple sources can be passed into this option, and they will be parsed in the
102order they are received. JavaScript files, JSON files, functions, and objects
103will need to namespace Custom Properties using the `environmentVariables` or
104`variables-variables` key.
105
106```js
107postcssCustomProperties({
108 importFrom: [
109 'path/to/file.js', // module.exports = { environmentVariables: { '--branding-padding': '20px' } }
110 'and/then/this.json', // { "environment-variables": { "--branding-padding": "20px" } }
111 {
112 environmentVariables: { '--branding-padding': '20px' }
113 },
114 () => {
115 const environmentVariables = { '--branding-padding': '20px' };
116
117 return { environmentVariables };
118 }
119 ]
120});
121```
122
123See example imports written in [JS](test/import-variables.js) and
124[JSON](test/import-variables.json).
125
126[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-env-function.svg
127[cli-url]: https://travis-ci.org/jonathantneal/postcss-env-function
128[css-img]: https://cssdb.org/badge/environment-variables.svg
129[css-url]: https://cssdb.org/#environment-variables
130[git-img]: https://img.shields.io/badge/support-chat-blue.svg
131[git-url]: https://gitter.im/postcss/postcss
132[npm-img]: https://img.shields.io/npm/v/postcss-env-function.svg
133[npm-url]: https://www.npmjs.com/package/postcss-env-function
134
135[CSS Environment Variables]: https://drafts.csswg.org/css-env-1/
136[PostCSS]: https://github.com/postcss/postcss
137[PostCSS Environment Variables]: https://github.com/jonathantneal/postcss-env-function
Note: See TracBrowser for help on using the repository browser.