Add: generateSelector util for selector AST nodes

1aron · 1aron · commit 01a3af9f83ac · 2025-04-08T19:04:52.000+08:00
diff --git a/packages/core/src/utils/generate-selector.ts b/packages/core/src/utils/generate-selector.ts
@@ -0,0 +1,62 @@
+import { SelectorNode } from './parse-selector'
+
+const prefixMap: Record<string, string> = {
+    'class': '.',
+    'pseudo-class': ':',
+    'pseudo-element': '::',
+    'attribute': '',
+    'combinator': ''
+}
+
+export default function generateSelector(nodes: SelectorNode[], body = ''): string {
+    const generate = (node: SelectorNode): string => {
+        if (node.type === 'attribute') return `[${node.value}]`
+        if (node.type === 'combinator') return node.value
+
+        const prefix = node.type && prefixMap[node.type] || ''
+        const base = node.value ? prefix + node.value : ''
+
+        if ('children' in node && node.children?.length) {
+            const childrenText = node.children.map(generate).join('')
+            return node.value ? base + `(${childrenText})` : base + childrenText
+        }
+        return base
+    }
+
+    let pre = ''
+    let current = ''
+    const groups: string[] = []
+    const flatNodes = nodes.flatMap(node => (!('value' in node) && 'children' in node && node.children?.length) ? node.children : node)
+
+    flatNodes
+        .forEach(node => {
+            if (node.value === ',') {
+                groups.push(current)
+                current = ''
+            } else if (node.value === 'of' && 'children' in node) {
+                pre += node.children!.map(generate).join('')
+            } else {
+                current += generate(node)
+            }
+        })
+
+    if (current) groups.push(current)
+    if (pre && !pre.endsWith('>')) pre += ' '
+    const result = groups.length
+        ? groups.map(text => pre + body + text).join(',')
+        : pre + body
+
+    if (process.env.NODE_ENV === 'development') {
+        /** Warning: Nodes before `:of()` cannot contain combinators or other ::pseudo-element nodes */
+        const ofIndex = flatNodes.findIndex(node => node.type === 'pseudo-class' && node.value === 'of')
+        if (ofIndex > 0) {
+            const hasCombinator = flatNodes.slice(0, ofIndex).some(node => node.type === 'combinator')
+            const hasPseudoElement = flatNodes.slice(0, ofIndex).some(node => node.type === 'pseudo-element')
+            if (hasCombinator || hasPseudoElement) {
+                console.warn(`Cannot use combinators or pseudo-elements before ':of()' selector: '${result}'`)
+            }
+        }
+    }
+
+    return result
+}
diff --git a/packages/core/tests/utils/generate-selector.test.ts b/packages/core/tests/utils/generate-selector.test.ts
@@ -0,0 +1,9 @@
+import { test, expect, describe } from 'vitest'
+import { generateSelector } from '../../src'
+import { cases } from './parse-selector.test'
+
+describe.concurrent.each(Object.entries(cases))('%s', (_, cases) => {
+    test.concurrent.each(cases)('%s', (_, output, nodes, config, body) => {
+        expect(generateSelector(nodes, body)).toBe(output)
+    })
+})
