Fix various CSS selector equation bugs

Author: kraih

CHANGELOG.md

@@ -3,6 +3,12 @@
 
 This package strictly follows [Semantic Versioning](https://semver.org).
 
+## v2.1.1 (2023-02-06)
+
+### Bug Fixes
+
+  * Fixed various CSS selector equation bugs.
+
 ## v2.1.0 (2023-01-29)
 
 ### Features

src/css.ts

@@ -119,7 +119,7 @@ function compileEquation(values: string | undefined): [number, number] {
   if (values === undefined) return [0, 0];
 
   // "even"
-  if (/^\s*even\s*$/i.test(values)) return [2, 2];
+  if (/^\s*even\s*$/i.test(values)) return [2, 0];
 
   // "odd"
   if (/^\s*odd\s*$/i.test(values)) return [2, 1];
@@ -172,12 +172,12 @@ function compilePseudoClass(name: string, args: string): PseudoClass {
 
   // ":last-child"
   else if (name === 'last-child') {
-    return {type: 'pc', class: 'nth-last-child', value: [-1, 1]};
+    return {type: 'pc', class: 'nth-last-child', value: [0, 1]};
   }
 
   // ":last-of-type"
   else if (name === 'last-of-type') {
-    return {type: 'pc', class: 'nth-last-of-type', value: [-1, 1]};
+    return {type: 'pc', class: 'nth-last-of-type', value: [0, 1]};
   }
 
   // ":checked", ":empty", ":only-child", ":only-of-type", ":root"
@@ -398,18 +398,21 @@ function matchPseudoClass(simple: PseudoClass, current: ElementNode, tree: Paren
       nodes = nodes.filter(el => (el as ElementNode).tagName === current.tagName);
     }
 
-    // ":*-last-*"
-    if (name === 'nth-last-child' || name === 'nth-last-of-type') nodes.reverse();
-
+    let index = 0;
     for (let i = 0; i < nodes.length; i++) {
-      const result = equation[0] * i + equation[1];
-      if (result < 1) continue;
-      const sibling = nodes[result - 1];
-      if (sibling === undefined) return false;
-      if (sibling === current) return true;
+      if (nodes[i] !== current) continue;
+      index = i;
+      break;
     }
+    if (name === 'nth-last-child' || name === 'nth-last-of-type') index = nodes.length - index - 1;
+    index++;
+
+    const delta = index - equation[1];
+    if (delta === 0) return true;
+    return equation[0] !== 0 && delta < 0 === equation[0] < 0 && delta % equation[0] === 0;
   }
 
+  // Everything else
   return false;
 }
 

test/dom.js

@@ -689,35 +689,35 @@ t.test('DOM', t => {
     );
     t.same(
       dom.find('li:nth-child(1n+0)').map(el => el.text()),
-      ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+      ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
     );
     t.same(
       dom.find('li:nth-child(1n-0)').map(el => el.text()),
-      ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+      ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
     );
     t.same(
       dom.find('li:nth-child(n+0)').map(el => el.text()),
-      ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+      ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
     );
     t.same(
       dom.find('li:nth-child(n)').map(el => el.text()),
-      ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+      ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
     );
     t.same(
       dom.find('li:nth-child(n)').map(el => el.text()),
-      ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+      ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
     );
     t.same(
       dom.find('li:nth-child(n+0)').map(el => el.text()),
-      ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+      ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
     );
     t.same(
       dom.find('li:nth-child(N+0)').map(el => el.text()),
-      ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+      ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
     );
     t.same(
       dom.find('li:nth-child(N+0)').map(el => el.text()),
-      ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+      ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
     );
 
     t.equal(dom.find('li:nth-child(0n+0)').length, 0);
@@ -897,6 +897,10 @@ t.test('DOM', t => {
       dom.find('div div:only-of-type').map(el => el.text()),
       ['J', 'K']
     );
+    t.same(
+      dom.find('div :nth-child(-n+2)').map(el => el.text()),
+      ['J', 'Mojo!', 'K']
+    );
 
     t.end();
   });