[css-cascade-4] [css-values-4] `@import` should be able to use Import Maps

[argyleink]

Javascript imports can now be managed easier with Import Maps, a very welcomed feature for the web community. I propose being able to add entries to this map and use them from CSS @import. Feature matching CSS and JS imports.

Use case / example

Given the following import map:

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.1.2/",
    "$design-system": "https://unpkg.com/open-props"
  }
}

In JS (works today):

import OpenProps from '$design-system/open-props.module.js'

In CSS (proposed feature alignment):

@import "$design-system/open-props.min.css" layer(design.system);

[SebastianZ]

This sounds very reasonable to me. Import maps should be available throughout the stack.

Though given that CSS Cascade 4 is already at CR stage, I assume this would rather be part of level 5 of the spec.

Sebastian

[DianaOlympos]

note that at this point, this is getting closer to "fetch-maps".

This would also be particularly useful if it was extended to fonts and images. The use case is well explained in this thread, https://discourse.wicg.io/t/proposal-fetch-maps/4259

It is on my personal Wishlist for browser and CSS indeed. It would make a lot of work on the assets compilation side easier, especially for websites that are mostly SSR.