vscode-stylelint throws errors on the JS parts of CSS-in-JS

46 Views Asked by At

I'm using VSCode to edit a Lit project that uses Stylelint. The repo is here: https://github.com/RobertAKARobin/lit-stylelint-test

Lit uses CSS-in-JS, where CSS blocks are prefixed with Lit's css tag function. For example, here's a Lit component -- note the static styles:

import {LitElement, css, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
    static styles = css`
    :host {
        color: blue;
    }
    `;

    @property()
    name?: string = 'World';

    render() {
        return html`<p>Hello, ${this.name}!</p>`;
    }
}

Running npx stylelint seems to work fine. However, while I'm editing the code, the vscode-stylelint extension incorrectly reports errors on the portions of the file that are not CSS. For example, here I've added a bit to the render() function that is incorrect JavaScript, but should be ignored by vscode-stylelint because it isn't CSS -- yet vscode-stylelint throws the SyntaxError shown at the bottom-right:

Stylelint error

vscode-stylelint seems to reevaluate the entire file any time a character is entered. This causes a noticeable performance degradation on files that contain lots of JavaScript (which is most of them).

Is it possible for vscode-stylelint to only pay attention to the CSS-in-JS portions, or to only run when I 'save'?

(Moving all the CSS to external files isn't an acceptable solution since it would add a tremendous amount of boilerplate that would outweigh the efficiencies of Lit.)

0

There are 0 best solutions below