[Bug]: External CSS file for lit crashes with "does not provide an export named 'default'"

Describe the bug

We use Lit with shadow DOM and we use external stylesheets that we import using import styles from './button.css?lit-css' To achieve this, we added the appropriate configuration for Typescript and Vite. Unfortunately due to the .css extension that is handled somewhat magically in Storybook, we get the error. Please change the way Storybook handles css and pcss files to handle lit components like ours.

Reproduction link

https://github.com/johan-gorter/storybook-lit-css-issue

Reproduction steps

1. Start storybook and view the Button story
2. The syntax error occurs

System

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD <----- active
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.5.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.98)
  npmPackages:
    @storybook/addon-essentials: ^8.2.9 => 8.2.9
    @storybook/addon-links: ^8.2.9 => 8.2.9
    @storybook/blocks: ^8.2.9 => 8.2.9
    @storybook/test: ^8.2.9 => 8.2.9
    @storybook/web-components: ^8.2.9 => 8.2.9
    @storybook/web-components-vite: ^8.2.9 => 8.2.9
    storybook: ^8.2.9 => 8.2.9
  npmGlobalPackages:
    storybook: 8.1.2

Additional context

We are currently replacing ?lit-css with ?raw&lit-css which does work (see previous commits). We think the raw is actually confusing, because we are also using postcss.

It would also be nice to have the default lit template use the shadow DOM, so it looks like a bit more like the examples on https://lit.dev/.