any-link : improve fallbacks for area (#364)

Author: romainmenke

cli/csstools-cli/src/plugins/postcss-preset-env.ts

@@ -10,6 +10,7 @@ export default function postcssPresetEnv() {
 			'features',
 			'browsers',
 			'autoprefixer',
+			'preserve',
 			'importFrom',
 			'exportTo',
 			'enableClientSidePolyfills',

plugins/postcss-pseudo-class-any-link/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changes to PostCSS Pseudo Class Any Link
 
+### Unreleased
+
+- Improve handling of `<area>` fallbacks for IE and Edge.
+
+```diff
+a:any-link {
+	text-decoration: none;
+}
+
+/* becomes */
+
+- a:link, a:visited, aarea[href] {
++ a:link, a:visited {
+	text-decoration: none;
+}
+```
+
 ### 7.1.2 (April 4, 2022)
 
 - Improved : compound selector order with pseudo elements

plugins/postcss-pseudo-class-any-link/src/replace-any-link.js

@@ -4,6 +4,7 @@ import { sortCompoundSelectorsInsideComplexSelector } from './compound-selector-
 const linkAST = parser().astSync(':link').nodes[0];
 const visitedAST = parser().astSync(':visited').nodes[0];
 const areaHrefAST = parser().astSync('area[href]').nodes[0];
+const hrefAST = parser().astSync('[href]').nodes[0];
 
 export function replaceAnyLink(rule, result, preserve, areaHrefNeedsFixing) {
 	let updatedSelectors = [];
@@ -53,26 +54,33 @@ function modifiedSelector(selector, areaHrefNeedsFixing) {
 
 	// update the selector
 	parser((selectorsAST) => {
-		let anyLinkCount = 0;
+		let replacements = [];
 		selectorsAST.walkPseudos((pseudo) => {
 			if (pseudo.value !== ':any-link' || (pseudo.nodes && pseudo.nodes.length)) {
 				return;
 			}
 
-			anyLinkCount++;
-		});
+			if (!areaHrefNeedsFixing) {
+				replacements.push([linkAST.clone(), visitedAST.clone()]);
+				return;
+			}
 
-		if (!anyLinkCount) {
-			return;
-		}
+			const tags = getTagElementsNextToPseudo(pseudo);
+			if (tags.includes('area')) {
+				replacements.push([linkAST.clone(), visitedAST.clone(), hrefAST.clone()]);
+				return;
+			}
 
-		let replacements = [];
-		for (let i = 0; i < anyLinkCount; i++) {
-			if (areaHrefNeedsFixing) {
-				replacements.push([linkAST.clone(), visitedAST.clone(), areaHrefAST.clone()]);
-			} else {
+			if (tags.length) {
 				replacements.push([linkAST.clone(), visitedAST.clone()]);
+				return;
 			}
+
+			replacements.push([linkAST.clone(), visitedAST.clone(), areaHrefAST.clone()]);
+		});
+
+		if (!replacements.length) {
+			return;
 		}
 
 		let replacementsCartesianProduct = cartesianProduct(...replacements);
@@ -121,3 +129,35 @@ function cartesianProduct(...args) {
 	helper([], 0);
 	return r;
 }
+
+function getTagElementsNextToPseudo(pseudo) {
+	let tags = [];
+
+	let prev = pseudo.prev();
+	while (prev) {
+		if (prev.type === 'combinator') {
+			break;
+		}
+
+		if (prev.type === 'tag') {
+			tags.push(prev.value);
+		}
+
+		prev = prev.prev();
+	}
+
+	let next = pseudo.next();
+	while (next) {
+		if (next.type === 'combinator') {
+			break;
+		}
+
+		if (next.type === 'tag') {
+			tags.push(next.value);
+		}
+
+		next = next.next();
+	}
+
+	return tags;
+}

plugins/postcss-pseudo-class-any-link/test/basic.css

@@ -30,3 +30,23 @@ ul a:any-link > span {
 ::before:any-link {
 	order: 8;
 }
+
+a:any-link {
+	order: 9;
+}
+
+area:any-link {
+	order: 10;
+}
+
+area :any-link {
+	order: 11;
+}
+
+area > :any-link {
+	order: 12;
+}
+
+div:any-link {
+	order: 13;
+}

plugins/postcss-pseudo-class-any-link/test/basic.expect.css

@@ -61,3 +61,43 @@ ul a:any-link > span {
 ::before:any-link {
 	order: 8;
 }
+
+a:link, a:visited {
+	order: 9;
+}
+
+a:any-link {
+	order: 9;
+}
+
+area:link, area:visited {
+	order: 10;
+}
+
+area:any-link {
+	order: 10;
+}
+
+area :link, area :visited {
+	order: 11;
+}
+
+area :any-link {
+	order: 11;
+}
+
+area > :link, area > :visited {
+	order: 12;
+}
+
+area > :any-link {
+	order: 12;
+}
+
+div:link, div:visited {
+	order: 13;
+}
+
+div:any-link {
+	order: 13;
+}

plugins/postcss-pseudo-class-any-link/test/basic.preserve-false.expect.css

@@ -32,3 +32,23 @@ ul a:visited > span {
 :link::before, :visited::before {
 	order: 8;
 }
+
+a:link, a:visited {
+	order: 9;
+}
+
+area:link, area:visited {
+	order: 10;
+}
+
+area :link, area :visited {
+	order: 11;
+}
+
+area > :link, area > :visited {
+	order: 12;
+}
+
+div:link, div:visited {
+	order: 13;
+}

plugins/postcss-pseudo-class-any-link/test/basic.sub-features-area-href.expect.css

@@ -10,8 +10,7 @@
 :visited,
 area[href],
 ul a:link > span,
-ul a:visited > span,
-ul aarea[href] > span {
+ul a:visited > span {
 	order: 2;
 }
 
@@ -63,3 +62,43 @@ ul a:any-link > span {
 ::before:any-link {
 	order: 8;
 }
+
+a:link, a:visited {
+	order: 9;
+}
+
+a:any-link {
+	order: 9;
+}
+
+area:link, area:visited, area[href] {
+	order: 10;
+}
+
+area:any-link {
+	order: 10;
+}
+
+area :link, area :visited, area area[href] {
+	order: 11;
+}
+
+area :any-link {
+	order: 11;
+}
+
+area > :link, area > :visited, area > area[href] {
+	order: 12;
+}
+
+area > :any-link {
+	order: 12;
+}
+
+div:link, div:visited {
+	order: 13;
+}
+
+div:any-link {
+	order: 13;
+}

plugins/postcss-pseudo-class-any-link/test/generated-selector-cases.sub-features-area-href.expect.css

@@ -78,7 +78,7 @@
 	order: 19;
 }
 
-button:link, button:visited, buttonarea[href] {
+button:link, button:visited {
 	order: 20;
 }
 
@@ -430,7 +430,7 @@ button {
 	order: 99;
 }
 
-__foo:link, __foo:visited, __fooarea[href] {
+__foo:link, __foo:visited {
 	order: 100;
 }
 
@@ -978,7 +978,7 @@ foo[baz=":any-link"] {
 	order: 224;
 }
 
-__:link, __:visited, __area[href] {
+__:link, __:visited {
 	order: 225;
 }