postcss-nested 8.0.1 → 9.0.0

package/README.md

@@ -81,3 +81,6 @@ Alternatives:
 [`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.d.ts

@@ -3,39 +3,35 @@
 
 import type { PluginCreator } from 'postcss'
 
-declare namespace nested {
-  interface Options {
-    /**
-     * By default, plugin will bubble only `@media`, `@supports` and `@layer`
-     * at-rules. Use this option to add your custom at-rules to this list.
-     */
-    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.
-     */
-    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.
-     */
-    preserveEmpty?: boolean
-
-    /**
-     * The plugin supports the SCSS custom at-rule `@at-root` which breaks
-     * rule blocks out of their nested position. If you want, you can choose
-     * a new custom name for this rule in your code.
-     */
-    rootRuleName?: string
-  }
-
-  type Nested = PluginCreator<Options>
+export interface Options {
+  /**
+   * By default, plugin will bubble only `@media`, `@supports` and `@layer`
+   * at-rules. Use this option to add your custom at-rules to this list.
+   */
+  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.
+   */
+  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.
+   */
+  preserveEmpty?: boolean
+
+  /**
+   * The plugin supports the SCSS custom at-rule `@at-root` which breaks
+   * rule blocks out of their nested position. If you want, you can choose
+   * a new custom name for this rule in your code.
+   */
+  rootRuleName?: string
 }
 
-declare let nested: nested.Nested
+declare let nested: PluginCreator<Options>
 
 export default nested

package/index.js

@@ -20,6 +20,18 @@ function parse(rawSelector, rule) {
   return nodes.at(0)
 }
 
+/**
+ * Replaces one "&" token with the parent selector
+ */
+function replaceAmp(node, parent) {
+  let clonedParent = parent.clone({})
+  if (node.value !== '&') {
+    node.replaceWith(parse(node.value.replace('&', clonedParent.toString())))
+  } else {
+    node.replaceWith(clonedParent)
+  }
+}
+
 /**
  * Replaces the "&" token in a node's selector with the parent selector
  * similar to what SCSS does.
@@ -30,14 +42,7 @@ function interpolateAmpInSelector(nodes, parent) {
   let replaced = false
   nodes.each(node => {
     if (node.type === 'nesting') {
-      let clonedParent = parent.clone({})
-      if (node.value !== '&') {
-        node.replaceWith(
-          parse(node.value.replace('&', clonedParent.toString()))
-        )
-      } else {
-        node.replaceWith(clonedParent)
-      }
+      replaceAmp(node, parent)
       replaced = true
     } else if ('nodes' in node && node.nodes) {
       if (interpolateAmpInSelector(node, parent)) {
@@ -48,20 +53,92 @@ function interpolateAmpInSelector(nodes, parent) {
   return replaced
 }
 
+/**
+ * Pseudo-classes which take a selector list
+ */
+const SELECTOR_LISTS = new Set([':has', ':is', ':not', ':where'])
+
+/**
+ * Replaces "&" inside :not() with the whole parent selector list, like Sass.
+ * A copy for each parent selector would turn "neither .a nor .b"
+ * into "not .a or not .b".
+ *
+ * Mutates the nodes list
+ */
+function replaceAmpsInNot(nodes, parents, negated = false) {
+  let replaced = false
+  nodes.each(node => {
+    if (node.type !== 'pseudo') {
+      return
+    }
+    let name = node.value.toLowerCase()
+    let inside = negated || name === ':not'
+    node.each(selector => {
+      if (replaceAmpsInNot(selector, parents, inside)) {
+        replaced = true
+      }
+      let amps = selector.nodes.filter(i => i.type === 'nesting')
+      if (!inside || !SELECTOR_LISTS.has(name) || amps.length === 0) {
+        return
+      }
+      let combos = [[]]
+      for (let i = 0; i < amps.length; i++) {
+        combos = combos.flatMap(combo => parents.map(p => [...combo, p]))
+      }
+      let list = combos.map(combo => {
+        let copy = selector.clone()
+        copy.nodes
+          .filter(i => i.type === 'nesting')
+          .forEach((amp, i) => replaceAmp(amp, combo[i]))
+        return copy.toString().trim()
+      })
+      let space = node.index(selector) > 0 ? ' ' : ''
+      selector.replaceWith(...parser().astSync(space + list.join(', ')).nodes)
+      replaced = true
+    })
+  })
+  return replaced
+}
+
 /**
  * Combines parent and child selectors, in a SCSS-like way
  */
 function mergeSelectors(parent, child) {
   let merged = []
-  for (let sel of parent.selectors) {
-    let parentNode = parse(sel, parent)
-
+  let parents = parent.selectors.map(sel => parse(sel, parent))
+  for (let parentNode of parents) {
     for (let selector of child.selectors) {
       if (!selector) {
         continue
       }
       let node = parse(selector, child)
-      let replaced = interpolateAmpInSelector(node, parentNode)
+      let replacedInNot = replaceAmpsInNot(node, parents)
+      let ampsLeft = false
+      node.walkNesting(() => {
+        ampsLeft = true
+      })
+      // Without "&" outside :not(), every parent selector gives the same result
+      if (replacedInNot && !ampsLeft && parentNode !== parents[0]) {
+        continue
+      }
+      let amps = node.nodes.filter(i => i.type === 'nesting')
+      if (amps.length > 1) {
+        // Like in Sass, every "&" after the first one takes each parent selector
+        let combos = [[parentNode]]
+        for (let i = 1; i < amps.length; i++) {
+          combos = combos.flatMap(combo => parents.map(p => [...combo, p]))
+        }
+        for (let combo of combos) {
+          let copy = node.clone()
+          copy.nodes
+            .filter(i => i.type === 'nesting')
+            .forEach((amp, i) => replaceAmp(amp, combo[i]))
+          interpolateAmpInSelector(copy, parentNode)
+          merged.push(copy.toString())
+        }
+        continue
+      }
+      let replaced = interpolateAmpInSelector(node, parentNode) || replacedInNot
       if (!replaced) {
         node.prepend(parser.combinator({ value: ' ' }))
         node.prepend(parentNode.clone({}))
@@ -149,7 +226,7 @@ function pickAndClearDeclarations(
 
 function atruleNames(defaults, custom = '') {
   let names = defaults.concat(custom)
-  let list = {}
+  let list = Object.create(null)
   for (let name of names) {
     list[name.replace(/^@/, '')] = true
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-nested",
-  "version": "8.0.1",
+  "version": "9.0.0",
   "description": "PostCSS plugin to unwrap nested rules like how Sass does it",
   "keywords": [
     "css",
@@ -28,7 +28,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "postcss-selector-parser": "^7.1.4"
+    "postcss-selector-parser": "^7.1.6"
   },
   "peerDependencies": {
     "postcss": "^8.2.14"