import css?inline not working as expected.

[farazshuja]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

As per vite docs

import styles from './foo.css' // will be injected into the page
import otherStyles from './bar.css?inline' // will not be injected into the page

This is not working when using the crxjs plugin. In my code I have like

import vws from 'virtual:windi.css?inline';
import appCss from './app.css?inline';

But its still adding the css to Head section when running yarn dev I needed this so I can add the css by manually inside the shadow-dom to avoid collision with the global scope for css libs.

Reproduction

https://github.com/farazshuja/chrome-extension-vite-vue-starter-template/blob/0b56f5e3e2c7b2bbda61337ac107c496c0097f61/src/contentScripts/index.ts#L4-L5

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 3.50 GB / 15.73 GB
  Binaries:
    Node: 14.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.27)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14
    vite: ^2.9.15 => 2.9.15

Severity

annoyance

[jacksteamdev]

I believe this is fixed in @crxjs/vite-plugin v2.0. It's in beta right now, you can test it using:

npm i @crxjs/vite-plugin@beta -D

[A-Shleifman]

I can confirm that it's working as expected in v2 apart from broken HMR for ?inline imports #600

[sghsri]

This might be related, but the HMR doesn't work for css/sass modules either when they're declared like:

import styles from "component.module.scss

export default function Component() {
    return (<div className={styles.helloWorld}>
            <h2>Hello World</h2>
        </div>);
}