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

[emosheeep]

Have you resolved this problem? I just noticed this issue 🌚.

[danijezernik]

Yeah same here... We are working with Vue decupled blockes and we also have this problem with css. It has happend on 19th Nov and i don't know is that just a coincidence or what... We get this css injection in JavaScript after npm run build but css on Drupal is now showing:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteExternalsPlugin } from "vite-plugin-externals";
import { glob } from "glob";
import { extname, relative, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    cssInjectedByJsPlugin(),
    // We don't want to double load Vue so set it to use the external package
    // already provided by Drupal.
    // https://github.com/crcong/vite-plugin-externals
    viteExternalsPlugin(
      {
        vue: "Vue",
      },
      { disableInServe: true },
    ),
  ],
  define: {
    // Define Vue Feature Flags
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, // Disable detailed hydration mismatch details
    // Add other feature flags here if needed
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/main.scss";`,
        quietDeps: true, // Suppress warnings for Dart Sass: https://sass-lang.com/documentation/js-api/interfaces/options/#quietDeps
        silenceDeprecations: ["legacy-js-api"], // https://sass-lang.com/documentation/breaking-changes/legacy-js-api/
      },
    },
  },
  build: {
    rollupOptions: {
      external: ["vue"],
      input: Object.fromEntries(
        glob
          .sync("src/**/*.{ts,vue}", { ignore: "src/**/*.d.ts" })
          .map((file) => [
            relative("src", file.slice(0, file.length - extname(file).length)),
            fileURLToPath(new URL(file, import.meta.url)),
          ]),
      ),
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `chunks/[name].[hash].js`,
        assetFileNames: `[name].[ext]`,
      },
    },
  },
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
});