import attributes for standard module formats; CSS and JSON

[thescientist13]

Summary

Related to #606 / #878

Currently we have a plugin for being able to import CSS, but it is non standard. Luckily, there is a standard coming for this in browsers and NodeJS! Here is an example and overview

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

document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Details

Basically, what I would love to do is make this out of the box with Greenwood, or at least support it in plugin-import-css so that the plugin supports the standard syntax, and eventually, when all browser support CSS modules, user's can just stop using the plugin.

Scenarios that need to be handled:

• NodeJS
  • support resource plugin based transformations for standard module formats (ex: import JSON, CSS) for SSR #878
  • upgrade to Node v18 as minimum supported version #957
• Rollup - Plan for import assertions and non-JS module types rollup/rollup#3799
• Acorn - (see above)
• ES Module Shims - https://twitter.com/guybedford/status/1428451066081730561
• Move away from type=xxx as it breaks in NodeJS

       Error: the string "TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module \"file:///Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/packages/plugin-import-json/test/cases/exp-build.prerender/package.json?type=json\" needs an import assertion of type \"json\"\n    at new NodeError (node:internal/errors:387:5)\n    at validateAssertions (node:internal/modules/esm/assert:82:15)\n    at defaultLoad (node:internal/modules/esm/load:84:3)\n    at nextLoad (node:internal/modules/esm/loader:165:28)\n    at load (file:///Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/packages/cli/src/loader.js:67:10)\n    at load (file:///Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/test/test-loader.js:13:12)\n    at nextLoad (node:internal/modules/esm/loader:165:28)\n    at ESMLoader.load (node:internal/modules/esm/loader:608:26)\n    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:464:22)\n    at new ModuleJob (node:internal/modules/esm/module_job:63:26) {\n  code: 'ERR_IMPORT_ASSERTION_TYPE_MISSING'\n}\n" was thrown, throw an Error :)
    at processTicksAndRej

There is a a repo tracking this across bundlers as well
https://github.com/nicolo-ribaudo/import-attributes-ecosystem-support

---

If this goes well, we should try and do the same with JSON. Should also document / update any impact this may have on the Import CSS plugin.

This could also clean up the experimental loader, which should be able to just leverage native import assertions now for JSON.

Might also be worth cross-referencing with other custom resource types like TypeScript and GraphQL - #1004

---

Something to keep in mind re: Rollup support has not landed yet - rollup/rollup#4818

For at least for Rollup 3.x, looks like we could do something like this

• https://github.com/calebdwilliams/rollup-plugin-import-assert
• or hand roll using https://github.com/xtuc/acorn-import-attributes

Unfortunately that path tops out at 3.x since in 4.x they removed the ability to parse custom syntax using acorn - https://rollupjs.org/migration/#configuration-changes

So I think we'll have to:

1. Land Rollup 3.x - upgrade Rollup and all plugins to 3.x #1087
2. For this task, try and use those plugins
3. Make a tracking ticket for whenever Rollup supports import assertions

[thescientist13]

FWIW, esbuild is working on this for CSS - evanw/esbuild#20