selector-specificity: view-transitions-2 (#1324)

Author: romainmenke

packages/selector-specificity/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changes to Selector Specificity
 
+### Unreleased (patch)
+
+- Add support for:
+	- `:active-view-transition`
+	- `:active-view-transition-type(foo)`
+
 ### 3.0.2
 
 _February 19, 2024_

packages/selector-specificity/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=require("postcss-selector-parser");function selectorSpecificity(s){if(!s)return{a:0,b:0,c:0};let t=0,c=0,i=0;if("universal"==s.type)return{a:0,b:0,c:0};if("id"===s.type)t+=1;else if("tag"===s.type)i+=1;else if("class"===s.type)c+=1;else if("attribute"===s.type)c+=1;else if(isPseudoElement(s))switch(s.value.toLowerCase()){case"::slotted":if(i+=1,s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,c+=e.b,i+=e.c}break;case"::view-transition-group":case"::view-transition-image-pair":case"::view-transition-old":case"::view-transition-new":return s.nodes&&1===s.nodes.length&&"selector"===s.nodes[0].type&&selectorNodeContainsOnlyUniversal(s.nodes[0])?{a:0,b:0,c:0}:{a:0,b:0,c:1};default:i+=1}else if(e.isPseudoClass(s))switch(s.value.toLowerCase()){case":-webkit-any":case":any":default:c+=1;break;case":-moz-any":case":has":case":is":case":matches":case":not":if(s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,c+=e.b,i+=e.c}break;case":where":break;case":nth-child":case":nth-last-child":if(c+=1,s.nodes&&s.nodes.length>0){const n=s.nodes[0].nodes.findIndex((e=>"tag"===e.type&&"of"===e.value.toLowerCase()));if(n>-1){const o=[e.selector({nodes:s.nodes[0].nodes.slice(n+1),value:""})];s.nodes.length>1&&o.push(...s.nodes.slice(1));const a=specificityOfMostSpecificListItem(o);t+=a.a,c+=a.b,i+=a.c}}break;case":local":case":global":s.nodes&&s.nodes.length>0&&s.nodes.forEach((e=>{const s=selectorSpecificity(e);t+=s.a,c+=s.b,i+=s.c}));break;case":host":case":host-context":if(c+=1,s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,c+=e.b,i+=e.c}break;case":active-view-transition":return s.nodes&&1===s.nodes.length&&"selector"===s.nodes[0].type&&selectorNodeContainsOnlyUniversal(s.nodes[0])?{a:0,b:1,c:0}:{a:0,b:2,c:0}}else e.isContainer(s)&&s.nodes.length>0&&s.nodes.forEach((e=>{const s=selectorSpecificity(e);t+=s.a,c+=s.b,i+=s.c}));return{a:t,b:c,c:i}}function specificityOfMostSpecificListItem(e){let s={a:0,b:0,c:0};return e.forEach((e=>{const t=selectorSpecificity(e);t.a>s.a?s=t:t.a<s.a||(t.b>s.b?s=t:t.b<s.b||t.c>s.c&&(s=t))})),s}function isPseudoElement(s){return e.isPseudoElement(s)}function selectorNodeContainsOnlyUniversal(e){if(!e)return!1;if(!e.nodes)return!1;const s=e.nodes.filter((e=>"comment"!==e.type));return 1===s.length&&"universal"===s[0].type}exports.compare=function compare(e,s){return e.a===s.a?e.b===s.b?e.c-s.c:e.b-s.b:e.a-s.a},exports.selectorSpecificity=selectorSpecificity;
+"use strict";var e=require("postcss-selector-parser");function selectorSpecificity(s){if(!s)return{a:0,b:0,c:0};let t=0,i=0,c=0;if("universal"==s.type)return{a:0,b:0,c:0};if("id"===s.type)t+=1;else if("tag"===s.type)c+=1;else if("class"===s.type)i+=1;else if("attribute"===s.type)i+=1;else if(isPseudoElement(s))switch(s.value.toLowerCase()){case"::slotted":if(c+=1,s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,i+=e.b,c+=e.c}break;case"::view-transition-group":case"::view-transition-image-pair":case"::view-transition-old":case"::view-transition-new":return s.nodes&&1===s.nodes.length&&"selector"===s.nodes[0].type&&selectorNodeContainsNothingOrOnlyUniversal(s.nodes[0])?{a:0,b:0,c:0}:{a:0,b:0,c:1};default:c+=1}else if(e.isPseudoClass(s))switch(s.value.toLowerCase()){case":-webkit-any":case":any":default:i+=1;break;case":-moz-any":case":has":case":is":case":matches":case":not":if(s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,i+=e.b,c+=e.c}break;case":where":break;case":nth-child":case":nth-last-child":if(i+=1,s.nodes&&s.nodes.length>0){const n=s.nodes[0].nodes.findIndex((e=>"tag"===e.type&&"of"===e.value.toLowerCase()));if(n>-1){const o=[e.selector({nodes:s.nodes[0].nodes.slice(n+1),value:""})];s.nodes.length>1&&o.push(...s.nodes.slice(1));const a=specificityOfMostSpecificListItem(o);t+=a.a,i+=a.b,c+=a.c}}break;case":local":case":global":s.nodes&&s.nodes.length>0&&s.nodes.forEach((e=>{const s=selectorSpecificity(e);t+=s.a,i+=s.b,c+=s.c}));break;case":host":case":host-context":if(i+=1,s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,i+=e.b,c+=e.c}break;case":active-view-transition":case":active-view-transition-type":return{a:0,b:1,c:0}}else e.isContainer(s)&&s.nodes.length>0&&s.nodes.forEach((e=>{const s=selectorSpecificity(e);t+=s.a,i+=s.b,c+=s.c}));return{a:t,b:i,c:c}}function specificityOfMostSpecificListItem(e){let s={a:0,b:0,c:0};return e.forEach((e=>{const t=selectorSpecificity(e);t.a>s.a?s=t:t.a<s.a||(t.b>s.b?s=t:t.b<s.b||t.c>s.c&&(s=t))})),s}function isPseudoElement(s){return e.isPseudoElement(s)}function selectorNodeContainsNothingOrOnlyUniversal(e){if(!e)return!1;if(!e.nodes)return!1;const s=e.nodes.filter((e=>"comment"!==e.type));return 0===s.length||1===s.length&&"universal"===s[0].type}exports.compare=function compare(e,s){return e.a===s.a?e.b===s.b?e.c-s.c:e.b-s.b:e.a-s.a},exports.selectorSpecificity=selectorSpecificity;

packages/selector-specificity/dist/index.mjs

@@ -1 +1 @@
-import e from"postcss-selector-parser";function compare(e,s){return e.a===s.a?e.b===s.b?e.c-s.c:e.b-s.b:e.a-s.a}function selectorSpecificity(s){if(!s)return{a:0,b:0,c:0};let t=0,n=0,c=0;if("universal"==s.type)return{a:0,b:0,c:0};if("id"===s.type)t+=1;else if("tag"===s.type)c+=1;else if("class"===s.type)n+=1;else if("attribute"===s.type)n+=1;else if(isPseudoElement(s))switch(s.value.toLowerCase()){case"::slotted":if(c+=1,s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,n+=e.b,c+=e.c}break;case"::view-transition-group":case"::view-transition-image-pair":case"::view-transition-old":case"::view-transition-new":return s.nodes&&1===s.nodes.length&&"selector"===s.nodes[0].type&&selectorNodeContainsOnlyUniversal(s.nodes[0])?{a:0,b:0,c:0}:{a:0,b:0,c:1};default:c+=1}else if(e.isPseudoClass(s))switch(s.value.toLowerCase()){case":-webkit-any":case":any":default:n+=1;break;case":-moz-any":case":has":case":is":case":matches":case":not":if(s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,n+=e.b,c+=e.c}break;case":where":break;case":nth-child":case":nth-last-child":if(n+=1,s.nodes&&s.nodes.length>0){const i=s.nodes[0].nodes.findIndex((e=>"tag"===e.type&&"of"===e.value.toLowerCase()));if(i>-1){const o=[e.selector({nodes:s.nodes[0].nodes.slice(i+1),value:""})];s.nodes.length>1&&o.push(...s.nodes.slice(1));const a=specificityOfMostSpecificListItem(o);t+=a.a,n+=a.b,c+=a.c}}break;case":local":case":global":s.nodes&&s.nodes.length>0&&s.nodes.forEach((e=>{const s=selectorSpecificity(e);t+=s.a,n+=s.b,c+=s.c}));break;case":host":case":host-context":if(n+=1,s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,n+=e.b,c+=e.c}break;case":active-view-transition":return s.nodes&&1===s.nodes.length&&"selector"===s.nodes[0].type&&selectorNodeContainsOnlyUniversal(s.nodes[0])?{a:0,b:1,c:0}:{a:0,b:2,c:0}}else e.isContainer(s)&&s.nodes.length>0&&s.nodes.forEach((e=>{const s=selectorSpecificity(e);t+=s.a,n+=s.b,c+=s.c}));return{a:t,b:n,c:c}}function specificityOfMostSpecificListItem(e){let s={a:0,b:0,c:0};return e.forEach((e=>{const t=selectorSpecificity(e);t.a>s.a?s=t:t.a<s.a||(t.b>s.b?s=t:t.b<s.b||t.c>s.c&&(s=t))})),s}function isPseudoElement(s){return e.isPseudoElement(s)}function selectorNodeContainsOnlyUniversal(e){if(!e)return!1;if(!e.nodes)return!1;const s=e.nodes.filter((e=>"comment"!==e.type));return 1===s.length&&"universal"===s[0].type}export{compare,selectorSpecificity};
+import e from"postcss-selector-parser";function compare(e,s){return e.a===s.a?e.b===s.b?e.c-s.c:e.b-s.b:e.a-s.a}function selectorSpecificity(s){if(!s)return{a:0,b:0,c:0};let t=0,i=0,c=0;if("universal"==s.type)return{a:0,b:0,c:0};if("id"===s.type)t+=1;else if("tag"===s.type)c+=1;else if("class"===s.type)i+=1;else if("attribute"===s.type)i+=1;else if(isPseudoElement(s))switch(s.value.toLowerCase()){case"::slotted":if(c+=1,s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,i+=e.b,c+=e.c}break;case"::view-transition-group":case"::view-transition-image-pair":case"::view-transition-old":case"::view-transition-new":return s.nodes&&1===s.nodes.length&&"selector"===s.nodes[0].type&&selectorNodeContainsNothingOrOnlyUniversal(s.nodes[0])?{a:0,b:0,c:0}:{a:0,b:0,c:1};default:c+=1}else if(e.isPseudoClass(s))switch(s.value.toLowerCase()){case":-webkit-any":case":any":default:i+=1;break;case":-moz-any":case":has":case":is":case":matches":case":not":if(s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,i+=e.b,c+=e.c}break;case":where":break;case":nth-child":case":nth-last-child":if(i+=1,s.nodes&&s.nodes.length>0){const n=s.nodes[0].nodes.findIndex((e=>"tag"===e.type&&"of"===e.value.toLowerCase()));if(n>-1){const o=[e.selector({nodes:s.nodes[0].nodes.slice(n+1),value:""})];s.nodes.length>1&&o.push(...s.nodes.slice(1));const a=specificityOfMostSpecificListItem(o);t+=a.a,i+=a.b,c+=a.c}}break;case":local":case":global":s.nodes&&s.nodes.length>0&&s.nodes.forEach((e=>{const s=selectorSpecificity(e);t+=s.a,i+=s.b,c+=s.c}));break;case":host":case":host-context":if(i+=1,s.nodes&&s.nodes.length>0){const e=specificityOfMostSpecificListItem(s.nodes);t+=e.a,i+=e.b,c+=e.c}break;case":active-view-transition":case":active-view-transition-type":return{a:0,b:1,c:0}}else e.isContainer(s)&&s.nodes.length>0&&s.nodes.forEach((e=>{const s=selectorSpecificity(e);t+=s.a,i+=s.b,c+=s.c}));return{a:t,b:i,c:c}}function specificityOfMostSpecificListItem(e){let s={a:0,b:0,c:0};return e.forEach((e=>{const t=selectorSpecificity(e);t.a>s.a?s=t:t.a<s.a||(t.b>s.b?s=t:t.b<s.b||t.c>s.c&&(s=t))})),s}function isPseudoElement(s){return e.isPseudoElement(s)}function selectorNodeContainsNothingOrOnlyUniversal(e){if(!e)return!1;if(!e.nodes)return!1;const s=e.nodes.filter((e=>"comment"!==e.type));return 0===s.length||1===s.length&&"universal"===s[0].type}export{compare,selectorSpecificity};

packages/selector-specificity/src/index.ts

@@ -82,7 +82,7 @@ export function selectorSpecificity(node: Node): Specificity {
 					node.nodes &&
 					node.nodes.length === 1 &&
 					node.nodes[0].type === 'selector' &&
-					selectorNodeContainsOnlyUniversal(node.nodes[0])
+					selectorNodeContainsNothingOrOnlyUniversal(node.nodes[0])
 				) {
 					return {
 						a: 0,
@@ -206,26 +206,18 @@ export function selectorSpecificity(node: Node): Specificity {
 				}
 
 				break;
-
 			case ':active-view-transition':
 				// see : https://drafts.csswg.org/css-view-transitions-2/#the-active-view-transition-pseudo
-
-				if (
-					node.nodes &&
-							node.nodes.length === 1 &&
-							node.nodes[0].type === 'selector' &&
-							selectorNodeContainsOnlyUniversal(node.nodes[0])
-				) {
-					return {
-						a: 0,
-						b: 1,
-						c: 0,
-					};
-				}
-
 				return {
 					a: 0,
-					b: 2,
+					b: 1,
+					c: 0,
+				};
+			case ':active-view-transition-type':
+				// see : https://drafts.csswg.org/css-view-transitions-2/#the-active-view-transition-type-pseudo
+				return {
+					a: 0,
+					b: 1,
 					c: 0,
 				};
 
@@ -286,7 +278,7 @@ function isPseudoElement(node: Node): boolean {
 	return parser.isPseudoElement(node);
 }
 
-function selectorNodeContainsOnlyUniversal(node: Selector): boolean {
+function selectorNodeContainsNothingOrOnlyUniversal(node: Selector): boolean {
 	if (!node) {
 		return false;
 	}
@@ -299,6 +291,10 @@ function selectorNodeContainsOnlyUniversal(node: Selector): boolean {
 		return x.type !== 'comment';
 	});
 
+	if (relevantNodes.length === 0) {
+		return true;
+	}
+
 	if (relevantNodes.length !== 1) {
 		return false;
 	}

packages/selector-specificity/test/test.mjs

@@ -106,6 +106,7 @@ assert.deepEqual(calculate(':is(#a + #a + #a, #b + #b + #b.b)'), { a: 3, b: 1, c
 
 assert.deepEqual(calculate('::view-transition'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-group(foo)'), { a: 0, b: 0, c: 1 });
+assert.deepEqual(calculate('::view-transition-group()'), { a: 0, b: 0, c: 0 });
 assert.deepEqual(calculate('::view-transition-group(*)'), { a: 0, b: 0, c: 0 });
 assert.deepEqual(calculate('::view-transition-group(*.foo)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-group(foo.foo)'), { a: 0, b: 0, c: 1 });
@@ -120,28 +121,34 @@ assert.deepEqual(calculate('::view-transition-image-pair(.foo.fooz)'), { a: 0, b
 assert.deepEqual(calculate('::view-transition-image-pair(foo.foo.fooz)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-image-pair(*.foo.fooz)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-old(foo)'), { a: 0, b: 0, c: 1 });
+assert.deepEqual(calculate('::view-transition-old()'), { a: 0, b: 0, c: 0 });
 assert.deepEqual(calculate('::view-transition-old(*)'), { a: 0, b: 0, c: 0 });
 assert.deepEqual(calculate('::view-transition-old(*.foo)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-old(foo.foo)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-old(.foo.fooz)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-old(foo.foo.fooz)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-old(*.foo.fooz)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-new(foo)'), { a: 0, b: 0, c: 1 });
+assert.deepEqual(calculate('::view-transition-new()'), { a: 0, b: 0, c: 0 });
 assert.deepEqual(calculate('::view-transition-new(*)'), { a: 0, b: 0, c: 0 });
 assert.deepEqual(calculate('::view-transition-new(*.foo)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-new(foo.foo)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-new(.foo.fooz)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-new(foo.foo.fooz)'), { a: 0, b: 0, c: 1 });
 assert.deepEqual(calculate('::view-transition-new(*.foo.fooz)'), { a: 0, b: 0, c: 1 });
 
-assert.deepEqual(calculate(':active-view-transition(*)'), { a: 0, b: 1, c: 0 });
-assert.deepEqual(calculate(':active-view-transition(foo)'), { a: 0, b: 2, c: 0 });
-assert.deepEqual(calculate(':active-view-transition(.foo)'), { a: 0, b: 2, c: 0 });
-assert.deepEqual(calculate(':active-view-transition(.foo.bar)'), { a: 0, b: 2, c: 0 });
-assert.deepEqual(calculate(':active-view-transition(.foo .bar)'), { a: 0, b: 2, c: 0 });
-assert.deepEqual(calculate(':active-view-transition(foo, bar)'), { a: 0, b: 2, c: 0 });
+assert.deepEqual(calculate(':active-view-transition'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition-type(foo)'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition-type(.foo)'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition-type(.foo.bar)'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition-type(.foo .bar)'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition-type(foo, bar)'), { a: 0, b: 1, c: 0 });
 
-// Invalid CSS, must be either `*` or a list of one or more custom idents
+// Invalid CSS.
 // We should still calculate some specificity.
-assert.deepEqual(calculate(':active-view-transition(*, bar)'), { a: 0, b: 2, c: 0 });
-assert.deepEqual(calculate(':active-view-transition(*, *)'), { a: 0, b: 2, c: 0 });
+assert.deepEqual(calculate(':active-view-transition(*)'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition(*, bar)'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition(*, *)'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition-type(*)'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition-type(*, bar)'), { a: 0, b: 1, c: 0 });
+assert.deepEqual(calculate(':active-view-transition-type(*, *)'), { a: 0, b: 1, c: 0 });