Chore/issue 532 esm upgrade

[thescientist13]

Related Issue

resolves #532

Summary of Changes

1. Migrated most CLI / commands to ESM, and develop and build tasks are working
2. As per make all exports explicit by making them named exports #551 , started transitioning to named exports for all but config files
3. Upgraded ESLint / Stylelint / PostCSS config to be ESM compatible (currently need two postcss configs right now)

Merge / Alpha Release Plan

I think given the impact of this change, it would be wise for us to cut from a release branch instead of merging right into main so that

• we can test this in the wild first and ensure all our docs / examples / refactoring is correct
• we're not stuck with broken code in master while under pressure to fix things

The plan would be that once all tests / builds / etc are passing in this PR, docs are ready, and the bulk of the work has been completed:

1. Create a release/0.20.0 branch off master
2. Squash merge this PR into it
3. Transfer remaining TODOs and open items and create a draft PR for release/0.20.0 into master
4. Publish a new release v0.20.0-alpha.0
5. Test against the following projects / workflows
   • greenwood-getting-started
   • projectevergreen.github.io
   • thegreehouse.io
   • contributary.community
   • analogstudios.net
   • greenwood-starter-presentation
   • npx / npx @greenwood/init
   • Stackblitz
6. Iterate on v0.20.0-alpha.x releases as needed
7. Eventually merge release branch into master
8. ???
9. Profit 💰

TODOs

1. Figure out greenwood build issue with PostCSS + ESM compatibility (need to upgrade PostCSS?) for www/
   seems related to this - https://github.com/ES module support postcss/postcss-cli#387 and a downstream dependency of https://github.com/support mjs extensions out of box cosmiconfig/cosmiconfig#224

      prerendering complete for page /plugins/resource/.
      prerendering complete for page /plugins/context/.
      done prerendering all pages
      Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/postcss.config.js
      require() of ES modules is not supported.
      require() of /Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/postcss.config.js from /Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/node_modules/import-fresh/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
       Instead rename postcss.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/package.json.
      

2. Get greenwood serve working for www/ + imported nested PostCSS for build (intercepting in rollup.config.js
   
3. Get (nested) PostCSS + import CSS working for build task as seen in banner / shelf. Maybe good to upgrade all the way to PostCSS 8?
   
4. Get markdown plugins working (missing heading links, syntax highlighting, etc)
   
5. Get linting working
   • ESLint w/ new ESLint rules?
   • Stylelint
   • ls-lit
6. restore greenwood.config.js
7. Migrate all remaining plugins
8. Get Mocha and test cases migrated to ESM, all features enabled
   • CLI
   • Init
   • Plugins
9. Update all READMEs and website documentation
10. Validate windows compatibility (looks like its having a hard time with the new URL / file:// schema across platforms - ES Module loading with abolute path fails on windows nodejs/node#31710
    
11. Merge into a release branch and cut first alpha, transfer remaining open items
12. Restore Test Coverage (NYC) - Nyc on ESM Node.js 13 (no babel) istanbuljs/nyc#1287 (https://github.com/istanbuljs/esm-loader-hook or c8)
13. Restore Babel plugin extend + test case - Support for ESM style Babel config files, calling Babel in async fixed? babel/babel-loader#894
14. Update GitHub Actions (min version Node v14?) - Node 14x minimum version #721
15. Can we also resolve...?
    • add full client API support for Apollo client in plugin-graphql (as ESM) #535 and / or
    • make all exports explicit by making them named exports #551 and / or
    • ensure a clear and consistent convention for when to use file extensions #536
    • linked issues
16. Review and apply this guide
17. Issue Tracking
    • migrate more of our usages of path => new URL, more of a chore, and could be done post
    • We should really just try and make more / all of Greenwood aysnc first because bonus, the async variants of fs methods can take an instance of URL natively, so we wouldn't have to use pathToFileURL. Also, await will automatically wrap return values in Promise, so in that way aysnc is backwards compatible, unlike a sync version

Questions / Notes

1. ESM Config Files (i.e. not having to use .cjs as the config extension)
   • stylelint config - Move to ESM stylelint/stylelint#5291 , https://github.com/stylelint/postcss-css-in-js/issues/225
   • ESLint config - Implement Flat Config eslint/eslint#13481
   • import json support in NodesJS in cli/src/index.js for reading package.json
   • PostCSS - (requires two postcss config files for now) - ES module support postcss/postcss-cli#387
   • CosmicConfig (underlying dep) - support mjs extensions out of box cosmiconfig/cosmiconfig#224
   • Babel -
2. best usage of new URL vs path.join(process.cwd(), ...) - found a good convention, will confirm and track for further refactoring
3. track full ESM support for ESLint
4. ~~import in {tool}.config.js files feels a little funny (markdown, postcss, babel, etc), maybe just because ESM requires async?~~
5. Had to fallback to require for require.resolve.paths, does there exist a similar convention for ESM, e.g. import.meta.resolve.paths?
6. Run tests in parallel?
7. Looks like PostCSS was converting blue -> #00f (hex)??