popcodeorg / popcodeorg/popcode
Highlight CSS selectors that match 0 elements
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 191
- Forks
- 143
- Avg merge
- 4d 11h
- Merged PRs (30d)
- 5
Description
If the user writes a CSS selector that doesn't match any elements of the page, then it's quite likely that they made a mistake/typo and that something in their project doesn't work as a result. We should highlight these selectors with:
- A yellow/orange squiggly underline
- A warning symbol (triangle with exclamation mark) in the gutter (like we do for errors but with a different symbol)
- A popup with explanatory text when you hover either the symbol in the gutter (like we do for errors) or the underlined text
To start with, we could just do the gutter symbol with hover text, since we already do that for errors, so there's prior art.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the existing error gutter symbol and hover behavior, which the issue identifies as prior art, then find where CSS selectors are evaluated in the editor. Done means selectors matching zero page elements receive the proposed warning treatment, beginning with a gutter symbol and explanatory hover text.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, tooling, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100