55 lines
925 B
Markdown
55 lines
925 B
Markdown
# PostCSS at-root [](https://circleci.com/gh/OEvgeny/postcss-atroot)
|
|
PostCSS plugin to place rules directly at the root node.
|
|
|
|
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:
|
|
```css
|
|
.parent {
|
|
...
|
|
@at-root{
|
|
.child {...}
|
|
}
|
|
}
|
|
```
|
|
Which would produce:
|
|
```css
|
|
.child { ... }
|
|
.parent { ... }
|
|
```
|
|
|
|
It will play well with postcss ``@include`` plugins.
|
|
foo.css:
|
|
```css
|
|
@at-root {
|
|
@viewport { width: device-width; }
|
|
}
|
|
.foo {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
bar.css:
|
|
```css
|
|
.bar {
|
|
@import "foo.css";
|
|
}
|
|
|
|
```
|
|
Will produce:
|
|
```css
|
|
@viewport { width: device-width; }
|
|
|
|
.bar .foo {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
## Usage
|
|
|
|
```js
|
|
postcss([ require('postcss-atroot')() ])
|
|
```
|
|
|
|
See [PostCSS] docs for examples for your environment.
|
|
|
|
[PostCSS]: https://github.com/postcss/postcss
|