Allow :where() selector in options

Author: m-e-h

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Editor Styles
 
+### 0.5.0 (March 7, 2024)
+
+- Allow using `:where()` pseudo class in options to account for every `:where(*)` selectors.
+
 ### 0.4.0 (March 7, 2024)
 
 - Fixed a bug where some tags weren't getting scoped ([#5](https://github.com/m-e-h/postcss-editor-styles/pull/5)) thanks to @animeshk874

index.js

@@ -39,13 +39,33 @@ module.exports = (options = {}) => {
 
 	const opts = { ...defaults, ...options };
 
+	// Detect if there is a :where() pseudo class in the selectors.
+	const hasWherePseudo = (optionsVal, selectors) => {
+		let optionHasWhere = false;
+
+		if (typeof optionsVal === 'string') {
+			optionHasWhere = ':where()' === optionsVal;
+		} else if (Array.isArray(optionsVal)) {
+			optionHasWhere = optionsVal.find((el) => el === ':where()');
+		}
+
+		if (!optionHasWhere) {
+			return false;
+		}
+
+		return selectors.find((el) => el.startsWith(':where('));
+	}
+
 	const firstOrLastSelector = (optsArray, selectorArray) => {
 		let firstSelector = selectorArray[0];
 		let lastSelector = selectorArray[selectorArray.length - 1];
+		const whereMatch = hasWherePseudo(optsArray, [firstSelector, lastSelector]);
 
 		var selectorIn = [];
 
-		if (-1 !== optsArray.indexOf(firstSelector)) {
+		if(whereMatch) {
+			selectorIn.push(whereMatch);
+		} else if (-1 !== optsArray.indexOf(firstSelector)) {
 			selectorIn.push(firstSelector);
 		} else if (-1 !== optsArray.indexOf(lastSelector)) {
 			selectorIn.push(lastSelector);

test/_tape.js

@@ -3,7 +3,10 @@ const plugin = require('../index.js');
 
 postcssTape(plugin)({
 	basic: {
-		message: 'supports basic usage'
+		message: 'supports basic usage',
+		options: {
+			ignore: [':root', ':where()'],
+		}
 	},
 	remove: {
 		message: 'supports remove usage'

test/basic.css

@@ -1,3 +1,7 @@
+:where(.wp-site-blocks) li {
+	border-bottom: 1px solid #e1e4e8;
+}
+
 :root {
     --color-text: #24292e;
 }

test/basic.expect.css

@@ -1,3 +1,7 @@
+:where(.wp-site-blocks) li {
+	border-bottom: 1px solid #e1e4e8;
+}
+
 :root {
     --color-text: #24292e;
 }