CSS Files in DevTools Inspector Contain JavaScript and Appear Duplicated

I'm encountering a strange issue in Chrome DevTools (Inspector) while debugging my project. The CSS files are not clean—many of them contain JavaScript code inside, and some CSS files appear to be duplicated with even more JavaScript injected into them.

What I Have Tried:

• Checked the actual source files in my project directory → They contain only valid CSS.
• Disabled all browser extensions → The issue persists.
• Hard-reloaded the page (Ctrl+Shift+R) and cleared the cache → No change.
• Examined the network tab in DevTools → The CSS files appear to be requested correctly, but in the Sources tab, they contain JavaScript code.
• Looked for Webpack or Vite transformations that could be causing this issue, but I didn't find anything suspicious.

My Project Setup:

• Frontend: React.js (with Vite/Webpack as the bundler)
• Backend: Java EE 10 (serving static assets)
• Dev Environment: Chrome (latest), Windows/Linux

Questions:

1. Why do my CSS files in the DevTools Inspector contain JavaScript?
2. Why are the CSS files duplicated with even more JavaScript inside?
3. Could this be caused by my build system (e.g., Webpack, Vite, or server-side transformations)?

Any help or suggestions on how to debug this would be greatly appreciated!

Devtool Inspector

import webpack from 'webpack';
import path from 'path';
import HtmlPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin'

export default {
    entry: './src/index.tsx',
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve('build'),
        clean: true,
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
                type: "asset",
            },
            {
                test: /\.(js|mjs|jsx|ts|tsx|css)$/,
                use: ['source-map-loader']
            }
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    devServer: {
        hot: true,
        port: 3000,
        open: true,
        historyApiFallback: true,
        proxy: [
            {
                context: ['/service'],
                target: 'http://localhost:8080',
            },
        ],
    },
    plugins: [
        new HtmlPlugin({
            template: 'public/index.html',
            filename: 'index.html'
        }),
        new CopyWebpackPlugin({
            patterns: [
                {from: 'public/assets', to: 'assets'},
            ],
        }),
        new webpack.DefinePlugin({
            "process.env.PUBLIC_URL": JSON.stringify("/"),
        })
    ]
}