Skip to content

Commit ceaa832

Browse files
committed
docs: Add CSS Modules documentation to README
1 parent 894053a commit ceaa832

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed

README.md

+25
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,31 @@ const selector = ast.selector({
142142
console.log(render(selector)); // a[href^="/"], .container:has(nav) > a[href]:nth-child(2)::before
143143
```
144144

145+
CSS Modules
146+
-----------
147+
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:
150+
151+
```javascript
152+
import {createParser} from 'css-selector-parser';
153+
154+
// Create a parser with specific CSS modules enabled
155+
const parse = createParser({
156+
syntax: 'latest',
157+
modules: ['css-position-3', 'css-scoping-1']
158+
});
159+
```
160+
161+
Supported CSS modules:
162+
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
167+
168+
The `latest` syntax automatically includes all modules marked as current specifications.
169+
145170
API
146171
---
147172

0 commit comments

Comments
 (0)