Emmet: How to change jsx className behavior for css-modules

[midgethoen]

I'm trying to alter the behavior of emmet for classes in jsx to use a css module rather than a string:

| abr | current | desired |
|---|---|---|
| div.a | <div className="a"></div> | <div className={styles.a}></div> |

However, I can't seem to figure out how to achieve this. as for as I understand I need a custom filter to do this. and I'm not even sure if custom filters are possible.

Is somebody able to point me in the right direction?

[midgethoen]

so I overlooked this sentence in the docs:

Each .js file located in extensions folder will be loaded and executed on plugin start-up. Use js files to create your own filters or actions: you can use Emmet modules and bindings to script your editor with JavaScript.

I'm now trying to get this to work

[midgethoen]

So I'm using emmet as part of vscode. And although it does support configuring an extensionPath.
it only loads snippets.json and syntaxProfiles.json..

Which took me a while to figure out 😕

so I guess im moving on to trying to understand how emmet integration works in vscode specifically

[kebot]

Any update for this? I just moved from Atom, and in Atom you have that plugin: https://github.com/ambethia/emmet-jsx-css-modules

[Moretai]

@midgethoen do you fix this in vscode?

[mohammedgqudah]

Any updates?

[sergeche]

Will try to add this feature in updated Emmet version

[wunnle]

Any updates on this?

[sergeche]

Since I’m finishing Emmet 2 implementation, let’s continue discussion here: https://github.com/emmetio/emmet/issues/589