Selectors: Add support for comma-separated selector lists in pseudo-classes.

Author: ryelle

src/__tests__/selectors.js

@@ -63,4 +63,18 @@ describe( 'Audit: Selectors', () => {
 		const { value } = results.find( ( { id } ) => 'count' === id );
 		expect( value ).toBe( 2 );
 	} );
+
+	it( 'should handle modern CSS', () => {
+		expect( () => {
+			audit( [
+				{
+					name: 'a.css',
+					content: `h1, h2 { color: green; }
+					div:not([hidden]) { color: black; }
+					body :is(h1, h2) { color: red; }
+					body :where(h1, h2) { color: orange; }`,
+				},
+			] );
+		} ).not.toThrow( SyntaxError );
+	} );
 } );

src/audits/selectors.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+const csstree = require( 'css-tree' );
 const { parse } = require( 'postcss' );
 
 const { getSpecificityArray } = require( '../utils/get-specificity' );
@@ -12,10 +13,11 @@ module.exports = function ( files = [] ) {
 	files.forEach( ( { name, content } ) => {
 		const root = parse( content, { from: name } );
 		root.walkRules( function ( { selector } ) {
-			const selectorList = selector.split( ',' );
-			selectorList.forEach( ( selectorName ) => {
-				// Remove excess whitespace from selectors.
-				selectorName = selectorName.replace( /\s+/g, ' ' ).trim();
+			const selectorList = csstree.parse( selector, {
+				context: 'selectorList',
+			} );
+			selectorList.children.forEach( ( _selector ) => {
+				const selectorName = csstree.generate( _selector );
 				const [ a, b, c ] = getSpecificityArray( selectorName );
 				const sum = 100 * a + 10 * b + c; // eslint-disable-line no-mixed-operators
 				selectors.push( {

src/utils/__tests__/get-specificity.js

@@ -14,6 +14,8 @@ describe( 'Calculate Specificity', () => {
 	it( 'should calculate for pseudo-classes', () => {
 		expect( getSpecificity( ':checked' ) ).toBe( 10 );
 		expect( getSpecificity( 'a:link' ) ).toBe( 11 );
+		expect( getSpecificity( 'body:lang(en)' ) ).toBe( 11 );
+		expect( getSpecificity( 'body:lang(en,ja)' ) ).toBe( 11 );
 	} );
 
 	it( 'should calculate for class selectors', () => {
@@ -36,4 +38,25 @@ describe( 'Calculate Specificity', () => {
 			getSpecificity( 'li > a[href*="en-US"] > .inline-warning' )
 		).toBe( 22 );
 	} );
+
+	it( 'should calculate for :is selectors', () => {
+		expect( getSpecificity( ':is(h1)' ) ).toBe( 1 );
+		expect( getSpecificity( ':is(h1, .class)' ) ).toBe( 10 );
+		expect( getSpecificity( ':is(h1, .class, #id)' ) ).toBe( 100 );
+		expect( getSpecificity( 'span:is(h1)' ) ).toBe( 2 );
+	} );
+
+	it( 'should calculate for :where selectors', () => {
+		expect( getSpecificity( ':where(h1)' ) ).toBe( 0 );
+		expect( getSpecificity( ':where(h1, .class)' ) ).toBe( 0 );
+		expect( getSpecificity( ':where(h1, .class, #id)' ) ).toBe( 0 );
+		expect( getSpecificity( 'span:where(h1)' ) ).toBe( 1 );
+	} );
+
+	it( 'should calculate for :not selectors', () => {
+		expect( getSpecificity( ':not(h1)' ) ).toBe( 1 );
+		expect( getSpecificity( ':not(h1, .class)' ) ).toBe( 10 );
+		expect( getSpecificity( ':not(h1, .class, #id)' ) ).toBe( 100 );
+		expect( getSpecificity( 'span:not(h1)' ) ).toBe( 2 );
+	} );
 } );

src/utils/get-specificity.js

@@ -14,10 +14,28 @@ function calculateSpecificity( [ a, b, c ], selector ) {
 	if ( ! selector.type ) {
 		return;
 	}
-	if ( 'lang' !== selector.name && selector.children ) {
-		return selector.children
-			.toArray()
-			.reduce( calculateSpecificity, [ a, b, c ] );
+
+	if ( 'PseudoClassSelector' === selector.type && 'lang' !== selector.name ) {
+		if ( 'where' === selector.name ) {
+			return [ a, b, c ];
+		}
+		if ( selector.children ) {
+			let maxSpec = [ 0, 0, 0 ];
+			let max = -1;
+			selector.children.forEach( ( list ) => {
+				if ( 'SelectorList' === list.type ) {
+					list.children.forEach( ( s ) => {
+						const _selector = csstree.generate( s );
+						const result = getSpecificity( _selector );
+						if ( result > max ) {
+							maxSpec = getSpecificityArray( _selector );
+							max = result;
+						}
+					} );
+				}
+			} );
+			return [ a + maxSpec[ 0 ], b + maxSpec[ 1 ], c + maxSpec[ 2 ] ];
+		}
 	}
 
 	switch ( selector.type ) {
@@ -65,11 +83,10 @@ function calculateSpecificity( [ a, b, c ], selector ) {
 function getSpecificity( selector ) {
 	const node = csstree.parse( selector, { context: 'selector' } );
 	const selectorList = node.children.toArray();
-	const [ a, b, c ] = selectorList.reduce( calculateSpecificity, [
-		0,
-		0,
-		0,
-	] );
+	const [ a, b, c ] = selectorList.reduce(
+		calculateSpecificity,
+		[ 0, 0, 0 ]
+	);
 	return 100 * a + 10 * b + c;
 }
 
@@ -82,11 +99,10 @@ function getSpecificity( selector ) {
 function getSpecificityArray( selector ) {
 	const node = csstree.parse( selector, { context: 'selector' } );
 	const selectorList = node.children.toArray();
-	const [ a, b, c ] = selectorList.reduce( calculateSpecificity, [
-		0,
-		0,
-		0,
-	] );
+	const [ a, b, c ] = selectorList.reduce(
+		calculateSpecificity,
+		[ 0, 0, 0 ]
+	);
 	return [ a, b, c ];
 }