Fine tune CSS Linter Highlighting

[raclim]

Notes
This issue is part of the ongoing work to upgrade CodeMirror from v5 to v6 (see the parent issue for additional context). This also references the develop-codemirror-v6 branch for development, and not the main develop branch.

You can also gain a better understanding of how CodeMirror v6 works by referring to their Reference Manual.

Background

This issue specifically focuses on the CSS linter, which does linting for CSS files. Currently, while the CSS linter properly identifies issues, it only highlights a small portion of the line and not the specific syntax, which can make it harder for users to understand what exactly might need fixing.

Implementation

The logic for applying CSS linting can be found in the makeCssLinter() function starting on line 108 in the
stateUtils.js file. The specific lines that would need to be updated are lines 125-130:

diagnostics.push({
        from: cmLine.from + messageCharacter - 1,
        to: cmLine.from + messageCharacter,
        severity: messageType,
        message: messageText
      });

We would like to improve how the from and to positions are determined so that the highlighted range more accurately represents the actual error.

Suggestions to Start

• Take some time to explore how the CSS linter is setup in the p5.js Editor and within the develop-codemirror-v6 branch. As you explore it, consider what would be helpful to flag or what you've noticed in other text editors that could be applied here.
• Examine the stateUtils.js file and examine how makeCssLinter() works. Compare it with how the from and to positions are identified in makeJsLinter() or makeHtmlLinter().

[Nixxx19]

Hi @raclim!

I'd love to work on this issue and submit the fix for it.