css.module update triggers a full page refresh

[snake-py]

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: ['..']
    }
  }
});

[brillout]

Duplicate of https://github.com/vikejs/vike/issues/1127.

[snake-py]

@brillout but I couldn't reproduce it with vanilla vite, or am I missing something? Is there a workaround for this?

[snake-py]

Or do you know of a vite issue which I can look at or has this not been reported yet?

[brillout]

https://github.com/vikejs/vike/issues/1127#issuecomment-1725840225 is the latest insight from my side.