postcss-nested 6.0.1 → 7.0.0

package/README.md

@@ -8,25 +8,25 @@
 
 ```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,39 +35,39 @@ 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-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].
-* [`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"
@@ -76,11 +76,10 @@ Alternatives:
 
 [`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 **[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')
 
 /**
@@ -53,12 +53,12 @@ function interpolateAmpInSelector(nodes, parent) {
  */
 function mergeSelectors(parent, child) {
   let merged = []
-  parent.selectors.forEach(sel => {
+  for (let sel of parent.selectors) {
     let parentNode = parse(sel, parent)
 
-    child.selectors.forEach(selector => {
+    for (let selector of child.selectors) {
       if (!selector) {
-        return
+        continue
       }
       let node = parse(selector, child)
       let replaced = interpolateAmpInSelector(node, parentNode)
@@ -67,22 +67,43 @@ function mergeSelectors(parent, child) {
         node.prepend(parentNode.clone({}))
       }
       merged.push(node.toString())
-    })
-  })
+    }
+  }
   return merged
 }
 
 /**
- * Move a child and its preceeding comment(s) to after "after"
+ * Move a child and its preceding comment(s) to after "after"
+ * ! It is necessary to clarify the comment
  */
 function breakOut(child, after) {
-  let prev = child.prev()
-  after.after(child)
-  while (prev && prev.type === 'comment') {
-    let nextPrev = prev.prev()
-    after.after(prev)
-    prev = nextPrev
+  let changeParent = true
+
+  for (let node of after.nodes) {
+    if (!node.nodes) continue
+
+    let prevNode = node.prev()
+    if (prevNode?.type !== 'comment') continue
+
+    let parentRule = after.toString()
+
+    /* Checking that the comment "describes" the rule following. Like this:
+      /* comment about the rule below /*
+      .rule {}
+    */
+    let regexp = new RegExp(`${prevNode.toString()} *\n *${node.toString()}`)
+
+    if (parentRule.match(regexp)) {
+      changeParent = false
+      after.after(node).after(prevNode)
+    }
   }
+
+  // It is necessary if the above child has never been moved
+  if (changeParent) {
+    after.after(child)
+  }
+
   return child
 }
 
@@ -104,37 +125,42 @@ function createFnAtruleChilds(bubble) {
         children.push(child)
       }
     })
-    if (bubbling) {
-      if (children.length) {
-        let clone = rule.clone({ nodes: [] })
-        for (let child of children) {
-          clone.append(child)
-        }
-        atrule.prepend(clone)
+    if (bubbling && children.length) {
+      let clone = rule.clone({ nodes: [] })
+      for (let child of children) {
+        clone.append(child)
       }
+      atrule.prepend(clone)
     }
   }
 }
 
 function pickDeclarations(selector, declarations, after) {
   let parent = new Rule({
-    selector,
-    nodes: []
+    nodes: [],
+    selector
   })
   parent.append(declarations)
   after.after(parent)
   return parent
 }
+function pickAndClearDeclarations(ruleSelector, declarations, after, clear = true) {
+  if (!declarations.length) return [after, declarations]
 
-function atruleNames(defaults, custom) {
-  let list = {}
-  for (let name of defaults) {
-    list[name] = true
+  after = pickDeclarations(ruleSelector, declarations, after)
+
+  if (clear) {
+    declarations = []
   }
-  if (custom) {
-    for (let name of custom) {
-      list[name.replace(/^@/, '')] = true
-    }
+
+  return [after, declarations]
+}
+
+function atruleNames(defaults, custom = '') {
+  let names = defaults.concat(custom)
+  let list = {}
+  for (let name of names) {
+    list[name.replace(/^@/, '')] = true
   }
   return list
 }
@@ -143,7 +169,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 +191,8 @@ function parseRootRuleParams(params) {
     }
 
     return {
-      type: 'withrules',
-      escapes
+      escapes,
+      type: 'withrules'
     }
   }
   // Unrecognized brace block
@@ -250,14 +276,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)
   }
@@ -269,7 +295,7 @@ const hasRootRule = Symbol('hasRootRule')
 
 module.exports = (opts = {}) => {
   let bubble = atruleNames(
-    ['media', 'supports', 'layer', 'container'],
+    ['media', 'supports', 'layer', 'container', 'starting-style'],
     opts.bubble
   )
   let atruleChilds = createFnAtruleChilds(bubble)
@@ -287,8 +313,6 @@ module.exports = (opts = {}) => {
   let preserveEmpty = opts.preserveEmpty
 
   return {
-    postcssPlugin: 'postcss-nested',
-
     Once(root) {
       root.walkAtRules(rootRuleName, node => {
         normalizeRootRule(node)
@@ -296,6 +320,15 @@ module.exports = (opts = {}) => {
       })
     },
 
+    postcssPlugin: 'postcss-nested',
+
+    RootExit(root) {
+      if (!root[hasRootRule]) return
+
+      root.walkAtRules(rootRuleName, unwrapRootRule)
+      root[hasRootRule] = false
+    },
+
     Rule(rule) {
       let unwrapped = false
       let after = rule
@@ -303,58 +336,53 @@ module.exports = (opts = {}) => {
       let declarations = []
 
       rule.each(child => {
-        if (child.type === 'rule') {
-          if (declarations.length) {
-            after = pickDeclarations(rule.selector, declarations, after)
-            declarations = []
-          }
-
-          copyDeclarations = true
-          unwrapped = true
-          child.selectors = mergeSelectors(rule, child)
-          after = breakOut(child, after)
-        } else if (child.type === 'atrule') {
-          if (declarations.length) {
-            after = pickDeclarations(rule.selector, declarations, after)
-            declarations = []
-          }
-          if (child.name === rootRuleName) {
-            unwrapped = true
-            atruleChilds(rule, child, true, child[rootRuleMergeSel])
-            after = breakOut(child, after)
-          } else if (bubble[child.name]) {
-            copyDeclarations = true
-            unwrapped = true
-            atruleChilds(rule, child, true)
-            after = breakOut(child, after)
-          } else if (unwrap[child.name]) {
+        switch (child.type) {
+          case 'atrule':
+            [after, declarations] = pickAndClearDeclarations(rule.selector, declarations, after)
+
+            if (child.name === rootRuleName) {
+              unwrapped = true
+              atruleChilds(rule, child, true, child[rootRuleMergeSel])
+              after = breakOut(child, after)
+            } else if (bubble[child.name]) {
+              copyDeclarations = true
+              unwrapped = true
+              atruleChilds(rule, child, true)
+              after = breakOut(child, after)
+            } else if (unwrap[child.name]) {
+              copyDeclarations = true
+              unwrapped = true
+              atruleChilds(rule, child, false)
+              after = breakOut(child, after)
+            } else if (copyDeclarations) {
+              declarations.push(child)
+            }
+
+            break
+          case 'decl':
+            if (copyDeclarations) {
+              declarations.push(child)
+            }
+
+            break
+          case 'rule':
+            [after, declarations] = pickAndClearDeclarations(rule.selector, declarations, after)
+
             copyDeclarations = true
             unwrapped = true
-            atruleChilds(rule, child, false)
+            child.selectors = mergeSelectors(rule, child)
             after = breakOut(child, after)
-          } else if (copyDeclarations) {
-            declarations.push(child)
-          }
-        } else if (child.type === 'decl' && copyDeclarations) {
-          declarations.push(child)
+
+            break
         }
       })
 
-      if (declarations.length) {
-        after = pickDeclarations(rule.selector, declarations, after)
-      }
+      pickAndClearDeclarations(rule.selector, declarations, after, false)
 
       if (unwrapped && preserveEmpty !== true) {
         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.1",
+  "version": "7.0.0",
   "description": "PostCSS plugin to unwrap nested rules like how Sass does it",
   "keywords": [
     "postcss",
@@ -13,16 +13,22 @@
   "license": "MIT",
   "repository": "postcss/postcss-nested",
   "engines": {
-    "node": ">=12.0"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/postcss/"
+    "node": ">=18.0"
   },
+  "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.11"
+    "postcss-selector-parser": "^7.0.0"
   }
 }