selector-maintenance
Perform maintenance tasks for @markuplint/selector: add extended pseudo-classes,
support new CSS selectors, debug matching issues, and update dependencies.
Input
$ARGUMENTS specifies the task. Supported tasks:
| Task | Description |
|---|---|
add-pseudo-class <name> | Add a new extended pseudo-class |
add-selector-support <type> | Add support for a new CSS selector type |
debug-matching <selector> <html> | Debug selector matching against HTML |
update-deps | Update dependencies and verify compatibility |
If omitted, defaults to add-pseudo-class.
Reference
Before executing any task, read docs/maintenance.md (or docs/maintenance.ja.md)
for the full guide. The recipes there are the source of truth for procedures.
Also read:
- •
docs/matching.md-- Selector matching algorithm details - •
ARCHITECTURE.md-- Package overview, module map, and class hierarchy
Task: add-pseudo-class
Add a new markuplint-specific extended pseudo-class. Follow recipe #1 in docs/maintenance.md.
Step 1: Create the handler
- •Read existing handlers in
src/extended-selector/to understand the pattern - •Create
src/extended-selector/<name>-pseudo-class.ts - •Implement the handler following the
ExtendedPseudoClasssignature:typescript(content: string) => (el: Element) => SelectorResult;
- •Return specificity
[0, 1, 0]for consistency with other extended pseudo-classes
Step 2: Register the handler
- •Open
src/create-selector.ts - •Import the new handler
- •Add it to the extended object in
createSelector()whenspecsis provided
Step 3: Test and document
- •Add tests in
src/create-selector.spec.tsor a new test file - •Update
README.mdextended selector table - •Build:
yarn build --scope @markuplint/selector - •Run tests:
yarn test --scope @markuplint/selector
Task: add-selector-support
Add support for a currently unsupported CSS pseudo-class. Follow recipe #2 in docs/maintenance.md.
Step 1: Implement matching
- •Read
src/selector.ts, find thepseudoMatch()function - •Move the target pseudo-class from the unsupported case list
- •Add a new case with matching implementation
- •Ensure correct specificity assignment
Step 2: Test and document
- •Add tests covering the new selector
- •Update
README.mdsupport table (change❌to✅) - •Build:
yarn build --scope @markuplint/selector - •Run tests:
yarn test --scope @markuplint/selector
Task: debug-matching
Debug why a selector matches or doesn't match against given HTML.
Step 1: Set up the environment
- •Read
src/selector.tsandsrc/match-selector.tsto understand the matching flow - •Identify whether the selector is a CSS string or a
RegexSelectorobject
Step 2: Trace the matching
- •Enable debug logging:
DEBUG=selector* yarn test --scope @markuplint/selector - •For CSS selectors, trace through:
- •
Ruleset.parse()-- Check that the selector parses correctly - •
StructuredSelector-- Check theSelectorTargetchain - •
SelectorTarget-- Check each compound selector component
- •
- •For regex selectors, trace through:
- •
regexSelectorMatches()-- Check pattern matching results - •
SelectorTarget.match()-- Check combinator traversal
- •
Step 3: Report findings
- •Identify the exact point where matching succeeds or fails
- •Check if the issue is in parsing, matching, or specificity calculation
- •Suggest a fix or workaround
Task: update-deps
Update package dependencies and verify compatibility.
- •Read
package.jsonfor current dependency versions - •Check for available updates
- •For
postcss-selector-parserupdates:- •Review the changelog for breaking AST or API changes
- •Refer to recipe #3 in
docs/maintenance.mdfor the integration surface
- •For
@markuplint/ml-specupdates:- •Check for type changes affecting extended pseudo-classes
- •Update dependencies
- •Build:
yarn build --scope @markuplint/selector - •Run tests:
yarn test --scope @markuplint/selector - •Verify no regressions in selector matching
Rules
- •Always build after source changes. Run
yarn build --scope @markuplint/selectorbefore testing. - •All extended pseudo-classes use
[0, 1, 0]specificity. Maintain this consistency. - •CSS matching uses postcss-selector-parser AST. Never manually parse CSS selector strings.
- •Regex matching is separate from CSS matching. They share the
matchSelector()entry point but use different code paths. - •Selector instances are cached. After changing parsing or matching logic, the cache may return stale instances in tests. Clear the cache or restart the test runner.