1 | # PostCSS at-root [![Circle CI](https://circleci.com/gh/OEvgeny/postcss-atroot.svg?style=svg)](https://circleci.com/gh/OEvgeny/postcss-atroot)
|
2 | PostCSS plugin to place rules directly at the root node.
|
3 |
|
4 | The ``@at-root`` causes one or more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors:
|
5 | ```css
|
6 | .parent {
|
7 | ...
|
8 | @at-root{
|
9 | .child {...}
|
10 | }
|
11 | }
|
12 | ```
|
13 | Which would produce:
|
14 | ```css
|
15 | .child { ... }
|
16 | .parent { ... }
|
17 | ```
|
18 |
|
19 | It will play well with postcss ``@include`` plugins.
|
20 | foo.css:
|
21 | ```css
|
22 | @at-root {
|
23 | @viewport { width: device-width; }
|
24 | }
|
25 | .foo {
|
26 | color: blue;
|
27 | }
|
28 | ```
|
29 |
|
30 | bar.css:
|
31 | ```css
|
32 | .bar {
|
33 | @import "foo.css";
|
34 | }
|
35 |
|
36 | ```
|
37 | Will produce:
|
38 | ```css
|
39 | @viewport { width: device-width; }
|
40 |
|
41 | .bar .foo {
|
42 | color: blue;
|
43 | }
|
44 | ```
|
45 |
|
46 | ## Usage
|
47 |
|
48 | ```js
|
49 | postcss([ require('postcss-atroot')() ])
|
50 | ```
|
51 |
|
52 | See [PostCSS] docs for examples for your environment.
|
53 |
|
54 | [PostCSS]: https://github.com/postcss/postcss
|