What causes the /* empty css */ comment in place of an import statement?

[ajmiam]

I have a file (ValidationWrapper.tsx) that imports a .scss file from the same directory: import './ValidationWrapper.scss'. Normally, this scss file compiles into a css file that gets placed in the assets directory, and the tsx file gets compiled into a js file with import "../../../../assets/ValidationWrapper.css"; at the top.

However, after making several code changes to completely unrelated files in my repository, this import statement in the JS file is now being replaced with /* empty css */. Note that I did not change our vite config file, nor ValidationWrapper.tsx or .scss. ValidationWrapper.tsx is still being used, and because of this, it is no longer styled.

I looked in the code for vite-plugin-lib-inject-css, the plugin we use to generate the individual css files and import statements, and it does not seem to be responsible for producing this /* empty css */ comment. So why is vite doing so, and how can I prevent it?

I cannot supply the repository where I'm getting the error because it is proprietary and large, and I cannot narrow down exactly what code change caused the problem, so I will not be able to provide a small reproducible example. However, I can provide my vite.config.js file to see if anyone has an idea what might be going wrong:

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/**/*'],
});