feature/issue 923 native import attributes for CSS and JSON

[thescientist13]

Related Issue

resolves #923

Summary of Changes

1. Add support for Import Attributes for JSON / CSS inside the CLI and added test cases
2. Had to add a preIntercept lifecycle hook for Resource plugins (for PostCSS to run prior to Greenwood transforming the CSS. Also updated Babel plugin to use it)
3. Created a "raw" plugin to support legacy import behaviors
4. Update minimum Node version to be 18.20.0
5. Had to adjust ESLint based on markdown plugin not working with custom parsers 😢 - Doesn't work with custom parser eslint/markdown#221
6. Rename custom loaders naming convention from exp-* -> loaders-* and updated GitHub actions and the like accordingly

TL;DR

Without any plugins, you will be able to do this in Greenwood automatically

import sheet from './some.css' with { type: 'css' }; // you will get back a Constructable Stylesheet
import data from './some.json' with { type: 'json' }; // you will get back a JSON object

See #1216 for future thoughts / enhancements

TODO

1. Fix failing build (patch package failing to patch changes)
2. Restore ESLint (it doesn't support Import Attributes yet)
3. Windows tests are now failing (seems to be fine when running locally on parallels 🤔 )
   
4. Pattern for establishing import attributes in resource plugins as a request + header and / or URL + query params - Isomorphic (Reflected) Import Attributes Support #1216
   • Can / should greenwood convert import attributes to query params or some other signal from the browser that it is an fetch / ESM request
   • type=??? - query params are bad for node / URLs
   • fetch-sec-dest header is supported in all browsers now! - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Dest
   • refactor all standard plugins to follow the new convention
5. what is the right Content-Type to return for an import attribute? - Isomorphic (Reflected) Import Attributes Support #1216
   • Support query parameters (and hash) in CLI paths nodejs/node#33163
6. Create a "raw" / text import plugin for backwards compat or to import anything as just a string
   • initial implementation
   • package.json / README
   • test cases (+matchers)
   • resolve / rewrite refactor and remove patch for eve-container.css
7. Figure out support policy for non-standard imports, e.g. import css from './eve-button.css';
   • raw loader accepts a matcher option
   • should we discourage it in anyway?
8. Minimum Node version (21.x) - - Upgrade to Node 20.x (latest LTS) #1202
   • it is now unflagged in Node 18.20! - https://nodejs.org/en/blog/release/v18.20.0
9. test if we still need type !== 'json' check for greenwood-meta-import-url plugin
10. WCC Upstreams
    • Import Attributes syntax parsing wcc#153
    • Support Constructable Stylesheets (CSS Modules) in DOM Shim wcc#152
    • WCC dropping query params when loading module URLs wcc#158
    • (nice to have) expand (no-op) support of DOM shim for DOM traversal methods wcc#37
11. See if we can not require bundling for CSS / JSON through rollup at least - Isomorphic (Reflected) Import Attributes Support #1216
    • emit import attributes as assets
    • might need acornInjectPlugins for API routes and SSR pages rollup configs
12. Any custom plugins should should adopt these new conventions (using import attributes and no longer needing ?type=xxx)
    • JSX
    • GraphQL
13. Documentation
    • Scripts and Imports
    • SSR Custom Imports
      • No minimum Node version needed (now aligns with Greenwood)
      • experimental flag not needed
    • document / track native import assertions with NodeJS and Rollup
      • Import Attributes support in Acorn #1218
      • Isomorphic (Reflected) Import Attributes Support #1216
    • Add raw plugin to plugins list
    • preIntercept lifecycle for resource plugins
14. (nice to have) test with Lit renderer plugin
15. deprecate CSS / JSON import plugins and remove from website docs
16. clean up console logs / TODOs / remove demo code

Questions / Follow Up Tasks

1. rename shouldIntercept -> shouldTransform / shouldProcess?
2. Seems odd we don't actually need the acorn-import-attributes plugin for Rollup?
3. Track not needing an acorn plugin - Import Attributes support in Acorn #1218
4. Should greenwood not bundle, e.g. just return text instead of CSSStylesheet? - Isomorphic (Reflected) Import Attributes Support #1216
5. best way to stub out compilation in src/loader.js? - can worry about it later if needed
6. Is it experimental? - it is not!
   • technically yes because of NodeJS I suppose, even though the syntax isn't?
   • update test names if we consider it not experimental
7. Track an issue (or discussion) to refactor all plugins to use Sec-Fetch-Dest where applicable - leverage Sec-Fetch-Dest header for better filtering within Greenwood resource plugins #1222
8. Track HTML Modules support / HTML import cleanup - https://github.com/ProjectEvergreen/greenwood/issues/new
9. refactor duplicate loops over shouldIntercept, etc (good first issue)
10. Track a discussion on how to allow Greenwood to self-invoke custom loader flag - Self Invoking Custom Import Loader(s) #1217
11. See how would these changes impact a CSS modules plugin implementation - ProjectEvergreen/www.greenwoodjs.dev@e2e5fd2
    • CSS Modules www.greenwoodjs.dev#11
    • Should intercept plugins be expected to use an AST parser, like if user is using Constructable Stylesheets?

[thescientist13]

This just better aligns with our docs per https://www.greenwoodjs.io/guides/theme-packs/#development as it looks like in recent versions of NodeJS ls.stdout to string behaves differently apparently on Windows, hence why the tests were failing

This was working on Node 18.20.0 and GitHub Actions was running on 18.20.2 and so I think this is the issue in question
https://github.com/nodejs/node/releases/tag/v18.20.2