esbuild-css-modules-plugin icon indicating copy to clipboard operation
esbuild-css-modules-plugin copied to clipboard

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

Open imjared opened this issue 1 year ago • 1 comments

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

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 avatar Aug 25 '22 12:08 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?

imjared avatar Aug 25 '22 14:08 imjared