Change Request: support CSS-in-JS

[rakleed]

Environment

Node version: v22.11.0
npm version: v10.9.0
Local ESLint version: v9.16.0 (Currently used)
Global ESLint version: Not found
Operating System: darwin 24.1.0

What problem do you want to solve?

I'd like the plugin to work for CSS-in-JS solutions like styled-components, emotion, linaria and React inline styles.

What do you think is the correct solution?

In stylelint, you can use PostCSS parser for that purpose. Here is an example: https://github.com/hudochenkov/postcss-styled-syntax

So I guess #29 is related

Participation

• I am willing to submit a pull request for this change.

Additional comments

No response

[nzakas]

@rakleed please explain what you mean by "support CSS-in-JS". Some examples would be helpful. (I'm not sure what exactly I'm supposed to be looking at in those links. Because I don't use CSS-in-JS, I'll need you to provide as much context as possible.)

[rakleed]

This means that you can write CSS directly in JS files. See examples:

• https://github.com/styled-components/styled-components#example
• https://emotion.sh/docs/introduction#framework-agnostic
• https://github.com/callstack/linaria#syntax

So you need to check the JS files, find such CSS code in template literals, and lint it.

In stylelint, you can use PostCSS parser for that purpose. Here is an example: https://github.com/hudochenkov/postcss-styled-syntax

So I guess #29 is related

[nzakas]

Ah gotcha. This would actually be a multi-step process to get this working for ESLint.

First, we'd need to finish up work on this RFC:
eslint/rfcs#105

That would give ESLint the ability to pick out specific parts of a JavaScript file and mark it as CSS. ESLint would then be able to present all of the CSS and JS problems in one file.

The problem of interpolated values is one I'm not sure how to address.

I'll leave this issue open to track this request. Just be aware it's a non-trivial amount of work so likely won't be completed anytime soon.

[github-actions]

Oops! It looks like we lost track of this issue. What do we want to do here? This issue will auto-close in 7 days without an update.

[nzakas]

Going to leave this open as something to explore.

[SarahVanDenBerghe]

I also second this! I'd love to have CSS template literal support. In my case, I'm using LitJS to create a set of web components, where styling happens with template literals, for example in my *.ts files:

  static styles = css`
    p {
      color: green;
    }
  `;

Would be amazing to be able to recognize css in this case, similar to html-eslint. For now, I’ve tried adding stylelint + postcss + postcss-lit, which somewhat works, but the collisions with ESlint and redundant setup outweighed the benefits. There's probably ways to make it work more seamlessly, but I’d prefer to wait for proper ESLint support to avoid adding another linter :)

[olange]

Second this too.

We recently switched from ESLint+Prettier to ESLint to lint and format all our JS, TS, Astro and CSS sources — using @eslint/js, @stylistic/eslint-plugin, eslint-plugin-{astro,import,lit,wc} and @eslint/css.

Using ESLint only provides a great unified experience with the same rulesets. Many thanks for the efforts that you all put into this, it was a smooth transition.

Only remaining issue at this stage would be the linting and formatting of the CSS template literals in our (extensive) custom elements codebase. We also use Lit.

The CSS template literal style declarations of our LitElements are almost always following this pattern:
https://lit.dev/docs/components/styles/

export class MyElement extends LitElement {
  static styles = css`...`;
  …
}

or

  static styles = [ css`...`, css`...`];

[nzakas]

Thanks folks. I think the complexity here is what happens when the template literals have substitutions:

const mainColor = css`red`;

...

static styles = css`

  div { color: ${mainColor} }

`;

So you actually need ESLint to understand both the JavaScript part and the CSS part.

The way html-eslint does things is out of the norm for the way ESLint plugins work, and we'd much rather use something along the lines of eslint/rfcs#105, which would provide enough context to do this.

The gating factor here is the time of the ESLint team. If anyone cares enough about this to sponsor development, please let me know and I'll be happy to have that discussion. 😄