Import Attributes

[thescientist13]

Description

Taken from #436

Import attributes are a way to import JSON and CSS modules in JavaScript. (and potentially more in the future)

import data from './my-data.json' with { type: 'json' };
import sheet from './my-styles.css' with { type: 'css' };

They would help enable cross-related Interop requests at a foundational level and would provide a full suite of capabilities in one go if prioritized for Interop 2025 all together 🤩

• JSON Module Scripts #705
• CSS Module Scripts #703

Specification

TC39

Additional Signals

Chrome has already moved from the previous assert syntax to the with syntax, and both JSON and CSS modules are supported in Chrome as well.

All browsers are already supportive of CSS and JSON modules.

This has been highly requested in prior interops

• import attributes / JSON modules / CSS modules #436
• Import Assertions #236

[gsnedders]

https://wpt.fyi/results/html/semantics/scripting-1/the-script-element/import-attributes?label=master&label=experimental&aligned for the very basic level

[thescientist13]

Yay, TC39 just moved Import Attributes and JSON Modules to Stage 4!

Congrats to @NicoloRibaudo on advancing both Import Attributes & JSON Modules to Stage 4 at @TC39 today 🎉

It introduces the with keyword for imports. Chrome successfully unshipped the assert keyword 👍