How to import a CSSStyleSheet?

[leonheess]

Describe the bug

import sheet from './styles.css' with { type: 'css' }; // ❌ vite error

document.adoptedStyleSheets = [sheet];

import sheet from './styles.css?inline' with { type: 'css' };

document.adoptedStyleSheets = [sheet]; // ❌ error: sheet is not a CSSStyleSheet. It's a string.

Reproduction

https://stackblitz.com/edit/vitejs-vite-v6dufd

System Info

System:
    OS: macOS 14.6.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 1.45 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - ~/.volta/tools/image/node/21.7.3/bin/node
    npm: 10.5.0 - ~/.volta/tools/image/node/21.7.3/bin/npm
    pnpm: 8.15.9 - ~/.volta/tools/image/pnpm/8.15.9/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.117
    Safari: 17.6
  npmPackages:
    @vitejs/plugin-vue: 5.1.4 => 5.1.4 
    vite: 5.4.10 => 5.4.10

Used Package Manager

pnpm

[rschristian]

As far as I am aware, this isn't built in. You'd need to do that yourself in user-code, or find/write a plugin to do it automatically.

Ex:

import styleContent from './styles.css' with { type: 'css' };

const sheet = new CSSStyleSheet();
sheet.replaceSync(styleContent);

[hi-ogawa]

This is not supported yet. Closing as a duplicate of #17700