CSS import statements replaced with /* empty css */ - but only sometimes

[ajmiam]

I'm having trouble with a vite build that uses this plugin.

A certain component file (ValidationWrapper.tsx) includes an import './ValidationWrapper.scss' statement.

Normally when I run vite, that statement transforms to import "../../../../assets/ValidationWrapper.css". However, after making some code changes elsewhere in the library I'm developing, this statement now transforms to /* empty css */. This happens even though I haven't changed this tsx or scss file, nor the vite build configuration file, and the component is still being used--as a result, when an app uses the library I built, this component is no longer styled.

I won't be able to provide a definitive example since the repository is large and proprietary and I can't tell what exactly caused the issue. However, I can include my vite.config.js file in case you might know what causes the /* empty css */ comment in general and can suggest how to fix it and why it only started happening after an unrelated code change.

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import svgrPlugin from 'vite-plugin-svgr';
import path, { extname, relative } from 'path';
import * as packages from './package.json';
import { libInjectCss } from 'vite-plugin-lib-inject-css';
import { fileURLToPath } from 'node:url';
import { glob } from 'glob';

const excludedPatterns = ['__mocks__', '.test.', 'setupTests'];

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    globals: true,
    coverage: {
      provider: 'istanbul',
      reporter: ['text', 'html'],
      exclude: ['**/node_modules/**', '**/lib/**'],
    },
    environment: 'jsdom',
    setupFiles: ['./src/setupTests.ts'],
    testFiles: ['./src/**/*.test.tsx'],
    exclude: [
      '**/node_modules/**',
      '**/lib/**',
      '**/.{idea,git,cache,output,temp}/**',
      '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
    ],
  },
  plugins: [react(), svgrPlugin(), libInjectCss()],
  build: {
    copyPublicDir: false,
    cssCodeSplit: true,
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'anonymizedName1',
      fileName: (format) => `index.${format}.js`,
      formats: ['es'],
    },
    rollupOptions: {
      external: [
        ...Object.keys(packages.dependencies),
        ...Object.keys(packages.peerDependencies),
        /__mocks__/,
        /setupTests/,
      ]
        .map((key) => [key, new RegExp(`^${key}.*`, 'i')])
        .flat(),
      input: Object.fromEntries(
        glob
          .sync('src/**/!(*.d).{ts,tsx}')
          .map((file) => {
            if (excludedPatterns.some((pattern) => file.includes(pattern))) {
              return; // Exclude this file
            }
            return [
              relative('src', file.slice(0, file.length - extname(file).length)),
              fileURLToPath(new URL(file, import.meta.url)),
            ];
          })
          .filter((i) => i),
      ),
      output: {
        dir: 'lib',
        preserveModules: false,
        chunkFileNames: 'chunks/[name].[hash].js',
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].js',
        sourcemap: true,
        globals: {
          'react/jsx-runtime': 'jsxRuntime',
          react: 'React',
          'anonymizedName2': 'anonName2',
          'anonymizedName3': 'anonName3',
          axios: 'axios',
        },
      },
      treeshake: true,
    },
  },
  exclude: ['src/core/components/**/*.test.tsx', 'src/core/__mocks__/**/*', 'coverage/**/*'],
});