Static asset imports could play nicer with other tools

[aaronadamsCA]

Today I'm importing a lot of static assets like this:

import styles from "./styles.css?raw";

const { default: styles } = await import("./styles.css?raw");

Because of the ?raw search parameter, tools like TypeScript and ESLint don't actually understand these imports, so I lose a lot of conveniences: autocompleting imports, highlighting invalid ones, automatically updating when target files are renamed, Cmd + click to open source files, etc. etc.

I'd love to see a new syntax that uses import attributes, which I'm assuming would give me back all of those conveniences. Maybe it could look similar to how import.meta.glob already works, e.g.:

import styles from "./styles.css" with { query: "?raw" };

const { default: styles } = await import("./styles.css", {
  with: { query: "?raw" },
});

Sorry if there's an existing discussion about this, but I can't find a thing so far.

[sapphi-red]

Yeah, we are exploring utilizing import attributes.

The current blockers for us are:

• Supporting multiple modules corresponding to the same id but with a different import attributes rollup/rollup#5694
• Ambient Module Declarations for Import Attributes (formerly known as Import Assertions) microsoft/TypeScript#46135

It might take a bit long.