React CSS module not putting in class names even though they exist

Question

I have a React component where I'm trying to style a button for my web app. I've done this countless times with other components the exact same way. For some reason, the class names are not being used in the rendered page. I use parceljs to bundle my scripts and have checked the source in the browser, the css classes exist. I have tried for hours changing things around to get it to work with no luck, so I'm reaching out to the community for ideas.

Button.tsx

import * as React from 'react'
import styles from './Button.module.css'
import cx from 'classnames'

type ButtonProps = {
  color?: 'default' | 'primary' | 'alert' | 'success'
  value: string
  onClick?: () => void
}

export const Button: React.FC<ButtonProps> = (props) => {
  const { color = 'default' } = props;
  return (
    <div className={styles.buttonContainer}> {/* part of my testing, tried wrapping everything in a div to see if the style would work */}
      <button className={cx(styles.buttonContainer, styles[color])} onClick={props.onClick}>
        <div className={styles.value}>{props.value}</div>
      </button>
    </div>
  )
}

Button.module.css

.buttonContainer {
    color: black;
}

.default {
    background: white;
    color: var(--colorBlack100);
}

.primary {
    background: var(--colorBlue80);
    color: white;
}

.alert {
    background: var(--colorAlert);
    color: white;
}

.success {
    background: var(--colorSuccess);
    color: white;
}

.buttonContainer .value {
    color: inherit;
}

index.ts - used to group all components together

...
export { Button } from './Button/Button'
...

Index.tsx - page to display it

import * as React from 'react'
import { Button } from '../Components'

const Index: React.FC = () => {
  return (
    <div>
      <Button value="Default" onClick={() => console.log("test")} color="primary" />
    </div>
  )
}

export default Index

Here is the Button div that gets rendered

<div><button class=""><div>Default</div></button></div>

Here is the css from parcel that I pull from source using Chrome dev tools, the classes exist so I know parcel is picking it up

._9p9acG_buttonContainer {
  color: #000;
}

._9p9acG_default {
  color: var(--colorBlack100);
  background: #fff;
}

._9p9acG_primary {
  background: var(--colorBlue80);
  color: #fff;
}

._9p9acG_alert {
  background: var(--colorAlert);
  color: #fff;
}

._9p9acG_success {
  background: var(--colorSuccess);
  color: #fff;
}

._9p9acG_buttonContainer ._9p9acG_value {
  color: inherit;
}

As mentioned, I've done this successfully with many other components, this is the only one acting funny and I'm at a loss.

Thank you in advance for your help.

Answer 1

I don't know why, but after deleting the files and adding each line 1 at a time and testing until it no longer worked, I found that it was the CSS class name .default that made it not work. Is this some kind of reserved word? My only other guess is that it's a bug in either parceljs or react-css-modules.