Repository: vikejs/vike

Issue #1127: HMR not working for CSS Modules
Created: 2023-09-18T20:49:03Z
Reproduction: https://github.com/brillout/vite-plugin-ssr-mvp.
(Failed reproduction using vanilla Vite with SSR: https://github.com/brillout/vite-bug-hmr-css-modules — it fails to reproduce because it doens't have any *.module.css?direct module.)
(Vanilla Vite without SSR working example: #261 (comment).)

Duplicate issue #1809: css.module update triggers a full page refresh
Created: 2024-08-16T09:29:54Z
Description
Hey,
we are considering to switch over to scss.modules/css.modules. I created a vite react app and a vike react app.
Issue: When using css.module with vike the full page reloads and all state is lost, compared to vite where this works.
To reproduce:

check out the repository
run dev
hit the counter to update state
change css code in module
all state is lost

I also post here my vite configs, but since this also happening with a fresh project, I think this is something from vike?
Here are my project configs:
/// <reference types="vitest" />

import react from '@vitejs/plugin-react';

import autoprefixer from 'autoprefixer';
import path from 'path';
import cssMini from 'postcss-minify';
import ssr from 'vike/plugin';
import { defineConfig } from 'vitest/config';

console.log(process.env.IS_STORYBOOK ? 'Vite uses plugin set for storybook' : 'Vite uses plugin set for app');

const plugins = process.env.IS_STORYBOOK
  ? [react()]
  : [
      react(),
      ssr({
        prerender: true
        
      })
    ];

// https://vitejs.dev/config/
export default defineConfig({
  plugins,
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/tests/setup.ts'],
    exclude: ['**/node_modules/**', '**/dist/**', '**/coverage/**', '**.stories**', '**.types**'],
    reporters: ['default', 'junit'],
    outputFile: {
      junit: 'coverage/junit.xml'
    },
    coverage: {
      all: true,
      provider: 'istanbul',
      reporter: ['cobertura', 'html']
    }
  },
  css: {
    //   preprocessorOptions: {
    //     scss: {
    //       additionalData: `
    //         @use "@themes/breakpoints.module" as *;
    //         @use "@themes/{client}/colors.module" as *;
    //         @use "@themes/{client}/custom.module" as *;
    //       `
    //     }
    //   },
    postcss: {
      plugins: [autoprefixer(), cssMini()]
    }
  },
  resolve: {
    alias: {
      '#': path.resolve(__dirname, './src'),
      '#api': path.resolve(__dirname, './src/api'),
      '#components': path.resolve(__dirname, './src/UI/components'),
      '#layouts': path.resolve(__dirname, './src/UI/layouts'),
      '#pages': path.resolve(__dirname, './src/pages'),
      '#providers': path.resolve(__dirname, './src/providers'),
      '#widgets': path.resolve(__dirname, './src/UI/widgets'),
      // NOTE: fix ERROR: [plugin: vite:dep-pre-bundle] No known conditions for "./native" specifier in "msw" package during storybook build
      'msw/browser': require.resolve(path.resolve(__dirname, './node_modules/msw/lib/browser/index.mjs')),
      // NOTE: fix ERROR: No known conditions for "./browser" specifier in "msw" package
      'msw/native': require.resolve(path.resolve(__dirname, './node_modules/msw/lib/native/index.mjs')),
      '@themes': path.resolve(__dirname, './src/themes')
    }
  },
  ssr: {
    noExternal: ['primereact']
  },
  build: {
    sourcemap: 'inline',
    target: 'esnext'
  },
  // we need server here to serve static files from one level up to the project root
  server: {
    fs: {
      strict: false,
      // Allow serving files from one level up to the project root
      allow: ['..']
    }
  }
});

Closing comment (2024-08-16T09:39:20Z): Duplicate of #1127.