Unknown word (CssSyntaxError)

[thedaviddelta]

Hello and thanks for this project!

I've just installed the Stylelint LSP in my Neovim for interacting with an existing project that uses Stylelint, and I'm getting this strange error at the top of every tsx file, as well as other strange reports in ts files at random positions (like Missed semicolon (CssSyntaxError)). I've been searching online and found this issue (stylelint/stylelint#5864) in the official Stylelint repo, talking about some issues with the Stylelint 14 migration. In this issue, the maintainer suggests it may be an issue with the VSCode plugin version, and then when told it's happening in Webstorm he suggests it's an issue with Webstorm's plugin too. I've then tested this project in both Webstorm and VSCode and found no issues, so I think this may be related to an issue that was already addressed there but maybe not in this LSP. Some extra info that may be relevant is that this project uses the 14th version of Stylelint, and extends stylelint-config-sass-guidelines (that according to the maintainer in that same issue, it does the same as stylelint-config-standard-scss).

Thanks and regards, David.

[lougreenwood]

I'm also experiencing this.

I added ignoreFiles: ['**/*.js'] and it fixed things. However for our project we use a .stylelintignore file for defining the ignores.

I tried moving my ignore to the stylelintignore file, but now the error is back. I wonder if the LSP reads the stylelintignore file?

[thedaviddelta]

Thanks for your reply @lougreenwood.

This "fixes" the issue, but only because this project is SCSS-based, instead of using some kind of CSS-in-JS, in that case that wouldn't be possible. Anyway, I'm not able to globally apply this in my config, as it seems to override the project's own configuration, so had to add it to the project itself.

Regards, David.

[lougreenwood]

@thedaviddelta I wonder, is your project a mono-repo? I wonder if stylelint_lsp isn't finding the correct config / .stylelintrc.js

@bmatcuk - do you have any ideas here?

[ZerdoX-x]

For me seems like .stylelintignore works fine:

**/*.js
**/*.ts
commitlint.config.cts
stylelint.config.mjs

My stylelint.config.mjs:

// @ts-check

/* try to move from mjs to js when
 * https://github.com/stylelint/stylelint/issues/5291
 * gets resolved
 */

/** @type {import("stylelint").Config} */
const config = {
    extends: [
        "stylelint-config-html/html",
        "stylelint-config-html/svelte",
        "stylelint-config-recommended",
    ],
    rules: {
        /* validate not only property name, but also property value */
        "declaration-property-value-no-unknown": true,
        /* add svelte's :global selector */
        "selector-pseudo-class-no-unknown": [
            true,
            {
                ignorePseudoClasses: ["global"],
            },
        ],
    },
};

export default config;

I just don't understand why stylelint-lsp tries to lint js code, shows some errors, when stylelint cli works fine. This is indeed bug of LSP, and ideally I would not like to include these ignores in my project's configuration. Luckily I don't use any css code in these files...

[bmatcuk]

I borrowed the default configuration from some other css lsp server - it was so long ago, I forget what it was now. But, it included js/jsx files likely because it was common to include css in jsx at the time. Anyway, if you'd prefer that it didn't do that, you can change that as part of your neovim config. See the default configuration here. Relevant part is the filetypes option. You could copy/paste that into your neovim init file, and just remove the js/ts stuff, like:

require'lspconfig'.stylelint_lsp.setup{
  filetypes = {
    'css',
    'less',
    'scss',
    'sugarss',
    'vue',
    'wxss',
  },
  settings = {
    stylelintplus = {
      -- see available options in stylelint-lsp documentation
    }
  }
}