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:
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.)
