Support linting for CSS nesting

[CrendKing]

Firefox officially supported CSS nesting since 117. I have been using it wherever appropriate and enjoyed it. Unfortunately, FireMonkey doesn't properly lint nested CSS out of the box. I also don't find any hint to fix this in the Help section. If this can be solved with config change, please let me know. Otherwise, would you please consider supporting it? Thank you!

I found your post at CSSLint/csslint#776. If you consider switching to stylelint, there is a way to enable nesting.

[erosman]

Please note that I have created a dedicated FireMonkey repo.

As mentioned in #665 (comment)

The editor uses CodeMirros 5 which uses old CSS & JS linters which don't support new CSS/JS.

jshint
JSHint 2.13.6 Latest
on Nov 11, 2022

csslint
v1.0.3 Latest
on Sep 20, 2016

stylelint is very good and up-to-date. However, CodeMirros 5 doesnt support it.
CodeMirros 6 was rewritten and can support Stylelint but it has to be complied from NPM and it becomes very large.
I have found any instruction on compiling it either.

[CrendKing]

Please note that I have created a dedicated FireMonkey repo.

Noted.

CodeMirros 6 was rewritten and can support Stylelint but it has to be complied from NPM and it becomes very large.
I have found any instruction on compiling it either.

https://codemirror.net/examples/bundle/ mentions Rollup as example bundler. Since Vite uses Rollup, and I'm somewhat familiar with Vite, I just tested and it seems working. Bundled size is less than 500KB.

There is a discussion at their forum and this post sums up what I did: https://discuss.codemirror.net/t/is-there-any-documentation-on-how-to-use-this/8550/10. Can you give it a try?

[erosman]

I have also been asking around about other editors such as monaco-editor, ace, or even ESlint Playground.

I am open to suggestions on alternatives. Any decent "playground" code that can handle JS & CSS would be fine, as long as it has a repo that can be referenced for the source code (AMO requirement).

[CrendKing]

It seems stylelint still does not support running in browser. So I have to use the modified version from openstyles. I came up with a quick snippet of calling stylelint as a CodeMirror linter. Does it help in any sense?

https://github.com/CrendKing/codemirror-stylelint-test

1. Install dependencies with pnpm or bun: bun install
2. Run with bun run dev
3. Build bundle with bun run build

[erosman]

In order to integrate Stylelint into CodeMirror 5, it requires:

• CSS linter e.g. CSSLint
• Error parser e.g. css.js

[CrendKing]

Sorry. I was responding to your comment about upgrading to CodeMirror 6 + stylelint. I was saying your can use Rollup to reduce the distribution size.

[erosman]

Upgrading to CodeMirror 6 requires a rewrite of the editor and the associated code which is a major undertaking

[CrendKing]

I understand that. I'm simply sharing some knowledge that might be helpful. I can live with status quo. Thanks for the work.

[erosman]

Thank you for your help.
Nonetheless, I am hoping to update the editor once FireMonkey has to be updated for MV3.