Resolving/merging @imported CSS files from CSS module imports

[ssalggnikool]

#35093 added CSS module imports (with { type: "css" }), with this, is it possible to import CSS files which use @import, then resolve those imports and merge them into one stylesheet? for instance, if you currently do this:

// input
import css from './index.css' with { type: 'css' };

the output, after being bundled with Deno.bundle, is this:

  // output, after being bundled
  // src/styles/index.css
  var sheet2 = new CSSStyleSheet();
  sheet2.replaceSync("@import './reset.css';\r\n\r\n@import './main.css';\r\n ...

but in my case, where I am bundling for a userscript being used inside a browser, those imports are broken, and I need them to instead be merged into one big string like this (assume main.css is importing fonts.css, and fonts.css contains some font @imports):

  var sheet2 = new CSSStyleSheet();
  sheet2.replaceSync(`@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap";@import"https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap";@import"https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&display=swap" ...

is this possible?

[Hajime-san]

• define behavior of @import in Cascading Style Sheet (CSS) modules WICG/webcomponents#870

The CSS module script is not supported @import currently. At present, I think the best approach is to handle this using plugins for module bundler client like Vite, not Deno.