https://github.com/oevgeny/postcss-atroot

PostCSS plugin to place rules directly at the root
https://github.com/oevgeny/postcss-atroot

Last synced: 3 months ago
JSON representation

PostCSS plugin to place rules directly at the root

• Host: GitHub
• URL: https://github.com/oevgeny/postcss-atroot
• Owner: OEvgeny
• License: mit
• Created: 2015-09-14T10:25:50.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-10-06T16:36:09.000Z (over 1 year ago)
• Last Synced: 2024-04-26T06:53:13.582Z (9 months ago)
• Language: JavaScript
• Size: 122 KB
• Stars: 12
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS at-root [![Node.js CI](https://github.com/OEvgeny/postcss-atroot/actions/workflows/nodejs.yml/badge.svg)](https://github.com/OEvgeny/postcss-atroot/actions/workflows/nodejs.yml)

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