Using import for non JavaScript modules

[thescientist13]

Overview

As tracked in a couple issues, some already attempted there is some precedences / interest being able to use ESM for assets that are not JavaScript modules.

• plugin-import-css
• have a plugin for being able to import JSON using ESM #516

⚠️ Need to find a resolution to #620 first

As this is definitely not a standard, any of these instances would have to be supported in a consistent way. This discussion is for that API.

Examples

The below are some examples of what this could look like

CSS

/styles/card.js

.card {
  color: red;
}

would be returned as

const css = '.card { color: red; }';

export default css;

and used as, say with LitElement#styles

import css from '/styles/styles.css';

console.log(css); // ' .card { color: red; }';

Being tracked in #923

JSON

/assets/data.json

{
  "status": 200,
  "message": "Hello World"
}

Would be resolved as

export default {
  "status": 200,
  "message": "Hello World"
}

and used as

import json from '/assets/data.json';

console.debug(json.status); // 200

Proposal

I think being explicitly is better than being implicit as we do with plugin-import-css and using header detection, because as discovered for JSON, won't change. Headers will be the same in either using fetch or import.

Taking some influence from import assertions, I propose something like I introduced in , which we needed just to keep certain things working since the bug really needed to get fixed.

The solution would require adding ?type=xxx to the end of any request
ex.

import json from '/assets/data.json?type=json';

console.debug(json.status); // 200

Questions

1. I suppose we would want to "backport" this solution to plugin-import-css ?
2. Should this apply to JavaScript, like plugin-import-commonjs ?
3. Update have a plugin for being able to import JSON using ESM #516 with final approach

[thescientist13]

Looks like import assertions are picking up traction, which is effectively the gateway / stepping stone we are looking for here. 👀 🤞
rollup/rollup#3799

[thescientist13]

CSS / JSON modules Spec!
https://twitter.com/argyleink/status/1403450416482816000
https://twitter.com/justinfagnani/status/1403436100132110340

[thescientist13]

On the topic of CSS modules, some interesting threads

• https://twitter.com/_developit/status/1427735793796325376 (usage examples with constructible style sheets)
• CSS modules support in es-modules-shims - https://twitter.com/guybedford/status/1428451066081730561

[thescientist13]

Created an issue for CSS Modules in Greenwood - #923

[thescientist13]

Some good convos happening over in the Rollup repo

[thescientist13]

I think a lot of this is now being tracked in formal issues like #923