I'm experiencing non-determinism when deploying my Next.JS site w.r.t to CSS loading.

Locally, it looks as expected, but upon deploying, the CSS rules are missing completely. I see the element has the class attached to it, but the associating styling rules are non-existing, almost like they got dropped during build-time.

Remote

Next.Config.JS

const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
});

module.exports = withMDX({
  pageExtensions: ["js", "jsx", "md", "mdx"],
});

Component

// CSS
import Home from "../../styles/main/Home.module.css";

const Headline = () => {
  return (
    <div id={Home["main-banner"]}>
      <span>