[JSX] Support for css modules and packages like `clsx` or `classnames`

[MaelWeb]

This works very well in the JSX file. But there are still some small regrets. When I use classnames() in JSX, it doesn't work. Is it possible to enable this in JSX?

e.g.

// tese.less
.test {
    color: '#000';
}

//  test.jsx
import ClassNames from "classnames";

export default function test() {
     return (<div className={ ClassNames('test') } /> )
}

[pranaygp]

there are too many possible things to consider when support CSS-in-JS

"classnames" is only one way.

there's also CSS Modules which is getting a lot of traction now (https://github.com/css-modules/css-modules)

also, consider the clsx package, or even just the fact that className can be anything apart from a string.

We can definitely try to support some of the simpler cases, like classnames("string literal") or clsx("literal-1", "literal-2"). For now, I'm going to leave this as an exercise for anyone who'd like to contribute such features. We can tackle this for one use-case at a time, for one CSS-in-JS package/solution at a time

[pasquale95]

Hi, thanks for your extension! One thing I noticed and that can be improved is the following. If we work with .jsx or .tsx files, the extension resolves the css class if specified without curly brackets, but it doesn't if the curly brackets are there. For instance:

<div className="container" /> // <- resolved
<div className={"container"} /> // <- not resolved

Do you think you can improve also this little aspect? It would be great!