Fix: #id selector does not work in :of()

1aron · 1aron · commit e3fa3b169876 · 2025-04-26T00:05:06.000+08:00
diff --git a/packages/core/src/utils/generate-selector.ts b/packages/core/src/utils/generate-selector.ts
@@ -6,7 +6,8 @@ const prefixMap: Record<string, string> = {
     'pseudo-class': ':',
     'pseudo-element': '::',
     'attribute': '',
-    'combinator': ''
+    'combinator': '',
+    'id': '#',
 }
 
 export default function generateSelector(nodes: SelectorNode[], body = ''): string {
diff --git a/packages/core/src/utils/parse-selector.ts b/packages/core/src/utils/parse-selector.ts
@@ -3,7 +3,7 @@ import MasterCSS from '../core'
 import parsePair from './parse-pair'
 
 export declare type SelectorLiteralNode = {
-    type?: 'attribute' | 'pseudo-class' | 'pseudo-element' | 'class' | 'universal'
+    type?: 'attribute' | 'pseudo-class' | 'pseudo-element' | 'class' | 'universal' | 'id'
     raw?: string
     value?: string
     children?: SelectorNode[]
@@ -23,7 +23,7 @@ export declare type SelectorCombinatorNode = {
 
 export declare type SelectorNode = SelectorLiteralNode | SelectorCombinatorNode | SelectorSeparatorNode
 
-const SELECTOR_REGEX = new RegExp(`(?:[a-zA-Z0-9-]+)|([${SELECTOR_COMBINATORS.join('')}.:,*])|(a-zA-Z0-9-)`, 'g')
+const SELECTOR_REGEX = new RegExp(`(?:[a-zA-Z0-9-]+)|([${SELECTOR_COMBINATORS.join('')}#.:,*])|(a-zA-Z0-9-)`, 'g')
 
 export default function parseSelector(token: string, css = new MasterCSS(), isRaw = true) {
     const resolve = (eachToken: string): SelectorNode[] => {
@@ -35,7 +35,7 @@ export default function parseSelector(token: string, css = new MasterCSS(), isRa
             const raw = match[0]
             tokenIndex += raw.length
 
-            if (raw === ':' || raw === '.') {
+            if (raw === ':' || raw === '.' || raw === '#') {
                 currentPrefix += raw
                 continue
             }
@@ -73,6 +73,8 @@ export default function parseSelector(token: string, css = new MasterCSS(), isRa
                 type = 'pseudo-element'
             } else if (currentPrefix === '.') {
                 type = 'class'
+            } else if (currentPrefix === '#') {
+                type = 'id'
             }
 
             nodes.push({
diff --git a/packages/core/tests/utils/parse-selector.test.ts b/packages/core/tests/utils/parse-selector.test.ts
@@ -20,6 +20,16 @@ export const cases = {
                 { type: 'class', raw: '.active', value: 'active' }
             ]
         }]],
+        [':of(#active)', '#active ', [{
+            type: 'pseudo-class', raw: ':of', value: 'of', children: [
+                { type: 'id', raw: '#active', value: 'active' },
+            ]
+        }]],
+        [':of(active)', 'active ', [{
+            type: 'pseudo-class', raw: ':of', value: 'of', children: [
+                { raw: 'active', value: 'active' },
+            ]
+        }]],
         [':of(.active_)', '.active ', [{
             type: 'pseudo-class', raw: ':of', value: 'of', children: [
                 { type: 'class', raw: '.active', value: 'active' },

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,8 @@ const prefixMap: Record<string, string> = {`
`6`	`6`	`'pseudo-class': ':',`
`7`	`7`	`'pseudo-element': '::',`
`8`	`8`	`'attribute': '',`
`9`		`- 'combinator': ''`
	`9`	`+ 'combinator': '',`
	`10`	`+ 'id': '#',`
`10`	`11`	`}`
`11`	`12`
`12`	`13`	`export default function generateSelector(nodes: SelectorNode[], body = ''): string {`