Improve generation of nth elements

Author: Gigabyte5671

src/Generator.ts

@@ -2,7 +2,8 @@ type Combinator = '>' | '~' | '+';
 
 interface Options {
 	duplicates?: 'preserve' | 'remove';
-	fill?: 'fill' | 'no-fill'
+	fill?: 'fill' | 'no-fill';
+	mergeNth?: 'merge' | 'no-merge'
 }
 
 /**
@@ -21,6 +22,20 @@ export function cssToHtml(css: CSSRuleList | string, options: Options = {}): HTM
 		}
 		return false;
 	}
+	function mergeElements <T extends HTMLElement | Element> (mergeFrom: HTMLElement | Element, mergeTo: T): T | null {
+		if (mergeFrom.tagName !== mergeTo.tagName) {
+			return null;
+		}
+		if (mergeFrom.id && mergeTo.id && mergeFrom.id !== mergeTo.id) {
+			return null;
+		}
+		if (mergeFrom.id) {
+			mergeTo.id = mergeFrom.id;
+		}
+		mergeTo.className += ' ' + mergeFrom.className;
+		mergeTo.className = mergeTo.className.trim();
+		return mergeTo;
+	}
 	let styleRules: CSSRuleList | undefined;
 
 	// Parse the CSS string into a CSSOM.
@@ -202,20 +217,38 @@ export function cssToHtml(css: CSSRuleList | string, options: Options = {}): HTM
 			descriptor.previousElement = newElement;
 
 			if (fillType === 'first') {
-				parentElement.prepend(newElement);
+				// Check if there is a sibling element in the desired position.
+				const blockingSibling = parentElement.querySelector(childType === 'type' ? `${newElement.tagName}:first-of-type` : '*:first-child');
+				if (blockingSibling) {
+					parentElement.insertBefore(newElement, blockingSibling);
+					if (isFillerElement(blockingSibling) || (options.mergeNth !== 'no-merge' && mergeElements(blockingSibling, newElement))) {
+						blockingSibling.remove();
+					}
+				} else {
+					parentElement.prepend(newElement);
+				}
 				return;
 			}
 
 			if (fillType === 'last') {
-				parentElement.append(newElement);
+				// Check if there is a sibling element in the desired position.
+				const blockingSibling = parentElement.querySelector(childType === 'type' ? `${newElement.tagName}:last-of-type` : `${newElement.tagName}:last-child`);
+				if (blockingSibling) {
+					parentElement.insertBefore(newElement, blockingSibling.nextElementSibling);
+					if (isFillerElement(blockingSibling) || (options.mergeNth !== 'no-merge' && mergeElements(blockingSibling, newElement))) {
+						blockingSibling.remove();
+					}
+				} else {
+					parentElement.append(newElement);
+				}
 				return;
 			}
 
 			// Check if there is a sibling element in the desired position.
 			const blockingSibling = parentElement.querySelector(childType === 'type' ? `${newElement.tagName}:nth-of-type(${fillAmount})` : `:nth-child(${fillAmount})`);
 			if (blockingSibling) {
 				parentElement.insertBefore(newElement, blockingSibling);
-				if (isFillerElement(blockingSibling)) {
+				if (isFillerElement(blockingSibling) || (options.mergeNth !== 'no-merge' && mergeElements(blockingSibling, newElement))) {
 					blockingSibling.remove();
 				}
 				return;

tests/nth-child.spec.ts

@@ -0,0 +1,38 @@
+/*
+ * Verify that nth-child selectors will be handled correctly.
+ */
+
+import { test, expect } from '@playwright/test';
+import { cssToHtml } from '../src/index';
+
+const css = `
+span:nth-child(10) {
+	color: red;
+}
+div.first:first-child {
+	content: 'a';
+}
+span.last:last-child {
+	content: 'b';
+}
+span:last-child {
+	content: 'c';
+}
+`;
+
+test('Nth-Child', async ({ page }) => {
+	await page.addScriptTag({ path: './tests/GeneratorScript.js' });
+
+	const result = await page.evaluate(async (css) => {
+		document.body = cssToHtml(css);
+
+		return document.body.querySelectorAll('*').length === 10
+			&& document.body.querySelector('div.first')?.previousElementSibling === null
+			&& document.body.querySelector('div.first')?.innerHTML === 'a'
+			&& document.body.querySelector('span.last')?.nextElementSibling === null
+			&& document.body.querySelector('span.last')?.innerHTML === 'c';
+	}, css);
+
+	expect(result).toBeDefined();
+	expect(result).toBe(true);
+});