Fix inconsistent order of problems output between online demo and CLI

[jeddy3]

Which issue, if any, is this issue related to?

None. I've been catching up on issues and PRs across the Stylelint org (amazing work btw!), and I wanted to dip my authoring toe back in with some CSS coding.

Is there anything in the PR that needs further explanation?

This PR changes the output order to match the string formatter for consistency between the CLI and the online demo (location, severity, description, and name), as it's likely users of the online demo are reproducing an issue they first saw on the CLI.

Old:

New:

CLI (for reference):

To help make the fix, I also refactored the CSS and HTML code to use the type of modern features we'd like Stylelint to help authors to adopt:

• cascade layers
• oklch() colour format
• relative colours
• nesting
• container queries
• subgrid
• custom elements (styled in the light)

(I would've liked to have used clamp() for fluid spacing and type sizes, but the Monoco editor isn't fluid so it doesn't make sense to.)

I've kept using the existing modern features like:

• named grid areas
• math comparison functions
• the :has() pseudo-class
• logical properties and values

Hopefully, this refactor will make the CSS code more straightforward to navigate and work with as it more closely groups related styles.

[netlify[bot]]

✅ Deploy Preview for chimerical-trifle-8d3c21 ready!

Name	Link
🔨 Latest commit	7144c6fdee393d1006f625cff18662f6bb9106d1
🔍 Latest deploy log	https://app.netlify.com/sites/chimerical-trifle-8d3c21/deploys/66aa0a849f9b060007e47571
😎 Deploy Preview	https://deploy-preview-413--chimerical-trifle-8d3c21.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jeddy3]

But I'm not sure if using non-standard element names is a good idea

Do you mean the (unregistered) custom elements like <sd-outputs>? Custom elements seem to be widely used, especially in enterprise (e.g. Microsoft's FAST or Adobe's Spectrum), with Photoshop being a good example of their use.

In the PR, I've used them as so-called "HTML Web Components"; a trend that wraps standard web elements in custom ones and then styles them in the light DOM.

The way "PROBLEMS" is displayed seems good to me!

👍