postcss-nested 6.0.0 → 6.2.0

package/README.md

@@ -4,29 +4,29 @@
      title="Philosopher’s stone, logo of PostCSS"
      src="https://postcss.org/logo-leftp.svg">
 
-[PostCSS] plugin to unwrap nested rules like how Sass does it.
+[PostCSS] plugin to unwrap nested rules closer to Sass syntax.
 
 ```css
 .phone {
-    &_title {
-        width: 500px;
-        @media (max-width: 500px) {
-            width: auto;
-        }
-        body.is_dark & {
-            color: white;
-        }
+  &_title {
+    width: 500px;
+    @media (max-width: 500px) {
+      width: auto;
     }
-    img {
-        display: block;
+    body.is_dark & {
+      color: white;
     }
+  }
+  img {
+    display: block;
+  }
 }
 
 .title {
   font-size: var(--font);
 
   @at-root html {
-      --font: 16px
+    --font: 16px;
   }
 }
 ```
@@ -35,56 +35,51 @@ will be processed to:
 
 ```css
 .phone_title {
-    width: 500px;
+  width: 500px;
 }
 @media (max-width: 500px) {
-    .phone_title {
-        width: auto;
-    }
+  .phone_title {
+    width: auto;
+  }
 }
 body.is_dark .phone_title {
-    color: white;
+  color: white;
 }
 .phone img {
-    display: block;
+  display: block;
 }
 
 .title {
   font-size: var(--font);
 }
 html {
-  --font: 16px
+  --font: 16px;
 }
 ```
 
 Related plugins:
 
-* Use [`postcss-atroot`] for `@at-root` at-rule to move nested child
-  to the CSS root.
-* Use [`postcss-current-selector`] **after** this plugin if you want
+- 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
+- Use [`postcss-nested-ancestors`] **before** this plugin if you want
   to reference any ancestor element directly in your selectors with `^&`.
 
 Alternatives:
 
-* See also [`postcss-nesting`], which implements [CSSWG draft]
-  (requires the `&` and introduces `@nest`).
-* [`postcss-nested-props`] for nested properties like `font-size`.
+- See also [`postcss-nesting`], which implements [CSSWG draft].
+- [`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-atroot`]: https://github.com/OEvgeny/postcss-atroot
 [`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/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
-[CSSWG draft]:              https://drafts.csswg.org/css-nesting-1/
-[PostCSS]:                  https://github.com/postcss/postcss
-
+[`postcss-nested-props`]: https://github.com/jedmao/postcss-nested-props
+[`postcss-nesting`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
+[CSSWG draft]: https://drafts.csswg.org/css-nesting-1/
+[PostCSS]: https://github.com/postcss/postcss
 
 ## Docs
-Read **[full docs](https://github.com/postcss/postcss-nested#readme)** on GitHub.
+Read full docs **[here](https://github.com/postcss/postcss-nested#readme)**.

package/index.js

@@ -1,4 +1,4 @@
-const { Rule, AtRule } = require('postcss')
+const { AtRule, Rule } = require('postcss')
 let parser = require('postcss-selector-parser')
 
 /**
@@ -118,8 +118,8 @@ function createFnAtruleChilds(bubble) {
 
 function pickDeclarations(selector, declarations, after) {
   let parent = new Rule({
-    selector,
-    nodes: []
+    nodes: [],
+    selector
   })
   parent.append(declarations)
   after.after(parent)
@@ -143,7 +143,7 @@ function parseRootRuleParams(params) {
   params = params.trim()
   let braceBlock = params.match(/^\((.*)\)$/)
   if (!braceBlock) {
-    return { type: 'basic', selector: params }
+    return { selector: params, type: 'basic' }
   }
   let bits = braceBlock[1].match(/^(with(?:out)?):(.+)$/)
   if (bits) {
@@ -165,8 +165,8 @@ function parseRootRuleParams(params) {
     }
 
     return {
-      type: 'withrules',
-      escapes
+      escapes,
+      type: 'withrules'
     }
   }
   // Unrecognized brace block
@@ -250,14 +250,14 @@ const rootRuleEscapes = Symbol('rootRuleEscapes')
 
 function normalizeRootRule(rule) {
   let { params } = rule
-  let { type, selector, escapes } = parseRootRuleParams(params)
+  let { escapes, selector, type } = parseRootRuleParams(params)
   if (type === 'unknown') {
     throw rule.error(
       `Unknown @${rule.name} parameter ${JSON.stringify(params)}`
     )
   }
   if (type === 'basic' && selector) {
-    let selectorBlock = new Rule({ selector, nodes: rule.nodes })
+    let selectorBlock = new Rule({ nodes: rule.nodes, selector })
     rule.removeAll()
     rule.append(selectorBlock)
   }
@@ -268,7 +268,10 @@ function normalizeRootRule(rule) {
 const hasRootRule = Symbol('hasRootRule')
 
 module.exports = (opts = {}) => {
-  let bubble = atruleNames(['media', 'supports', 'layer'], opts.bubble)
+  let bubble = atruleNames(
+    ['media', 'supports', 'layer', 'container', 'starting-style'],
+    opts.bubble
+  )
   let atruleChilds = createFnAtruleChilds(bubble)
   let unwrap = atruleNames(
     [
@@ -284,8 +287,6 @@ module.exports = (opts = {}) => {
   let preserveEmpty = opts.preserveEmpty
 
   return {
-    postcssPlugin: 'postcss-nested',
-
     Once(root) {
       root.walkAtRules(rootRuleName, node => {
         normalizeRootRule(node)
@@ -293,6 +294,15 @@ module.exports = (opts = {}) => {
       })
     },
 
+    postcssPlugin: 'postcss-nested',
+
+    RootExit(root) {
+      if (root[hasRootRule]) {
+        root.walkAtRules(rootRuleName, unwrapRootRule)
+        root[hasRootRule] = false
+      }
+    },
+
     Rule(rule) {
       let unwrapped = false
       let after = rule
@@ -345,13 +355,6 @@ module.exports = (opts = {}) => {
         rule.raws.semicolon = true
         if (rule.nodes.length === 0) rule.remove()
       }
-    },
-
-    RootExit(root) {
-      if (root[hasRootRule]) {
-        root.walkAtRules(rootRuleName, unwrapRootRule)
-        root[hasRootRule] = false
-      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-nested",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "description": "PostCSS plugin to unwrap nested rules like how Sass does it",
   "keywords": [
     "postcss",
@@ -15,14 +15,20 @@
   "engines": {
     "node": ">=12.0"
   },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/postcss/"
-  },
+  "funding": [
+    {
+      "type": "opencollective",
+      "url": "https://opencollective.com/postcss/"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/ai"
+    }
+  ],
   "peerDependencies": {
     "postcss": "^8.2.14"
   },
   "dependencies": {
-    "postcss-selector-parser": "^6.0.10"
+    "postcss-selector-parser": "^6.1.1"
   }
 }