Update handling of ampersand in functional pseudo classes

experimental/postcss-nesting/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changes to PostCSS Nesting Experimental
 
+### Unreleased
+
+- Fix: Change how `&` is handled in functional pseudo classes in a non-nested context.
+
+```diff
+:has(&) {}
+
+/* becomes */
+
+- :has(:scope) {}
++ :has(:is(:root,:host)) {}
+```
+
 ### 1.1.1 (November 16, 2022)
 
 - Fix: Do not throw when a selector is invalid, show a warning instead.

experimental/postcss-nesting/dist/index.cjs

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=e(require("postcss-selector-parser"));function n(e){if(!e.nodes.length)return void e.remove();const t=e.nodes.filter((e=>"comment"===e.type));t.length===e.nodes.length&&e.replaceWith(...t)}function r(e,t){const r=t.index(e);if(r){const e=t.cloneBefore().removeAll().append(t.nodes.slice(0,r));e.raws.semicolon=!0,n(e)}t.before(e),t.raws.semicolon=!0}function o(e){let t=-1;e.each(((n,r)=>{if("decl"===n.type){if(-1===t)return void(t=r);if(t===r-1)return void(t=r);n.remove(),e.insertAfter(t,n),t=e.index(n)}}))}function s(e,s,c){let i=[];try{i=function(e,n,r,o){const s=[];if(0===o.length)return;const c=t.default().astSync(`:is(${r.join(",")})`);for(let r=0;r<o.length;r++){const i=t.default().astSync(o[r]);if(!i)continue;let l=!1;if(i.walk((e=>{"nesting"===e.type&&(l=!0)})),!l){const s=i.nodes[0];let c=!1;if(s.each((e=>"combinator"===e.type&&(c=!0,!1))),0===r){let t=!1;s.each((e=>"tag"===e.type&&(t=!0,!1))),t&&e.warn(n,`Invalid nested rule : "${o[r]}"`)}c||s.insertBefore(s.at(0),t.default.combinator({value:" "})),s.insertBefore(s.at(0),t.default.nesting({}))}i.walk((e=>{"nesting"===e.type&&e.replaceWith(c.clone({}))})),s.push(i.toString())}return s}(e,c,s.selectors,e.selectors)}catch(t){return void e.warn(c,`Failed to transform selectors : "${s.selector}" / "${e.selector}" with message: "${t.message}"`)}o(s),r(e,s),e.selectors=i;"rule"===e.type&&"rule"===s.type&&e.selector===s.selector&&e.append(...s.nodes),n(s)}var c=["container","document","media","supports","layer"];function i(e){const t=[];let n="",r=!1,o=0,s=!1,c=!1;for(const i of e)c?c=!1:"\\"===i?c=!0:s?i===s&&(s=!1):'"'===i||"'"===i?s=i:"("===i?o+=1:")"===i?o>0&&(o-=1):0===o&&","===i&&(r=!0),r?(""!==n&&t.push(n.trim()),n="",r=!1):n+=i;return t.push(n.trim()),t}function l(e,t){var s,c;o(t),r(e,t),e.params=(s=t.params,c=e.params,i(s).map((e=>i(c).map((t=>`${e} and ${t}`)).join(", "))).join(", ")),n(t)}function a(e){return e&&"atrule"===e.type}function u(e){return e&&"rule"===e.type}function f(e,t){e.each((e=>{const i=e.parent;u(e)&&e.selector.trim()&&u(i)&&i.selector.trim()?s(e,i,t):a(e)&&u(i)&&i.selector.trim()&&function(e){return c.includes(e.name)}(e)?function(e,t,s,c){if(o(t),r(e,t),e.nodes){const r=t.clone().removeAll().append(e.nodes);e.append(r),n(t),c(r,s)}}(e,i,t,f):a(e)&&a(i)&&function(e,t){return c.includes(e.name)&&e.name===t.name}(e,i)&&l(e,i),"nodes"in e&&e.nodes.length&&f(e,t)}))}const p=()=>({postcssPlugin:"postcss-nesting",Rule(e,{result:n}){f(e,n),e.selector.trim().includes("&")&&function(e,n){let r,o=e.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=t.default().astSync(e.selector)}catch(t){return void e.warn(n,`Failed to parse selector : "${e.selector}" with message: "${t.message}"`)}r&&(r.walkNesting((e=>{e.replaceWith(t.default.pseudo({value:":scope"}))})),e.selector=r.toString())}(e,n)}});p.postcss=!0,module.exports=p;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=e(require("postcss-selector-parser"));function n(e){if(!e.nodes.length)return void e.remove();const t=e.nodes.filter((e=>"comment"===e.type));t.length===e.nodes.length&&e.replaceWith(...t)}function o(e,t){const o=t.index(e);if(o){const e=t.cloneBefore().removeAll().append(t.nodes.slice(0,o));e.raws.semicolon=!0,n(e)}t.before(e),t.raws.semicolon=!0}function r(e){let t=-1;e.each(((n,o)=>{if("decl"===n.type){if(-1===t)return void(t=o);if(t===o-1)return void(t=o);n.remove(),e.insertAfter(t,n),t=e.index(n)}}))}function s(e,s,l){let a=[];try{a=function(e,n,o,r){const s=[];if(0===r.length)return;const l=t.default().astSync(`:is(${o.join(",")})`);for(let o=0;o<r.length;o++){const a=t.default().astSync(r[o]);if(!a)continue;let c=!1;if(a.walk((e=>{"nesting"===e.type&&(c=!0)})),!c){const s=a.nodes[0];let l=!1;if(s.each((e=>"combinator"===e.type&&(l=!0,!1))),0===o){let t=!1;s.each((e=>"tag"===e.type&&(t=!0,!1))),t&&e.warn(n,`Invalid nested rule : "${r[o]}"`)}l||s.insertBefore(s.at(0),t.default.combinator({value:" "})),s.insertBefore(s.at(0),t.default.nesting({}))}a.walk((e=>{"nesting"===e.type&&e.replaceWith(l.clone({}))})),s.push(a.toString())}return s}(e,l,s.selectors,e.selectors)}catch(t){return void e.warn(l,`Failed to transform selectors : "${s.selector}" / "${e.selector}" with message: "${t.message}"`)}r(s),o(e,s),e.selectors=a;"rule"===e.type&&"rule"===s.type&&e.selector===s.selector&&e.append(...s.nodes),n(s)}var l=["container","document","media","supports","layer"];function a(e){const t=[];let n="",o=!1,r=0,s=!1,l=!1;for(const a of e)l?l=!1:"\\"===a?l=!0:s?a===s&&(s=!1):'"'===a||"'"===a?s=a:"("===a?r+=1:")"===a?r>0&&(r-=1):0===r&&","===a&&(o=!0),o?(""!==n&&t.push(n.trim()),n="",o=!1):n+=a;return t.push(n.trim()),t}function c(e,t){var s,l;r(t),o(e,t),e.params=(s=t.params,l=e.params,a(s).map((e=>a(l).map((t=>`${e} and ${t}`)).join(", "))).join(", ")),n(t)}function i(e){return e&&"atrule"===e.type}function u(e){return e&&"rule"===e.type}function p(e,t){e.each((e=>{const a=e.parent;u(e)&&e.selector.trim()&&u(a)&&a.selector.trim()?s(e,a,t):i(e)&&u(a)&&a.selector.trim()&&function(e){return l.includes(e.name)}(e)?function(e,t,s,l){if(r(t),o(e,t),e.nodes){const o=t.clone().removeAll().append(e.nodes);e.append(o),n(t),l(o,s)}}(e,a,t,p):i(e)&&i(a)&&function(e,t){return l.includes(e.name)&&e.name===t.name}(e,a)&&c(e,a),"nodes"in e&&e.nodes.length&&p(e,t)}))}const d=()=>({postcssPlugin:"postcss-nesting",Rule(e,{result:n}){p(e,n),e.selector.trim().includes("&")&&function(e,n){let o,r=e.parent;for(;r;){if("rule"===r.type)return;r=r.parent}try{o=t.default().astSync(e.selector)}catch(t){return void e.warn(n,`Failed to parse selector : "${e.selector}" with message: "${t.message}"`)}o&&(o.walkNesting((e=>{var n,o;"root"===(null==(n=e.parent)||null==(o=n.parent)?void 0:o.type)?e.replaceWith(t.default.pseudo({value:":scope"})):e.replaceWith(t.default.pseudo({value:":is",nodes:[t.default.pseudo({value:":root"}),t.default.pseudo({value:":host"})]}))})),e.selector=o.toString())}(e,n)}});d.postcss=!0,module.exports=d;

experimental/postcss-nesting/dist/index.mjs

@@ -1 +1 @@
-import e from"postcss-selector-parser";function t(e){if(!e.nodes.length)return void e.remove();const t=e.nodes.filter((e=>"comment"===e.type));t.length===e.nodes.length&&e.replaceWith(...t)}function n(e,n){const r=n.index(e);if(r){const e=n.cloneBefore().removeAll().append(n.nodes.slice(0,r));e.raws.semicolon=!0,t(e)}n.before(e),n.raws.semicolon=!0}function r(e){let t=-1;e.each(((n,r)=>{if("decl"===n.type){if(-1===t)return void(t=r);if(t===r-1)return void(t=r);n.remove(),e.insertAfter(t,n),t=e.index(n)}}))}function o(o,s,c){let i=[];try{i=function(t,n,r,o){const s=[];if(0===o.length)return;const c=e().astSync(`:is(${r.join(",")})`);for(let r=0;r<o.length;r++){const i=e().astSync(o[r]);if(!i)continue;let l=!1;if(i.walk((e=>{"nesting"===e.type&&(l=!0)})),!l){const s=i.nodes[0];let c=!1;if(s.each((e=>"combinator"===e.type&&(c=!0,!1))),0===r){let e=!1;s.each((t=>"tag"===t.type&&(e=!0,!1))),e&&t.warn(n,`Invalid nested rule : "${o[r]}"`)}c||s.insertBefore(s.at(0),e.combinator({value:" "})),s.insertBefore(s.at(0),e.nesting({}))}i.walk((e=>{"nesting"===e.type&&e.replaceWith(c.clone({}))})),s.push(i.toString())}return s}(o,c,s.selectors,o.selectors)}catch(e){return void o.warn(c,`Failed to transform selectors : "${s.selector}" / "${o.selector}" with message: "${e.message}"`)}r(s),n(o,s),o.selectors=i;"rule"===o.type&&"rule"===s.type&&o.selector===s.selector&&o.append(...s.nodes),t(s)}var s=["container","document","media","supports","layer"];function c(e){const t=[];let n="",r=!1,o=0,s=!1,c=!1;for(const i of e)c?c=!1:"\\"===i?c=!0:s?i===s&&(s=!1):'"'===i||"'"===i?s=i:"("===i?o+=1:")"===i?o>0&&(o-=1):0===o&&","===i&&(r=!0),r?(""!==n&&t.push(n.trim()),n="",r=!1):n+=i;return t.push(n.trim()),t}function i(e,o){var s,i;r(o),n(e,o),e.params=(s=o.params,i=e.params,c(s).map((e=>c(i).map((t=>`${e} and ${t}`)).join(", "))).join(", ")),t(o)}function l(e){return e&&"atrule"===e.type}function a(e){return e&&"rule"===e.type}function u(e,c){e.each((e=>{const p=e.parent;a(e)&&e.selector.trim()&&a(p)&&p.selector.trim()?o(e,p,c):l(e)&&a(p)&&p.selector.trim()&&function(e){return s.includes(e.name)}(e)?function(e,o,s,c){if(r(o),n(e,o),e.nodes){const n=o.clone().removeAll().append(e.nodes);e.append(n),t(o),c(n,s)}}(e,p,c,u):l(e)&&l(p)&&function(e,t){return s.includes(e.name)&&e.name===t.name}(e,p)&&i(e,p),"nodes"in e&&e.nodes.length&&u(e,c)}))}const p=()=>({postcssPlugin:"postcss-nesting",Rule(t,{result:n}){u(t,n),t.selector.trim().includes("&")&&function(t,n){let r,o=t.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e.message}"`)}r&&(r.walkNesting((t=>{t.replaceWith(e.pseudo({value:":scope"}))})),t.selector=r.toString())}(t,n)}});p.postcss=!0;export{p as default};
+import e from"postcss-selector-parser";function t(e){if(!e.nodes.length)return void e.remove();const t=e.nodes.filter((e=>"comment"===e.type));t.length===e.nodes.length&&e.replaceWith(...t)}function n(e,n){const o=n.index(e);if(o){const e=n.cloneBefore().removeAll().append(n.nodes.slice(0,o));e.raws.semicolon=!0,t(e)}n.before(e),n.raws.semicolon=!0}function o(e){let t=-1;e.each(((n,o)=>{if("decl"===n.type){if(-1===t)return void(t=o);if(t===o-1)return void(t=o);n.remove(),e.insertAfter(t,n),t=e.index(n)}}))}function r(r,s,c){let i=[];try{i=function(t,n,o,r){const s=[];if(0===r.length)return;const c=e().astSync(`:is(${o.join(",")})`);for(let o=0;o<r.length;o++){const i=e().astSync(r[o]);if(!i)continue;let l=!1;if(i.walk((e=>{"nesting"===e.type&&(l=!0)})),!l){const s=i.nodes[0];let c=!1;if(s.each((e=>"combinator"===e.type&&(c=!0,!1))),0===o){let e=!1;s.each((t=>"tag"===t.type&&(e=!0,!1))),e&&t.warn(n,`Invalid nested rule : "${r[o]}"`)}c||s.insertBefore(s.at(0),e.combinator({value:" "})),s.insertBefore(s.at(0),e.nesting({}))}i.walk((e=>{"nesting"===e.type&&e.replaceWith(c.clone({}))})),s.push(i.toString())}return s}(r,c,s.selectors,r.selectors)}catch(e){return void r.warn(c,`Failed to transform selectors : "${s.selector}" / "${r.selector}" with message: "${e.message}"`)}o(s),n(r,s),r.selectors=i;"rule"===r.type&&"rule"===s.type&&r.selector===s.selector&&r.append(...s.nodes),t(s)}var s=["container","document","media","supports","layer"];function c(e){const t=[];let n="",o=!1,r=0,s=!1,c=!1;for(const i of e)c?c=!1:"\\"===i?c=!0:s?i===s&&(s=!1):'"'===i||"'"===i?s=i:"("===i?r+=1:")"===i?r>0&&(r-=1):0===r&&","===i&&(o=!0),o?(""!==n&&t.push(n.trim()),n="",o=!1):n+=i;return t.push(n.trim()),t}function i(e,r){var s,i;o(r),n(e,r),e.params=(s=r.params,i=e.params,c(s).map((e=>c(i).map((t=>`${e} and ${t}`)).join(", "))).join(", ")),t(r)}function l(e){return e&&"atrule"===e.type}function a(e){return e&&"rule"===e.type}function u(e,c){e.each((e=>{const p=e.parent;a(e)&&e.selector.trim()&&a(p)&&p.selector.trim()?r(e,p,c):l(e)&&a(p)&&p.selector.trim()&&function(e){return s.includes(e.name)}(e)?function(e,r,s,c){if(o(r),n(e,r),e.nodes){const n=r.clone().removeAll().append(e.nodes);e.append(n),t(r),c(n,s)}}(e,p,c,u):l(e)&&l(p)&&function(e,t){return s.includes(e.name)&&e.name===t.name}(e,p)&&i(e,p),"nodes"in e&&e.nodes.length&&u(e,c)}))}const p=()=>({postcssPlugin:"postcss-nesting",Rule(t,{result:n}){u(t,n),t.selector.trim().includes("&")&&function(t,n){let o,r=t.parent;for(;r;){if("rule"===r.type)return;r=r.parent}try{o=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e.message}"`)}o&&(o.walkNesting((t=>{var n,o;"root"===(null==(n=t.parent)||null==(o=n.parent)?void 0:o.type)?t.replaceWith(e.pseudo({value:":scope"})):t.replaceWith(e.pseudo({value:":is",nodes:[e.pseudo({value:":root"}),e.pseudo({value:":host"})]}))})),t.selector=o.toString())}(t,n)}});p.postcss=!0;export{p as default};

experimental/postcss-nesting/src/lib/ampersand-to-scope.ts

@@ -24,7 +24,24 @@ export default function ampersandToScope(rule: Rule, result: Result) {
 	}
 
 	selectorAST.walkNesting((nesting) => {
-		nesting.replaceWith(parser.pseudo({value: ':scope'}));
+		if (nesting.parent?.parent?.type === 'root') {
+			nesting.replaceWith(parser.pseudo({
+				value: ':scope',
+			}));
+		} else {
+			// :has(&) != :has(:scope)
+			nesting.replaceWith(parser.pseudo({
+				value: ':is',
+				nodes: [
+					parser.pseudo({
+						value: ':root',
+					}),
+					parser.pseudo({
+						value: ':host',
+					}),
+				],
+			}));
+		}
 	});
 
 	rule.selector = selectorAST.toString();

experimental/postcss-nesting/test/ampersand-everywhere.expect.css

@@ -7,7 +7,7 @@
 }
 
 
-.foo:has(:scope, :not(:scope)) {
+.foo:has(:is(:root,:host), :not(:is(:root,:host))) {
 	order: 3;
 }