Skip to content

CSS imported using ?inline incorrectly returns module mock #3954

@thebanjomatic

Description

@thebanjomatic

Describe the bug

As per the vite documentation, css imports can have an inline query parameter that changes the semantics of the import such that the css will not be added to the page, and the css contents will be returned as a string on the default export.

I have code that is essentially doing something like the following simplified reproducer below. In the current release of vitest, this produces an error because you can't assign the Proxy object returned by vitest to textContent as it is expecting a string.

Reproduction

import cssText from './test.module.css?inline'

const styleElement = document.createElement('style');
styleElement.textContent = cssText;
document.head.append(styleElement);

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 11.53 GB / 31.64 GB
  Binaries:
    Node: 18.17.1 - ~\AppData\Local\Volta\tools\image\node\18.17.1\node.EXE
    Yarn: 3.6.1 - ~\AppData\Local\Volta\tools\image\yarn\1.22.19\bin\yarn.CMD
    npm: 9.8.1 - ~\source\vue3-basic-lib-example\node_modules\.bin\npm.CMD
    pnpm: 8.6.12 - C:\Program Files\Volta\pnpm.EXE
  Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (115.0.1901.188)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-vue: ^4.2.3 => 4.2.3
    @vitest/coverage-v8: ^0.32.0 => 0.32.4
    vite: ^4.3.9 => 4.4.8
    vitest: ^0.34.1 => 0.34.1

Used Package Manager

yarn

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions