Add support for nth selectors

- Add support for:
  - `:first-child`
  - `:nth-child`
  - `:last-child`
  - `:first-of-type`
  - `:nth-of-type`
  - `:last-of-type`
- Add `fill` option.

Author: Gigabyte5671

README.md

@@ -62,9 +62,11 @@ Output:
 
 ## Options
 
-An options object can be passed as the second argument to `cssToHtml()` to customize the behaviour of the HTML generator.
+An options object can be passed as the second argument to `cssToHtml()` to customize the behaviour of the HTML generator. _(Values marked with * are default)._
 
 | Option       | Values     | Description |
 | :----------- | :--------- | :---------- |
 | `duplicates` | `preserve` | Preserve duplicate elements. Eg: <br/> `button {} button {}` <br/> Will become: <br/> `<button></button><button></button>`. |
-|              | `remove`   | Remove duplicate elements. Eg: <br/> `button {} button {}` <br/> Will become: <br/> `<button></button>`. |
+|              | `remove` * | Remove duplicate elements. Eg: <br/> `button {} button {}` <br/> Will become: <br/> `<button></button>`. |
+| `fill`       | `fill`   * | Fill the DOM with duplicate elements up to the desired level. Eg: <br/> `span#fourth:nth-child(4) {}` <br/> Will become: <br/> `<span></span><span></span><span></span><span id="fourth"></span>`. |
+|              | `no-fill`  | Don't fill. Eg: <br/> `span#fourth:nth-child(4) {}` <br/> Will become: <br/> `<span></span>`. |

src/Generator.ts

@@ -2,6 +2,7 @@ type Combinator = '>' | '~' | '+';
 
 interface Options {
 	duplicates?: 'preserve' | 'remove';
+	fill?: 'fill' | 'no-fill'
 }
 
 /**
@@ -11,7 +12,17 @@ interface Options {
  */
 export function cssToHtml(css: CSSRuleList | string, options: Options = {}): HTMLBodyElement {
 	const output = document.createElement('body');
+	const fillerElements = [] as HTMLElement[];
+	function isFillerElement (element: HTMLElement | Element): boolean {
+		for (const element of fillerElements) {
+			if (element.isSameNode(element)) {
+				return true;
+			}
+		}
+		return false;
+	}
 	let styleRules: CSSRuleList | undefined;
+
 	// Parse the CSS string into a CSSOM.
 	if (typeof css === 'string') {
 		const styleDocument = document.implementation.createHTMLDocument();
@@ -30,13 +41,20 @@ export function cssToHtml(css: CSSRuleList | string, options: Options = {}): HTM
 	// Convert each rule into an HTML element, then add it to the output DOM.
 	for (const [index, rule] of Object.entries(styleRules) as [string, (CSSStyleRule | CSSMediaRule)][]) {
 		// Skip:
-		// - Media rules.
-		// - Rules including `:`.
-		// - Rules including with `*`.
+		// - Non-style rules.
+		// - Rules including `*`.
+		// - Rules including `:` (that aren't `nth-child` or `nth-of-type`).
 		if (
-			|| rule.selectorText.includes(':')
 			!(rule instanceof CSSStyleRule)
 			|| rule.selectorText.includes('*')
+			|| (rule.selectorText.includes(':')
+				&& !rule.selectorText.includes(':first-child')
+				&& !rule.selectorText.includes(':nth-child')
+				&& !rule.selectorText.includes(':last-child')
+				&& !rule.selectorText.includes(':first-of-type')
+				&& !rule.selectorText.includes(':nth-of-type')
+				&& !rule.selectorText.includes(':last-of-type')
+			)
 		) {
 			continue;
 		}
@@ -56,6 +74,10 @@ export function cssToHtml(css: CSSRuleList | string, options: Options = {}): HTM
 			classes: [''],
 			id: '',
 			tag: '',
+			position: {
+				type: '' as 'child' | 'type',
+				index: 0
+			},
 			add: (character: string): void => {
 				if (!descriptor.addressCharacter) {
 					descriptor.tag += character;
@@ -135,14 +157,98 @@ export function cssToHtml(css: CSSRuleList | string, options: Options = {}): HTM
 			descriptor.previousElement = newElement;
 		}
 
+		function addElementToOutputWithFill (childType: 'child' | 'type', fillType: 'first' | 'nth' | 'last', fillAmount: number): void {
+			const desiredIndex = fillAmount - 1;
+
+			// Create the new element.
+			const newElement = document.createElement(descriptor.tag || 'div');
+			// Add the classes.
+			for (const c of descriptor.classes) {
+				(c && newElement.classList.add(c));
+			}
+			// Add the ID.
+			if (descriptor.id) {
+				newElement.id = descriptor.id;
+			}
+
+			// Get a reference to the parent element.
+			let parentElement = undefined as HTMLElement | undefined;
+			if (descriptor.previousElement) {
+				if (descriptor.combinator === '>') {
+					parentElement = descriptor.previousElement;
+				} else {
+					parentElement = descriptor.previousElement.parentElement ?? output;
+				}
+			} else {
+				parentElement = output;
+			}
+
+			if (!parentElement) {
+				return;
+			}
+
+			// Update the descriptor.
+			descriptor.previousElement = newElement;
+
+			if (fillType === 'first') {
+				parentElement.prepend(newElement);
+				return;
+			}
+
+			if (fillType === 'last') {
+				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)) {
+					blockingSibling.remove();
+				}
+				return;
+			}
+
+			// Add the element to the DOM.
+			parentElement.append(newElement);
+
+			if (options.fill !== 'no-fill') {
+				// Count the previous siblings.
+				let previousSiblings = 0;
+				let previousSibling = newElement.previousElementSibling;
+				while (previousSibling && previousSiblings < desiredIndex) {
+					previousSibling = previousSibling?.previousElementSibling;
+					if (childType === 'type' && previousSibling?.tagName !== newElement.tagName) {
+						continue;
+					}
+					previousSiblings++;
+				}
+
+				// Fill duplicate elements up to the desired position.
+				const duplicatesRequired = desiredIndex - previousSiblings;
+				for (let i = 0; i < duplicatesRequired; i++) {
+					// Create the duplicate element.
+					const duplicateElement = newElement.cloneNode() as HTMLElement;
+					// Remove the ID.
+					duplicateElement.removeAttribute('id');
+					// Make a note of the duplicate element.
+					fillerElements.push(duplicateElement);
+					// Add the duplicate element to the DOM.
+					parentElement.insertBefore(duplicateElement, newElement);
+				}
+			}
+		}
+
 		// For every character in the selector, plus a stop character to indicate the end of the selector.
-		for (const character of selector + '%') {
+		selector += '%';
+		for (let i = 0; i < selector.length; i++) {
+			const character = selector[i];
 			// The start of a new selector.
 			if (!descriptor.previousCharacter) {
 				if (/(?:\+|~|>)/.test(character)) {
 					descriptor.combinator = character as Combinator;
-				}
-				else if (character === '.' || character === '#') {
+				} else if (character === '.' || character === '#') {
 					descriptor.addressCharacter = character;
 				} else {
 					descriptor.add(character);
@@ -167,7 +273,22 @@ export function cssToHtml(css: CSSRuleList | string, options: Options = {}): HTM
 				descriptor.clear();
 				descriptor.combinator = character as Combinator;
 			}
-			// The character none of the above.
+			// The character is a colon.
+			else if (character === ':') {
+				const nthSelector = selector.substring(i + 1);
+				const pseudoSelector =
+					/^(first-child|first-of-type)/i.exec(nthSelector)
+					?? /^(nth-child|nth-of-type)\(([0-9]+)\)/i.exec(nthSelector)
+					?? /^(last-child|last-of-type)/i.exec(nthSelector);
+				if (pseudoSelector) {
+					const childType = pseudoSelector[1].includes('type') ? 'type' : 'child';
+					const fillType = pseudoSelector[1].split('-')[0] as 'first' | 'nth' | 'last';
+					addElementToOutputWithFill(childType, fillType, parseInt(pseudoSelector[2]) || 0);
+					i += pseudoSelector[0].length;
+				}
+				descriptor.clear();
+			}
+			// The character is none of the above.
 			else {
 				addElementToOutput();
 				descriptor.clear();

tests/index.js

@@ -37,10 +37,24 @@ nav a#logo.icon > img {
 .pie .pastry.crenelations {
 	background: radial-gradient(circle at center, orange 10%, yellow);
 }
+.pie .pastry.crenelations div#crenelation:nth-child(8) {
+	content: 'o';
+}
+.pie .pastry.crenelations div:nth-child(3) {
+	content: 'm';
+}
+.pie .pastry.crenelations div:nth-child(9) {
+	content: 'p';
+}
 button {
 	content: 'Double-click me';
 	background-color: blue;
 }
+span:nth-child(4) {}
+span.first:first-child {}
+span:nth-of-type(3) {
+	content: '3rd span';
+}
 `;
 
 const output = cssToHtml(input);