In jsx, how do I make Emmet use "class" instead of "className"

We're using Solid.js, which uses JSX, and unlike React, Solid.js uses the regular class attribute for classes, and not classNames.

When I type .bg-white and press Tab, it should complete to <div class="bg-white"></div>

0
24 comments
Can you please share a bit more context around the problem? Which version of the IDE are you using?
This should be fixed in 2023.2, please see https://youtrack.jetbrains.com/issue/WEB-28691/Allow-editing-of-Emmet-Zen-shortcuts-for-JSX-to-change-className-to-class.
0

Hi Elena, I'm on PhpStorm 2024.1 on the Mac.

Do I need to change something in Settings?

Thanks!

0

I suspect this might be related to the issue I wrote about at: https://intellij-support.jetbrains.com/hc/en-us/community/posts/18293864405778-Class-attributes-not-allowed-in-JSX-code

It looks like the IDE doesn't understand I'm using Solid.js.

0

This is not controlled by any settings. The framework detection logic is described in https://youtrack.jetbrains.com/issue/WEB-60240/IDE-shouldnt-report-error-for-tags-and-attributes-in-Solid-Preact-react-three-fiber-projects#focus=Comments-27-7435791.0-0.

Do you have "jsxImportSource" flag set in tsconfig/jsconfig? Also, what does your package.json look like?

 

0

We do have a jsxImportSource, this is what it looks like:

And this is what our package.json looks like:

0

Note that while I'm on PhpStorm 2024.1 right now, the issue is not specific to 2024.1 – we've had this issue ever since we started using Solid.js which was more than a year ago.

0

Could you try composing a sample project that reproduces the issue?

0

I tried creating a base Solid.js project with npx degit solidjs/templates/ts my-app to see if I can reproduce the issue there, but I couldn't. 

Looks like the issue is specific to our repo. 

Do you have any ideas on what we can try to isolate it?

Thanks!

0

Here's a sample project that reproduces the issue:

https://filebin.net/xte1hggezfuph38x

0

I can't access it unfortunately, the server is down:

0

Thank you! The issue goes away on removing "include": ["packages/ae-typings", "packages-solid"] from the tsconfig.json. The tsconfig.json is not respected for your .tsx file because of this line as it's not included in this config.

0

You're right! Getting rid of the line does fix it.

Do you know what the problem with that line is?

0

include specifies an allowlist of files to include in the program. By default, all ts files are included. By specifying the explicit patterns, you are excluding other files (those that don't match the pattern) from the project.

0

It looks like the actual problem is that when you add a folder that contains react components, this “breaks” the solid.js jsx files.

The reason we have a folder with react components is because we have a mono repo where one of the projects uses react.

Here's the updated example project:

https://filetransfer.io/manage-package/sEVCBSE6

Do you have any ideas on how we can fix this?

Thanks!

0

Unfortunately, opening the link results in a 404 error.

0
We appreciate your cooperation in providing a test project.

I have replicated the issue and created a new ticket: https://youtrack.jetbrains.com/issue/WEB-67386. Kindly monitor this ticket for any further developments.
1

Thank you 🙏

Do you have any ideas for a workaround until the issue is fixed?

0
Unfortunately, I'm unable to provide any solutions at this time.
0

Ok, thank you!

0

Any news on this please ? I made comment about my situation on the issue:
https://youtrack.jetbrains.com/issue/WEB-67386

Same thing or worse happening to me on RustRover and it is honestly very annoying.

0

Please sign in to leave a comment.