I am using the app router and typescript. have a button component like so in /ui/button.tsx.

import styles from "./button.module.css";

export function Button({
  children,
  variant = "primary",
  size = "medium",
  ...props
}: {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "neutral" | "danger";
  size?: "small" | "medium" | "large";
} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      className={`${styles.button} ${styles[variant ?? "primary"]} ${
        styles[size ?? "medium"]
      }`}
      {...props}
    >
      {children}
    </button>
  );
}

For some inexplicable reason, my styles stopped working on the button. Renaming both the import and the file to butto.module.css fixed it, but on a full page refresh its broken again. Tried restarting the dev server, deleting .next, and more, and i have no idea whats wrong. The class names seem to be applied correctly but the styles just arent there.