popcodeorg / popcode

An HTML/CSS/JavaScript editor for use in the classroom
MIT License
189 stars 139 forks source link

Highlight CSS selectors that match 0 elements #1355

Open catrope opened 6 years ago

catrope commented 6 years ago

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:

  1. A yellow/orange squiggly underline
  2. A warning symbol (triangle with exclamation mark) in the gutter (like we do for errors but with a different symbol)
  3. 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.

frewsxcv commented 5 years ago

It's possible the CSS selector will apply to HTML elements that will be added to the DOM via JS, which could be difficult to detect.

Also, a similiar issue: https://github.com/popcodeorg/popcode/issues/622