Description

When attempting to spin up a Vite project using the @lwc/rollup-plugin, the CSS imports in the html template are not resolved as imports, but imported as strings (causing the @lwc/compiler to fall over).

I am aware this might not be a LWC specific issue but potentially a bigger issue with the way Vite handles HMR imports. Happy to close this if this issue is not directly caused by something the LWC compiler is doing.

Steps to Reproduce

https://stackblitz.com/edit/salesforce-lwc-vite-css-error?file=vite.config.js

// vite.config.js
import { defineConfig, normalizePath } from 'vite'
import { resolve } from 'path'
import lwc from '@lwc/rollup-plugin'

const rootDir = normalizePath(resolve('./'))
console.log('rootDir ', rootDir)

export default defineConfig({
  rootDir,
  input: './src/main.js',

  build: {
    rollupOptions: {
      rootDir: './',
      input:  'src/main.js',

      output: {
        file: 'dist/main.js',
        format: 'esm',
      },
    },
  },

  // enforce: 'pre',
  plugins: [
    lwc({
      rootDir,
      exclude: ["**/*.mjs"]
    }),
  ],
})

Minor semi-related bug is Vite complaining about default CSS imports:

! Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import _implicitStylesheets from "./counter.css?inline

Expected Results

CSS files are imported correctly as functions so the template can render the actual CSS for the LWC.

Actual Results

-! Uncaught TypeError: CreateListFromArrayLike called on non-object

Version

lwc: 2.41.0
Node: v16.14.2

Possible Solution

May require some sort of Vite/Rollup plugin to transform the imports? Not too sure how tightly coupled the issue is to the lwc compiler.

Additional context/Screenshots