1
- css-selector-parser
2
- ===================
3
-
4
- * Fast and low memory CSS selector parser.
5
- * Parses CSS selector into object-model (AST).
6
- * Compliant with all historical and modern CSS specs.
7
- * Covered with tests.
8
- * Documented.
9
- * Supported CSS selector standards:
10
- * ` css1 ` : https://www.w3.org/TR/CSS1/
11
- * ` css2 ` : https://www.w3.org/TR/CSS2/
12
- * ` css3 ` /` selectors-3 ` : https://www.w3.org/TR/selectors-3/
13
- * ` selectors-4 ` : https://www.w3.org/TR/selectors-4/
14
- * ` latest ` : refers to ` selectors-4 `
15
- * ` progressive ` : ` latest ` + accepts unknown psudo-classes, psudo-elements and attribute case sensitivity modifiers
16
-
17
- ** Important:**
18
- * [ Migrating from 1.x to 3.x] ( CHANGELOG.md#migrating-from-1x-to-3x ) .
19
- * [ Migrating from 2.x to 3.x] ( CHANGELOG.md#migrating-from-2x-to-3x ) .
20
- * [ Migrating from 1.x to 2.x] ( CHANGELOG.md#220 ) .
21
-
22
- Latest releases: [ Changelog] ( CHANGELOG.md ) .
23
-
24
- Installation
25
- ------------
1
+ # css-selector-parser
26
2
27
- ```
3
+ ![ npm] ( https://img.shields.io/npm/v/css-selector-parser )
4
+ ![ npm bundle size] ( https://img.shields.io/bundlephobia/minzip/css-selector-parser )
5
+ ![ NPM License] ( https://img.shields.io/npm/l/css-selector-parser )
6
+ ![ GitHub stars] ( https://img.shields.io/github/stars/mdevils/css-selector-parser )
7
+
8
+ A high-performance CSS selector parser with advanced features for modern web development.
9
+
10
+ ## Features
11
+
12
+ - 🚀 ** Fast and memory-efficient** parsing for all CSS selectors
13
+ - 🌳 ** AST-based** object model for programmatic manipulation
14
+ - 📊 ** Full compliance** with all CSS selector specifications
15
+ - 🧪 ** Comprehensive test coverage**
16
+ - 📚 ** Well-documented API** with TypeScript support
17
+ - 🔄 ** Two-way conversion** between CSS selectors and AST
18
+ - 🧩 ** Modular support** for various CSS specifications
19
+
20
+ ## Supported CSS Selector Standards
21
+
22
+ - ` css1 ` : [ W3C CSS1 Specification] ( https://www.w3.org/TR/CSS1/ )
23
+ - ` css2 ` : [ W3C CSS2 Specification] ( https://www.w3.org/TR/CSS2/ )
24
+ - ` css3 ` /` selectors-3 ` : [ W3C Selectors Level 3] ( https://www.w3.org/TR/selectors-3/ )
25
+ - ` selectors-4 ` : [ W3C Selectors Level 4] ( https://www.w3.org/TR/selectors-4/ )
26
+ - ` latest ` : refers to ` selectors-4 `
27
+ - ` progressive ` : ` latest ` + accepts unknown pseudo-classes, pseudo-elements and attribute case sensitivity modifiers
28
+
29
+ ## Migration Guides
30
+
31
+ - [ Migrating from 1.x to 3.x] ( CHANGELOG.md#migrating-from-1x-to-3x )
32
+ - [ Migrating from 2.x to 3.x] ( CHANGELOG.md#migrating-from-2x-to-3x )
33
+ - [ Migrating from 1.x to 2.x] ( CHANGELOG.md#220 )
34
+
35
+ See [ Changelog] ( CHANGELOG.md ) for release details.
36
+
37
+ ## Installation
38
+
39
+ ``` bash
28
40
npm install css-selector-parser
41
+ # or
42
+ yarn add css-selector-parser
43
+ # or
44
+ pnpm add css-selector-parser
29
45
```
30
46
31
- Usage
32
- -----
47
+ ## Usage
33
48
34
- ### Parsing
49
+ ### Parsing Selectors
35
50
36
51
``` javascript
37
- import {createParser } from ' css-selector-parser' ;
52
+ import { createParser } from ' css-selector-parser' ;
38
53
39
54
const parse = createParser ();
40
55
const selector = parse (' a[href^="/"], .container:has(nav) > a[href]:nth-child(2)::before' );
41
56
42
57
console .log (selector);
43
58
```
44
59
45
- Produces :
60
+ This produces an AST (Abstract Syntax Tree) output :
46
61
47
62
``` javascript
48
63
({
@@ -100,10 +115,10 @@ Produces:
100
115
})
101
116
```
102
117
103
- ### Constructing AST and rendering
118
+ ### Building and Rendering Selectors
104
119
105
120
``` javascript
106
- import {ast , render } from ' css-selector-parser' ;
121
+ import { ast , render } from ' css-selector-parser' ;
107
122
108
123
const selector = ast .selector ({
109
124
rules: [
@@ -142,14 +157,12 @@ const selector = ast.selector({
142
157
console .log (render (selector)); // a[href^="/"], .container:has(nav) > a[href]:nth-child(2)::before
143
158
```
144
159
145
- CSS Modules
146
- -----------
160
+ ## CSS Modules Support
147
161
148
- CSS Modules are specific CSS specifications that add new selectors or modify existing ones.
149
- The parser supports various CSS modules that can be included in your syntax definition:
162
+ CSS Modules are specifications that add new selectors or modify existing ones. This parser supports various CSS modules that can be included in your syntax definition:
150
163
151
164
``` javascript
152
- import {createParser } from ' css-selector-parser' ;
165
+ import { createParser } from ' css-selector-parser' ;
153
166
154
167
// Create a parser with specific CSS modules enabled
155
168
const parse = createParser ({
@@ -158,30 +171,36 @@ const parse = createParser({
158
171
});
159
172
```
160
173
161
- Supported CSS modules:
174
+ ### Supported CSS Modules
162
175
163
- * ` css-position-1 ` , ` css-position-2 ` , ` css-position-3 ` , ` css-position-4 ` : Adds position-related pseudo-classes
164
- * ` css-scoping-1 ` : Adds Shadow DOM selectors like ` :host ` , ` :host-context() ` , and ` ::slotted() `
165
- * ` css-pseudo-4 ` : Adds modern pseudo-elements like ` ::selection ` , ` ::backdrop ` , etc.
166
- * ` css-shadow-parts-1 ` : Adds ` ::part() ` for styling shadow DOM components
176
+ | Module | Description |
177
+ | --------| -------------|
178
+ | ` css-position-1/2/3/4 ` | Position-related pseudo-classes |
179
+ | ` css-scoping-1 ` | Shadow DOM selectors (` :host ` , ` :host-context() ` , ` ::slotted() ` ) |
180
+ | ` css-pseudo-4 ` | Modern pseudo-elements (` ::selection ` , ` ::backdrop ` , etc.) |
181
+ | ` css-shadow-parts-1 ` | ` ::part() ` for styling shadow DOM components |
167
182
168
183
The ` latest ` syntax automatically includes all modules marked as current specifications.
169
184
170
- API
171
- ---
185
+ ## API Documentation
186
+
187
+ - [ Complete API Documentation] ( docs/modules.md )
188
+ - [ Parsing CSS Selectors] ( docs/modules.md#createParser )
189
+ - [ Constructing CSS AST] ( docs/modules.md#ast )
190
+ - [ Rendering CSS AST] ( docs/modules.md#render )
172
191
173
- * [ Full API Documentation] ( docs/modules.md )
174
- * [ Parsing CSS selectors] ( docs/modules.md#createParser )
175
- * [ Constructing CSS AST] ( docs/modules.md#ast )
176
- * [ Rendering CSS AST] ( docs/modules.md#render )
192
+ ## Contributing
177
193
178
- LICENSE
179
- -------
194
+ Contributions are welcome! Please feel free to submit a Pull Request.
195
+
196
+ ## License
180
197
181
198
MIT
182
199
183
- ## Security contact information
200
+ ## Security Contact
201
+
202
+ To report a security vulnerability, please use the [ Tidelift security contact] ( https://tidelift.com/security ) . Tidelift will coordinate the fix and disclosure.
203
+
204
+ ## Sponsorship
184
205
185
- To report a security vulnerability, please use the
186
- [ Tidelift security contact] ( https://tidelift.com/security ) .
187
- Tidelift will coordinate the fix and disclosure.
206
+ If you find this project useful, please consider [ sponsoring the developer] ( https://github.com/sponsors/mdevils ) or [ supporting on Patreon] ( https://patreon.com/mdevils ) .
0 commit comments