esbuild-css-modules-plugin
esbuild-css-modules-plugin copied to clipboard
How to prevent class name conversion BEM => camelCase using v2
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.
![image](https://user-images.githubusercontent.com/525011/186658097-b75fbfa7-4cf1-43ab-9f17-8c43b8f84d72.png)
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.
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?