source: trip-planner-front/node_modules/postcss-custom-media/README.md@ 76712b2

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

initial commit

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