How to prevent class name conversion BEM => camelCase using v2

[imjared]

I'm working on upgrading a legacy codebase to leverage esbuild + css modules. A lot of old class names are in the BEM syntax and when they get run through esbuild, they get modified from something like field--highlight to fieldHighlight. In places where we try to reference these or call them dynamically with React's classnames module, we can't find the classes we're looking for since they've been camelCased.

We wind up with undefined classes in the following example:

import fieldStyle from "./field.module.css";

const classes = classnames({
    [fieldStyle['field__block']]: true,
    [fieldStyle[`field--${variation}`]]: true,
})

Logging out the value of console.log(fieldStyle) shows me classes such as the below screenshot. Is there something I'm missing? It seems like BEM is slightly antithetical to CSS modules but I would expect to still be able to call classes in the above format.

If I'm reading correctly, it seems like I should be able to preserve names by changing localsConvention but we're also leveraging the v2: true flag and it seems by doing so, the localsConvention option doesn't work.

Based on this example in the parcel playground, it seems like this functionality should work.

This seems similar but not quite the same as https://github.com/indooorsman/esbuild-css-modules-plugin/issues/37 so I wanted to open a new issue.

[imjared]

Dove in a bit more here and it actually looks like the camelcasing is baked in to v2. https://github.com/indooorsman/esbuild-css-modules-plugin/blob/37db4608bad5891fb93e9d142aae339c761c6908/lib/plugin.js#L57-L62

Is there a way to leverage something like the localsConvention from v1?

[markdalgleish]

I've run into the same issue. I'm happy to open a PR if we can agree on the desired behaviour.

As @imjared said, would it make sense to honour the localsConvention option from v1? Since the default behaviour right now in v2 is to convert all locals to camel case, would it also make sense to add an explicit "none" option for localsConvention so that you can opt out entirely in v2?

Related to this, how would we handle named exports when localsConvention is set to none and the local name isn't a valid JS identifier, e.g. .some-hyphenated-class? Do we omit it? Forcibly convert it to camel case but only for the named export?

[indooorsman]

you can try the dev version by

npm i esbuild-css-modules-plugin@v3-dev

it supports keep the origin class name :

https://github.com/indooorsman/esbuild-css-modules-plugin/blob/80cc0641b28e05ff67666c6b19200a1dc93e4b32/index.d.ts#L20

but may be buggy since I haven't did full testing 😂 I would really appreciate it if you could try it out and give feedback