Returns undefined if the CSS property does not exist

[lazex]

[index.css]

.foo {}

[index.js]

import * as styles from "./index.css"

const name = "foo"

console.log(styles[name])

[package.json]

{
  ...,
  "@parcel/transformer-css": {
    "cssModules": true
  }
}

console.log returns undefined.

The output file is as follows:

[dist/index.js]

console.log({}.foo);
//# sourceMappingURL=index.js.map

When using postcss-modules, console.log returns foo_c58e5d.

Getting undefined doesn't affect the style, but it doesn't work properly when using the query selector.

document.querySelector(`.${styles.foo}`)

[devongovett]

Why do you need empty style rules?

[lazex]

I'm using the class name to identify the element. The style may be empty.

[devongovett]

Could you just generate a unique name in JS then? Why does it need to come from CSS?

[lazex]

I don't want many elements to have two class names generated from CSS and JS. CSS Modules generate unique names and are reusing them.