source: trip-planner-front/node_modules/postcss-custom-selectors/README.md@ 1ad8e64

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

initial commit

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