Update dependency specificity to v1

package.json

@@ -55,7 +55,7 @@
 		"react-dom": "^18.2.0",
 		"react-toastify": "^9.1.2",
 		"requestidlecallback-polyfill": "^1.0.2",
-		"specificity": "^0.4.1",
+		"specificity": "^1.0.0",
 		"tippy.js": "^6.3.7",
 		"webextension-polyfill": "^0.12.0",
 		"zod": "^3.22.4"

src/common/selectorUtils.ts

@@ -1,12 +1,9 @@
-import { calculate } from "specificity";
+import { calculate, calculateWithDetails } from "specificity";
 
 export function getSpecificityValue(selector: string) {
-	const { specificityArray } = calculate(selector)[0]!;
+	const specificity = calculate(selector);
 
-	return (specificityArray as number[]).reduce(
-		(accumulator, current, index, array) =>
-			accumulator + current * 10 ** (array.length - index - 1)
-	);
+	return specificity.A * 100 + specificity.B * 10 + specificity.C;
 }
 
 /**
@@ -29,7 +26,10 @@ export function isValidSelector(selector: string) {
 	return true;
 }
 
-export function selectorToArray(selector: string) {
-	const specificity = calculate(selector);
-	return specificity[0]!.parts.map((part) => part.selector);
+export function getSelectorParts(selector: string) {
+	const oneLiner = selector.replace("\n", " ");
+
+	return calculateWithDetails(oneLiner).contributingParts.map((part) =>
+		oneLiner.slice(part.start.column - 1, part.end.column - 1)
+	);
 }

src/content/hints/computeCustomSelectors.ts

@@ -4,7 +4,7 @@ import { generatePossibleSelectors } from "../utils/generatePossibleSelectors";
 import {
 	getSpecificityValue,
 	isValidSelector,
-	selectorToArray,
+	getSelectorParts,
 } from "../../common/selectorUtils";
 import { type SelectorAlternative } from "../../typings/SelectorAlternative";
 
@@ -125,7 +125,7 @@ function getCommonSelectors(targets: Element[]) {
 	let commonTargetSelectors: string[] | undefined;
 
 	for (const selector of targetSelectors) {
-		const parts = selectorToArray(selector);
+		const parts = getSelectorParts(selector);
 		commonTargetSelectors = commonTargetSelectors
 			? intersect(commonTargetSelectors, parts)
 			: parts;

src/content/utils/generatePossibleSelectors.ts

@@ -1,5 +1,5 @@
 import combinations from "combinations";
-import { calculate } from "specificity";
+import { getSelectorParts } from "../../common/selectorUtils";
 import { combineArrays } from "./combineArrays";
 
 /**
@@ -38,15 +38,14 @@ export function generatePossibleSelectors(
 	// We need to reverse the selectors because we want to keep the selector parts
 	// closest to the target
 	for (const selector of [...selectors].reverse()) {
-		const parts = calculate(selector)[0]!.parts;
-		const selectorParts = parts.map((part) => part.selector);
+		const parts = getSelectorParts(selector);
 
 		// If the selector is just the tag we included it
-		if (selectorParts.length === 1) {
-			selectorsTrimmed.unshift(selectorParts[0]!);
+		if (parts.length === 1) {
+			selectorsTrimmed.unshift(parts[0]!);
 		} else {
 			let filteredSelector = "";
-			for (const part of selectorParts) {
+			for (const part of parts) {
 				if (/^[.:]/.test(part) && classesAdded < maxClasses) {
 					classesAdded++;
 					filteredSelector += part;
@@ -55,7 +54,7 @@ export function generatePossibleSelectors(
 
 			if (filteredSelector) {
 				// We always include the tag
-				filteredSelector = selectorParts[0]! + filteredSelector;
+				filteredSelector = parts[0]! + filteredSelector;
 				selectorsTrimmed.unshift(filteredSelector);
 			}
 		}
@@ -92,20 +91,19 @@ export function generatePossibleSelectors(
 		// (value that we get from selectorCombined)
 		const selectorListCombined: string[][] = [];
 		for (const [index, selector] of selectorList.entries()) {
-			const parts = calculate(selector)[0]!.parts;
-			const selectors = parts.map((part) => part.selector);
+			const parts = getSelectorParts(selector);
 
 			let selectorCombined: string[];
 
 			// This will be true for the target selector. For this one we also want to
 			// include the tag by itself, so that we get selectors like ".media a"
 			if (index === selectorList.length - 1) {
-				selectorCombined = combinations(selectors).map((selectors) =>
+				selectorCombined = combinations(parts).map((selectors) =>
 					selectors.join("")
 				);
 			} else {
-				const tagName = selectors.shift();
-				selectorCombined = combinations(selectors).map(
+				const tagName = parts.shift();
+				selectorCombined = combinations(parts).map(
 					(selectors) => `${tagName!}${selectors.join("")}`
 				);
 			}