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:
.parent {
...
@at-root{
.child {...}
}
}
Which would produce:
.child { ... }
.parent { ... }
It will play well with postcss @include
plugins.
foo.css:
@at-root {
@viewport { width: device-width; }
}
.foo {
color: blue;
}
bar.css:
.bar {
@import "foo.css";
}
Will produce:
@viewport { width: device-width; }
.bar .foo {
color: blue;
}
postcss([ require('postcss-atroot')() ])
See PostCSS docs for examples for your environment.