.travis.yml

@@ -2,8 +2,9 @@ language: node_js
 cache: yarn
 node_js:
   - node
+  - "12"
   - "10"
   - "8"
   - "6"
-git:
-  depth: 5
+install:
+ - yarn install --ignore-engines

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 4.2
+* Add `@at-root` support (by Jason Quense).
+
 ## 4.1.2
 * Improve error messsage on broken selector
 

README.md

@@ -1,4 +1,4 @@
-# PostCSS Nested [![Build Status][ci-img]][ci]
+# PostCSS Nested
 
 <img align="right" width="135" height="95"
      title="Philosopher’s stone, logo of PostCSS"
@@ -21,6 +21,15 @@
         display: block;
     }
 }
+
+.title {
+  font-size: var(--font);
+
+  @at-root html {
+      --font: 16px
+    }
+  }
+}
 ```
 
 will be processed to:
@@ -40,27 +49,38 @@ body.is_dark .phone_title {
 .phone img {
     display: block;
 }
+
+.title {
+  font-size: var(--font);
+}
+html {
+  --font: 16px
+}
 ```
 
-Use [postcss-current-selector] **after** this plugin if you want to use current selector in properties or variables values.
+Related plugins:
 
-Use [postcss-nested-ancestors] **before** this plugin if you want to reference any ancestor element directly in your selectors with `^&`.
+* Use [`postcss-current-selector`] **after** this plugin if you want
+to use current selector in properties or variables values.
+* Use [`postcss-nested-ancestors`] **before** this plugin if you want
+to reference any ancestor element directly in your selectors with `^&`.
 
-See also [postcss-nesting], which implements [Tab Atkin's proposed syntax](https://tabatkins.github.io/specs/css-nesting/) (requires the `&` and introduces `@nest`).
+Alternatives:
 
-There is also [postcss-nested-props] for nested properties like `font-size`.
+* See also [`postcss-nesting`], which implements [CSSWG draft]
+  (requires the `&` and introduces `@nest`).
+* [`postcss-nested-props`] for nested properties like `font-size`.
 
 <a href="https://evilmartians.com/?utm_source=postcss-nested">
 <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
 </a>
 
-[postcss-current-selector]: https://github.com/komlev/postcss-current-selector
-[postcss-nested-ancestors]: https://github.com/toomuchdesign/postcss-nested-ancestors
-[postcss-nested-props]:     https://github.com/jedmao/postcss-nested-props
-[postcss-nesting]:          https://github.com/jonathantneal/postcss-nesting
+[`postcss-current-selector`]: https://github.com/komlev/postcss-current-selector
+[`postcss-nested-ancestors`]: https://github.com/toomuchdesign/postcss-nested-ancestors
+[`postcss-nested-props`]:     https://github.com/jedmao/postcss-nested-props
+[`postcss-nesting`]:          https://github.com/jonathantneal/postcss-nesting
+[CSSWG draft]:              https://drafts.csswg.org/css-nesting-1/
 [PostCSS]:                  https://github.com/postcss/postcss
-[ci-img]:                   https://travis-ci.org/postcss/postcss-nested.svg
-[ci]:                       https://travis-ci.org/postcss/postcss-nested
 
 ## Usage
 

index.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from 'postcss';
+
+interface Options {
+  bubble?: string[];
+  unwrap?: string[];
+  preserveEmpty?: boolean;
+}
+
+export default function(options?: Options): Plugin<any>;

index.js

@@ -70,7 +70,7 @@ function atruleChilds (rule, atrule, bubbling) {
   atrule.each(function (child) {
     if (child.type === 'comment') {
       children.push(child)
-    } if (child.type === 'decl') {
+    } else if (child.type === 'decl') {
       children.push(child)
     } else if (child.type === 'rule' && bubbling) {
       child.selectors = selectors(rule, child)
@@ -92,6 +92,7 @@ function atruleChilds (rule, atrule, bubbling) {
 function processRule (rule, bubble, unwrap, preserveEmpty) {
   var unwrapped = false
   var after = rule
+
   rule.each(function (child) {
     if (child.type === 'rule') {
       unwrapped = true
@@ -100,7 +101,22 @@ function processRule (rule, bubble, unwrap, preserveEmpty) {
       after.after(child)
       after = child
     } else if (child.type === 'atrule') {
-      if (bubble[child.name]) {
+      if (child.name === 'at-root') {
+        unwrapped = true
+        atruleChilds(rule, child, false)
+
+        var nodes = child.nodes
+        if (child.params) {
+          nodes = postcss.rule({
+            selector: child.params,
+            nodes: nodes
+          })
+        }
+
+        after.after(nodes)
+        after = nodes
+        child.remove()
+      } else if (bubble[child.name]) {
         unwrapped = true
         atruleChilds(rule, child, true)
         after = pickComment(child.prev(), after)