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.