Emmet: Support for CSS modules in jsx/tsx (bump @emmetio/abbreviations to >2.4.0)

[stefan-enveritas]

A new emmet release supports abbreviations, such that dev.foo resolves to <div className={styles.foo} instead of <div className="foo">.

The change was released with Emmet v2.4.0 — See also: emmetio/emmet#589

It would be great if vscode could support this new feature as well.

[rzhao271]

We are on Emmet 2.4.x now.

[roblourens]

How do you configure this?

[rzhao271]

We can test the new default behaviour for now.

1. Open a JSX file.
2. Type div..test or just ..test and expand the abbreviation.
3. Confirm that <div styleName={styles.test}></div> shows up. This behaviour aligns with Support for css modules in jsx/tsx emmetio/emmet#589 (comment)

[danmiles]

I would appreciate help on how to change
styleName to className?

When I write ..test it gives

<div styleName={styles.test}></div>

[rzhao271]

Hi @danmiles, thanks for asking!
I tried adding some steps, but then noticed that @vscode/emmet-helper didn't actually support the new properties. I'll re-open this issue due to lack of proper support of the upstream feature.

[rzhao271]

Moving this issue to the next month. There seems to be an issue with the way emmet merges some configs that I'll either have to work around or fix upstream.

[rzhao271]

The fix has not been released yet. It should be available on Insiders starting on Monday.

1. Configure the emmet.syntaxProfiles setting as follows

"emmet.syntaxProfiles": {
	"jsx": {
		"markup.attributes": {
			"class*": "className",
		},
		"markup.valuePrefix": {
			"class*": "styles"
		}
	}
}

2. In a JSX file, expand the abbreviations .test and ..test.
3. .test should expand to <div className="test"></div> and ..test should expand to <div className={styles.test}></div>.

CC @danmiles