import assertions (especially for CSS)

[dmail]

Needs to investigate how to support that (it's supported in latest chrome and edge)

https://web.dev/css-module-scripts/

Needs to find how to:

• Would rollup be able to parse them and provide that information to rollup hooks?
• Feature detect for dev server
• What would it transpile to?
• How to polyfill constructable stylesheet?

[dmail]

• A rollup plugin for import assertion: https://www.npmjs.com/package/rollup-plugin-import-assert
• A plan to support import assertion in rollup: Plan for import assertions and non-JS module types rollup/rollup#3799
• SystemJs code to css modules: https://github.com/systemjs/systemjs/blob/98609dbeef01ec62447e4b21449ce47e55f818bd/src/extras/module-types.js#L35

Things to try:

1. Enable acorn plugin for import assertion in rollup
2. Enable babel plugin to support import assertion syntax
3. Write a custom babel plugin transforming

p {
  color: red;
}

Into

const stylesheet = new CSSStyleSheet();

stylesheet.replaceSync(`p {
  color: red;
}`);

export default stylesheet;

4. Find how to enable this babel plugin ONLY when file is imported by

import sheet from './styles.css' assert { type: 'css' };

This point is problematic because it means the representation of a ressource depends how it's requested.
It means this reponsability do not belong to the server but rather the code importing the file I guess 🤔

[dmail]

So it's inside systemjs and inside rollup load transform hook that we should wrap the CSS inside an export default