source: trip-planner-front/node_modules/postcss-nesting/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: 2.2 KB
Line 
1# PostCSS Nesting [<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 Nesting] lets you nest style rules inside each other, following the
9[CSS Nesting] specification.
10
11```pcss
12a, b {
13 color: red;
14
15 & c, & d {
16 color: white;
17 }
18}
19
20/* becomes */
21
22a, b {
23 color: red;
24}
25
26a c, a d, b c, b d {
27 color: white;
28}
29```
30
31**NOTICE**: In a future version of this project, nesting at-rules like `@media`
32may be deprecated, as they are not part of the nesting proposal. In a comment,
33a CSSWG member expressed interest in handling nested `@media` while handling
34selector nesting. So deprecating nested at-rules has been temporarily delayed.
35
36## Usage
37
38Add [PostCSS Nesting] to your project:
39
40```bash
41npm install postcss-nesting --save-dev
42```
43
44Use [PostCSS Nesting] to process your CSS:
45
46```js
47import postcssNesting from 'postcss-nesting';
48
49postcssNesting.process(YOUR_CSS /*, processOptions, pluginOptions */);
50```
51
52Or use it as a [PostCSS] plugin:
53
54```js
55import postcss from 'postcss';
56import postcssNesting from 'postcss-nesting';
57
58postcss([
59 postcssNesting(/* pluginOptions */)
60]).process(YOUR_CSS /*, processOptions */);
61```
62
63[PostCSS Nesting] runs in all Node environments, with special instructions for:
64
65| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
66| --- | --- | --- | --- | --- |
67
68[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-nesting.svg
69[cli-url]: https://travis-ci.org/jonathantneal/postcss-nesting
70[css-img]: https://cssdb.org/badge/nesting-rules.svg
71[css-url]: https://cssdb.org/#nesting-rules
72[git-img]: https://img.shields.io/badge/support-chat-blue.svg
73[git-url]: https://gitter.im/postcss/postcss
74[npm-img]: https://img.shields.io/npm/v/postcss-nesting.svg
75[npm-url]: https://www.npmjs.com/package/postcss-nesting
76
77[CSS Nesting]: https://drafts.csswg.org/css-nesting-1/
78[PostCSS]: https://github.com/postcss/postcss
79[PostCSS Nesting]: https://github.com/jonathantneal/postcss-nesting
Note: See TracBrowser for help on using the repository browser.