postcss-nested 5.0.2 → 5.0.6

package/README.md

@@ -27,7 +27,6 @@
 
   @at-root html {
       --font: 16px
-    }
   }
 }
 ```
@@ -60,10 +59,12 @@ html {
 
 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
-to use current selector in properties or variables values.
+  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 `^&`.
+  to reference any ancestor element directly in your selectors with `^&`.
 
 Alternatives:
 
@@ -76,6 +77,7 @@ Alternatives:
        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
@@ -92,7 +94,7 @@ Alternatives:
 npm install --save-dev postcss postcss-nested
 ```
 
-**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
+**Step 2:** Check your project for existing PostCSS config: `postcss.config.js`
 in the project root, `"postcss"` section in `package.json`
 or `postcss` in bundle config.
 

package/index.d.ts

@@ -1,30 +1,34 @@
-// Original definitions (@types/postcss-nested) by Maxim Vorontsov <https://github.com/VorontsovMaxim>
+// Original definitions (@types/postcss-nested)
+// by Maxim Vorontsov <https://github.com/VorontsovMaxim>
 
-import { PluginCreator } from 'postcss';
+import { PluginCreator } from 'postcss'
 
 declare namespace nested {
   interface Options {
     /**
-     * By default, plugin will bubble only @media and @supports at-rules.
+     * By default, plugin will bubble only `@media` and `@supports` at-rules.
      * You can add your custom at-rules to this list by this option.
      */
-    bubble?: string[];
+    bubble?: string[]
 
     /**
-     * By default, plugin will unwrap only @font-face, @keyframes and @document at-rules.
-     * You can add your custom at-rules to this list by this option.
+     * By default, plugin will unwrap only `@font-face`, `@keyframes`,
+     * and `@document` at-rules. You can add your custom at-rules
+     * to this list by this option.
      */
-    unwrap?: string[];
+    unwrap?: string[]
 
     /**
-     * By default, plugin will strip out any empty selector generated by intermediate nesting
-     * levels. You can set this option to true to preserve them.
+     * By default, plugin will strip out any empty selector generated
+     * by intermediate nesting levels. You can set this option to `true`
+     * to preserve them.
      */
-    preserveEmpty?: boolean;
+    preserveEmpty?: boolean
   }
 
-  type Nested = PluginCreator<Options>;
+  type Nested = PluginCreator<Options>
 }
 
-declare const nested: nested.Nested;
-export = nested;
+declare const nested: nested.Nested
+
+export = nested

package/index.js

@@ -43,13 +43,15 @@ function selectors (parent, child) {
     let parentNode = parse(i, parent)
 
     child.selectors.forEach(j => {
-      let node = parse(j, child)
-      let replaced = replace(node, parentNode)
-      if (!replaced) {
-        node.prepend(parser.combinator({ value: ' ' }))
-        node.prepend(parentNode.clone())
+      if (j.length) {
+        let node = parse(j, child)
+        let replaced = replace(node, parentNode)
+        if (!replaced) {
+          node.prepend(parser.combinator({ value: ' ' }))
+          node.prepend(parentNode.clone())
+        }
+        result.push(node.toString())
       }
-      result.push(node.toString())
     })
   })
   return result
@@ -64,26 +66,32 @@ function pickComment (comment, after) {
   }
 }
 
-function atruleChilds (rule, atrule, bubbling) {
-  let children = []
-  atrule.each(child => {
-    if (child.type === 'comment') {
-      children.push(child)
-    } else if (child.type === 'decl') {
-      children.push(child)
-    } else if (child.type === 'rule' && bubbling) {
-      child.selectors = selectors(rule, child)
-    } else if (child.type === 'atrule') {
-      atruleChilds(rule, child, bubbling)
-    }
-  })
-  if (bubbling) {
-    if (children.length) {
-      let clone = rule.clone({ nodes: [] })
-      for (let child of children) {
-        clone.append(child)
+function createFnAtruleChilds (bubble) {
+  return function atruleChilds (rule, atrule, bubbling) {
+    let children = []
+    atrule.each(child => {
+      if (child.type === 'comment') {
+        children.push(child)
+      } else if (child.type === 'decl') {
+        children.push(child)
+      } else if (child.type === 'rule' && bubbling) {
+        child.selectors = selectors(rule, child)
+      } else if (child.type === 'atrule') {
+        if (child.nodes && bubble[child.name]) {
+          atruleChilds(rule, child, true)
+        } else {
+          children.push(child)
+        }
+      }
+    })
+    if (bubbling) {
+      if (children.length) {
+        let clone = rule.clone({ nodes: [] })
+        for (let child of children) {
+          clone.append(child)
+        }
+        atrule.prepend(clone)
       }
-      atrule.prepend(clone)
     }
   }
 }
@@ -118,12 +126,22 @@ function atruleNames (defaults, custom) {
 
 module.exports = (opts = {}) => {
   let bubble = atruleNames(['media', 'supports'], opts.bubble)
-  let unwrap = atruleNames(['document', 'font-face', 'keyframes'], opts.unwrap)
+  let atruleChilds = createFnAtruleChilds(bubble)
+  let unwrap = atruleNames(
+    [
+      'document',
+      'font-face',
+      'keyframes',
+      '-webkit-keyframes',
+      '-moz-keyframes'
+    ],
+    opts.unwrap
+  )
   let preserveEmpty = opts.preserveEmpty
 
   return {
     postcssPlugin: 'postcss-nested',
-    RuleExit (rule, { Rule }) {
+    Rule (rule, { Rule }) {
       let unwrapped = false
       let after = rule
       let copyDeclarations = false
@@ -143,8 +161,6 @@ module.exports = (opts = {}) => {
           after.after(child)
           after = child
         } else if (child.type === 'atrule') {
-          copyDeclarations = false
-
           if (declarations.length) {
             after = pickDeclarations(rule.selector, declarations, after, Rule)
             declarations = []
@@ -163,17 +179,21 @@ module.exports = (opts = {}) => {
             after = nodes
             child.remove()
           } else if (bubble[child.name]) {
+            copyDeclarations = true
             unwrapped = true
             atruleChilds(rule, child, true)
             after = pickComment(child.prev(), after)
             after.after(child)
             after = child
           } else if (unwrap[child.name]) {
+            copyDeclarations = true
             unwrapped = true
             atruleChilds(rule, child, false)
             after = pickComment(child.prev(), after)
             after.after(child)
             after = child
+          } else if (copyDeclarations) {
+            declarations.push(child)
           }
         } else if (child.type === 'decl' && copyDeclarations) {
           declarations.push(child)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-nested",
-  "version": "5.0.2",
+  "version": "5.0.6",
   "description": "PostCSS plugin to unwrap nested rules like how Sass does it",
   "keywords": [
     "postcss",
@@ -13,16 +13,16 @@
   "license": "MIT",
   "repository": "postcss/postcss-nested",
   "engines": {
-    "node": ">=10.0"
+    "node": ">=12.0"
   },
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/postcss/"
   },
   "peerDependencies": {
-    "postcss": "^8.1.5"
+    "postcss": "^8.2.14"
   },
   "dependencies": {
-    "postcss-selector-parser": "^6.0.4"
+    "postcss-selector-parser": "^6.0.6"
   }
 }

package/CHANGELOG.md

@@ -1,100 +0,0 @@
-# Change Log
-This project adheres to [Semantic Versioning](http://semver.org/).
-
-## 5.0.2
-* Fixed compatibility with `postcss-mixins` by moving to visitor API.
-
-## 5.0.1
-* Fixed PostCSS 8.1 compatibility.
-* Added funding links.
-
-## 5.0
-* Moved to PostCSS 8.
-* Moved `postcss` to `peerDependencies`.
-
-## 4.2.3
-* Fixed declarations after nested rule and before at-rule (by Rodion Demikhov).
-
-## 4.2.2
-* Fixed wrong specificity order of declarations (by Rodion Demikhov).
-
-## 4.2.1
-* Fix TypeScript definitions (by Avi Vahl).
-
-## 4.2
-* Add `@at-root` support (by Jason Quense).
-
-## 4.1.2
-* Improve error messsage on broken selector
-
-## 4.1.1
-* Add `&(:hover)` support (by Ben Delarre).
-
-## 4.1
-* Add `unwrap` option.
-
-## 4.0
-* Use PostCSS 7 (by Aleks Hudochenkov).
-* Remove Node.js 4 support.
-
-## 3.0
-* Add `@font-face` to bubbling at-rules (by Valeriy Komlev).
-* Add special logic for `@font-face` bubbling (by Phanindra Pydisetty).
-* Use PostCSS selector parser 3.0.
-
-## 2.1.2
-* Fix replacing multiple `&`.
-
-## 2.1.1
-* Fix `:not(&)` support.
-
-## 2.1
-* Add `preserveEmpty` option (by Federico Zivolo).
-
-## 2.0.4
-* Fix finding `&` in some selectors (by Stepan Mikhaylyuk).
-
-## 2.0.3
-* Doesn’t replace `&` inside string (by Paul Kiddle).
-
-## 2.0.2
-* Fix comments moving regression.
-
-## 2.0.1
-* Fix rules order regression (by Dmitry Vibe).
-
-## 2.0
-* Use PostCSS 6 API.
-
-## 1.0.1
-* Clean up npm package.
-
-## 1.0
-* Use PostCSS 5.0 API.
-* Do not add spaces to selector in compressed CSS.
-* Move nodes with its comment above.
-
-## 0.3.2
-* Fix `@supports` at-rule support (by Ben Briggs).
-
-## 0.3.1
-* Pass PostCSS Plugin Guidelines.
-
-## 0.3
-* Do not unwrap custom at-rules.
-* Add `bubble` option to unwrap some custom at-rules.
-* Support PostCSS 4.1 API.
-* Fix last semicolon after unwrapping.
-
-## 0.2.2
-* Module returns function to have common PostCSS API.
-
-## 0.2.1
-* Add comma support to selectors unwrap.
-
-## 0.2
-* Use PostCSS 4.0.
-* Fix indent, when move rules to other parent.
-
-## 0.1
-* Initial release.