Incorrectly generated styles only in production build

[j2443070]

Hi,

In production i am getting styles with @keyframes instead of classes (eg. @keyframes go1475592160 instead of .go1475592160):

<style id="_goober"> @keyframes go1475592160{height:0;}@keyframes go1671063245{height:auto;}@keyframes go1888806478{display:flex;flex-wrap:wrap;flex-grow:1;@media (min-width:600px){flex-grow:initial;min-width:288px;}}@keyframes go167266335{background-color:#313131;font-size:0.875rem;line-height:1.43;letter-spacing:0.01071em;color:#fff;align-items:center;padding:6px 16px;border-radius:4px;box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);}@keyframes go3162094071{padding-left:20px;}@keyframes go3844575157{background-color:#313131;}@keyframes go1725278324{background-color:#43a047;}@keyframes go3651055292{background-color:#d32f2f;}@keyframes go4215275574{background-color:#ff9800;}@keyframes go1930647212{background-color:#2196f3;}@keyframes go946087465{display:flex;align-items:center;padding:8px 0;}@keyframes go703367398{display:flex;align-items:center;margin-left:auto;padding-left:16px;margin-right:-8px;}@keyframes go3963613292{width:100%;position:relative;transform:translateX(0);top:0;right:0;bottom:0;left:0;min-width:288px;}@keyframes go1141946668{box-sizing:border-box;display:flex;max-height:100%;position:fixed;z-index:1400;height:auto;width:auto;transition:top 300ms ease 0ms,right 300ms ease 0ms,bottom 300ms ease 0ms,left 300ms ease 0ms,max-width 300ms ease 0ms;pointer-events:none;max-width:calc(100% - 40px);.notistack-CollapseWrapper{padding:6px 0px;transition:padding 300ms ease 0ms;}@media (max-width:599.95px){width:100%;max-width:calc(100% - 32px);}}@keyframes go3868796639{.notistack-CollapseWrapper{padding:2px 0px;}}@keyframes go3118922589{top:14px;flex-direction:column;}@keyframes go1453831412{bottom:14px;flex-direction:column-reverse;}@keyframes go4027089540{left:20px;@media (min-width:600px){align-items:flex-start;}@media (max-width:599.95px){left:16px;}}@keyframes go2989568495{right:20px;@media (min-width:600px){align-items:flex-end;}@media (max-width:599.95px){right:16px;}}@keyframes go4034260886{left:50%;transform:translateX(-50%);@media (min-width:600px){align-items:center;}}</style>

and there are no styles applied to component.

In dev run everything seems ok:

<style id="_goober"> .go1475592160{height:0;}.go1671063245{height:auto;}.go1888806478{display:flex;flex-wrap:wrap;flex-grow:1;}@media (min-width:600px){.go1888806478{flex-grow:initial;min-width:288px;}}.go167266335{background-color:#313131;font-size:0.875rem;line-height:1.43;letter-spacing:0.01071em;color:#fff;align-items:center;padding:6px 16px;border-radius:4px;box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);}.go3162094071{padding-left:20px;}.go3844575157{background-color:#313131;}.go1725278324{background-color:#43a047;}.go3651055292{background-color:#d32f2f;}.go4215275574{background-color:#ff9800;}.go1930647212{background-color:#2196f3;}.go946087465{display:flex;align-items:center;padding:8px 0;}.go703367398{display:flex;align-items:center;margin-left:auto;padding-left:16px;margin-right:-8px;}.go3963613292{width:100%;position:relative;transform:translateX(0);top:0;right:0;bottom:0;left:0;min-width:288px;}.go1141946668{box-sizing:border-box;display:flex;max-height:100%;position:fixed;z-index:1400;height:auto;width:auto;transition:top 300ms ease 0ms,right 300ms ease 0ms,bottom 300ms ease 0ms,left 300ms ease 0ms,max-width 300ms ease 0ms;pointer-events:none;max-width:calc(100% - 40px);}.go1141946668 .notistack-CollapseWrapper{padding:6px 0px;transition:padding 300ms ease 0ms;}@media (max-width:599.95px){.go1141946668{width:100%;max-width:calc(100% - 32px);}}.go3868796639 .notistack-CollapseWrapper{padding:2px 0px;}.go3118922589{top:14px;flex-direction:column;}.go1453831412{bottom:14px;flex-direction:column-reverse;}.go4027089540{left:20px;}@media (min-width:600px){.go4027089540{align-items:flex-start;}}@media (max-width:599.95px){.go4027089540{left:16px;}}.go2989568495{right:20px;}@media (min-width:600px){.go2989568495{align-items:flex-end;}}@media (max-width:599.95px){.go2989568495{right:16px;}}.go4034260886{left:50%;transform:translateX(-50%);}@media `(min-width:600px){.go4034260886{align-items:center;}}</style>

I have not found a similar situation unfortunately, maybe someone can point me in the direction? Thanks in advance.

I am using vitejs, below is package.json and vite.config

"dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.9.3",
    "axios": "^0.27.2",
    "i18next": "^22.4.9",
    "i18next-browser-languagedetector": "^7.0.1",
    "lodash.clonedeep": "^4.5.0",
    "notistack": "^3.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.3",
    "react-i18next": "^12.1.4",
    "react-lazy-load-image-component": "^1.5.5",
    "react-router-dom": "^6.8.2",
    "react-social-login-buttons": "^3.9.1",
    "react-swipeable-views-react-18-fix": "^0.14.1",
    "react-window": "^1.8.8",
    "reactjs-social-login": "^2.6.3",
    "recoil": "^0.7.7",
    "simplebar-react": "^2.4.3",
    "swiper": "^9.4.1",
    "swr": "^2.0.1",
    "typescript": "^5.3.2"
  },
  "devDependencies": {
    "@types/lodash.clonedeep": "^4.5.7",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@types/react-lazy-load-image-component": "^1.5.2",
    "@types/react-window": "^1.8.5",
    "@vitejs/plugin-react": "^2.0.0",
    "sass": "^1.54.2",
    "ts-css-modules-vite-plugin": "^1.0.20",
    "vite": "^3.0.0",
    "vite-plugin-compression": "^0.5.1"
  }

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteCompression from "vite-plugin-compression";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    viteCompression({
      algorithm: "brotliCompress",
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  css: {
    modules: {
      localsConvention: "camelCase",
    },
    preprocessorOptions: {
      scss: {
        // additionalData: `@use "@/styles/index.module.scss" as common;`,
        importer(...args) {
          if (args[0] !== "@/styles/index.module.scss") {
            return;
          }

          return {
            file: `${path.resolve(__dirname, "./styles")}`,
          };
        },
      },
    },
  },
  build: {
    outDir: "../public_html/dist/react",
    rollupOptions: {
      chunkFileNames: "[build].js",
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`,
      },
    },
  },
  envDir: "./",
  server: {
    open: "http://127.0.0.1:5173/",
  },
});

Tech	Version
Notistack	v3.0.1
React	18.2.0