What is a good linter for CSS?

v6
1

I’m attempting to implement a CSS Editor in my React app, for that im using a CodeMirro wrapper

@uiw/react-codemirror

Now the main issue im having, is that I have not been able to find any proper linter for css errors

This is my current implementation

export const CodeEditor: React.FC = () => {
  const [code, setCode] = useState(CSS_CODE);

  const cssLinter = linter(view => {
    const diagnostics: Diagnostic[] = [];
    syntaxTree(view.state)
      .cursor()
      .iterate(node => {
        if (node.type.isError) {
          diagnostics.push({
            from: node.from,
            to: node.to,
            severity: "error",
            message: "CSS syntax error"
          });
        }
      });
    return diagnostics;
  });

  return (
    <Content>
      <CodeMirror
        value={code}
        height="100%"
        width="100%"
        extensions={[css(), lintGutter(), cssLinter]}
        onChange={value => setCode(value)}
        theme="dark"
      />
    </Content>
  );
};

But this linter is pretty weak, to begin with It always returns the default message “CSS syntax error” which doesnt say much
And for example

image

With those rules, its still allowing non defined css properties when im expecting them to fail

Those are all the packages im using

import CodeMirror from "@uiw/react-codemirror";

import { css } from "@codemirror/lang-css";

import { Diagnostic, linter, lintGutter } from "@codemirror/lint";

import { syntaxTree } from "@codemirror/language";

I didn’t find much in the docs about the usage of css specific linters , are there any prebuilt? Because I cant image building them one by one