this.getModuleInfo(id).attributes is empty

[vdegenne]

In rollup I use this type of logic in my plugins

transform(code, id) {
  const info = this.getModuleInfo(id)
  if (info?.attributes?.type === 'css') {
    // ...
    return {
      code: modifiedCode
    }
  }
}

So for instance the following .ts file:

import ss from './stylesheet.css' with {type: 'css'}

// ...

will get transformed to

<modifiedCode>

// ...

But in Vite not only with seems to be unrecognized (and throws) but if I use the old-fashioned assert e.g.

import ss from './stylesheet.css' assert {type: 'css'}

then this.getModuleInfo(id).attributes in my plugin contains nothing.

I remember like 2 years ago that was an issue, and it's still there!

Why is Vite devs taking so long to implement these modern tools??

[sapphi-red]

Short answer:
Supporting import attributes requires significant changes to the API. TypeScript doesn't fully support them yet, and we've had other priorities. We will likely start working on it next year, though there is no promise.

Long answer:
Import attributes reached Stage 3 in March 2023. At that time, we did not prioritize supporting them because downstream projects had not adopted them yet. When the proposal reached Stage 4 in October 2024, we looked at it again. TypeScript still did not fully support it (microsoft/TypeScript#46135), and Rollup also lacked full support (rollup/rollup#5694).

Implementing this feature in Rollup would require major changes, and the status of those issues has not changed.

Meanwhile, we have been working on Rolldown to solve some problems in Vite (see the integration guide for more details). While we cannot actively push progress on the TypeScript side, after we complete the migration to Rolldown, which is expected around the end of this year, we will likely have the capacity to work on import attribute support sometime next year.