fix: rendering nested selectors with combinators, closes #27

mdevils · mdevils · commit 40fb4345f3d7 · 2023-06-25T13:51:03.000+02:00
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "build": "rm -Rf dist && tsc -p tsconfig.json && tsc -p tsconfig.mjs.json && echo '{\"type\": \"commonjs\"}' > dist/cjs/package.json && echo '{\"type\": \"module\"}' > dist/mjs/package.json",
     "build:docs": "rm -Rf docs && typedoc --excludeInternal --excludeExternals --disableSources --plugin typedoc-plugin-markdown --entryDocument ../README.md --out docs src/index.ts && ts-node tools/cleanup-docs.ts",
     "test": "jest test",
+    "test:watch": "jest --watch test",
     "test:dist": "TEST_DIST=cjs npm run test",
     "lint": "eslint src/**.ts",
     "lint:fix": "eslint --fix src/**.ts",
diff --git a/src/render.ts b/src/render.ts
@@ -54,7 +54,10 @@ export function render(entity: AstSelector | AstRule): string {
     }
     if (entity.type === 'Rule') {
         let result = '';
-        const {tag, ids, classNames, attributes, pseudoClasses, pseudoElement, nestedRule} = entity;
+        const {tag, ids, classNames, attributes, pseudoClasses, pseudoElement, combinator, nestedRule} = entity;
+        if (combinator) {
+            result += `${combinator} `;
+        }
         if (tag) {
             const namespace = tag.namespace;
             if (namespace) {
@@ -129,9 +132,6 @@ export function render(entity: AstSelector | AstRule): string {
             result += `::${escapeIdentifier(pseudoElement)}`;
         }
         if (nestedRule) {
-            if (nestedRule.combinator) {
-                result += ` ${nestedRule.combinator}`;
-            }
             result += ` ${render(nestedRule)}`;
         }
         return result;
diff --git a/test/render.test.ts b/test/render.test.ts
@@ -46,6 +46,7 @@ const testCases = {
     'tag1:has(.class)': 'tag1:has(.class)',
     'tag1:has(.class,.class2)': 'tag1:has(.class, .class2)',
     'tag1:has(.class:has(.subcls),.class2)': 'tag1:has(.class:has(.subcls), .class2)',
+    'tag1:has(> div)': 'tag1:has(> div)',
     'tag1:current(.class:has(.subcls),.class2)': 'tag1:current(.class:has(.subcls), .class2)',
     'tag1:current': 'tag1:current',
     '*': '*',
