source: trip-planner-front/node_modules/postcss-custom-properties/README.md@ 6a3a178

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

initial commit

  • Property mode set to 100644
File size: 4.9 KB
Line 
1# PostCSS Custom Properties [<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[![CSS Standard Status][css-img]][css-url]
5[![Build Status][cli-img]][cli-url]
6[![Support Chat][git-img]][git-url]
7
8[PostCSS Custom Properties] lets you use Custom Properties in CSS, following
9the [CSS Custom Properties] specification.
10
11```pcss
12:root {
13 --color: red;
14}
15
16h1 {
17 color: var(--color);
18}
19
20/* becomes */
21
22:root {
23 --color: red;
24}
25
26h1 {
27 color: red;
28 color: var(--color);
29}
30```
31
32## Usage
33
34Add [PostCSS Custom Properties] to your project:
35
36```bash
37npm install postcss-custom-properties --save-dev
38```
39
40Use [PostCSS Custom Properties] to process your CSS:
41
42```js
43const postcssCustomProperties = require('postcss-custom-properties');
44
45postcssCustomProperties.process(YOUR_CSS /*, processOptions, pluginOptions */);
46```
47
48Or use it as a [PostCSS] plugin:
49
50```js
51const postcss = require('postcss');
52const postcssCustomProperties = require('postcss-custom-properties');
53
54postcss([
55 postcssCustomProperties(/* pluginOptions */)
56]).process(YOUR_CSS /*, processOptions */);
57```
58
59[PostCSS Custom Properties] runs in all Node environments, with special instructions for:
60
61| [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) |
62| --- | --- | --- | --- | --- | --- |
63
64## Options
65
66### preserve
67
68The `preserve` option determines whether Custom Properties and properties using
69custom properties should be preserved in their original form. By default, both
70of these are preserved.
71
72```js
73postcssCustomProperties({
74 preserve: false
75});
76```
77
78```pcss
79:root {
80 --color: red;
81}
82
83h1 {
84 color: var(--color);
85}
86
87/* becomes */
88
89h1 {
90 color: red;
91}
92```
93
94### importFrom
95
96The `importFrom` option specifies sources where Custom Properties can be imported
97from, which might be CSS, JS, and JSON files, functions, and directly passed
98objects.
99
100```js
101postcssCustomProperties({
102 importFrom: 'path/to/file.css' // => :root { --color: red }
103});
104```
105
106```pcss
107h1 {
108 color: var(--color);
109}
110
111/* becomes */
112
113h1 {
114 color: red;
115}
116```
117
118Multiple sources can be passed into this option, and they will be parsed in the
119order they are received. JavaScript files, JSON files, functions, and objects
120will need to namespace Custom Properties using the `customProperties` or
121`custom-properties` key.
122
123```js
124postcssCustomProperties({
125 importFrom: [
126 'path/to/file.css', // :root { --color: red; }
127 'and/then/this.js', // module.exports = { customProperties: { '--color': 'red' } }
128 'and/then/that.json', // { "custom-properties": { "--color": "red" } }
129 {
130 customProperties: { '--color': 'red' }
131 },
132 () => {
133 const customProperties = { '--color': 'red' };
134
135 return { customProperties };
136 }
137 ]
138});
139```
140
141See example imports written in [CSS](test/import-properties.css),
142[JS](test/import-properties.js), and [JSON](test/import-properties.json).
143
144### exportTo
145
146The `exportTo` option specifies destinations where Custom Properties can be exported
147to, which might be CSS, JS, and JSON files, functions, and directly passed
148objects.
149
150```js
151postcssCustomProperties({
152 exportTo: 'path/to/file.css' // :root { --color: red; }
153});
154```
155
156Multiple destinations can be passed into this option, and they will be parsed
157in the order they are received. JavaScript files, JSON files, and objects will
158need to namespace Custom Properties using the `customProperties` or
159`custom-properties` key.
160
161```js
162const cachedObject = { customProperties: {} };
163
164postcssCustomProperties({
165 exportTo: [
166 'path/to/file.css', // :root { --color: red; }
167 'and/then/this.js', // module.exports = { customProperties: { '--color': 'red' } }
168 'and/then/this.mjs', // export const customProperties = { '--color': 'red' } }
169 'and/then/that.json', // { "custom-properties": { "--color": "red" } }
170 cachedObject,
171 customProperties => {
172 customProperties // { '--color': 'red' }
173 }
174 ]
175});
176```
177
178See example exports written to [CSS](test/export-properties.css),
179[JS](test/export-properties.js), [MJS](test/export-properties.mjs), and
180[JSON](test/export-properties.json).
181
182[cli-img]: https://img.shields.io/travis/postcss/postcss-custom-properties/master.svg
183[cli-url]: https://travis-ci.org/postcss/postcss-custom-properties
184[css-img]: https://cssdb.org/badge/custom-properties.svg
185[css-url]: https://cssdb.org/#custom-properties
186[git-img]: https://img.shields.io/badge/support-chat-blue.svg
187[git-url]: https://gitter.im/postcss/postcss
188[npm-img]: https://img.shields.io/npm/v/postcss-custom-properties.svg
189[npm-url]: https://www.npmjs.com/package/postcss-custom-properties
190
191[CSS Custom Properties]: https://www.w3.org/TR/css-variables-1/
192[PostCSS]: https://github.com/postcss/postcss
193[PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties
Note: See TracBrowser for help on using the repository browser.