Update postcss-load-config to 4.x and address synchronisation issues (*breaking change*)

[stefanvermaas]

This is a 🐛 bug fix (?)

Summary

As reported in #591, postcss-load-config introduced a breaking change in their latest major version update: 4.x. Instead of loading the configuration in a synchronous way, it's needed to load the configuration in an asynchronous way.

The PR;

• Allows loading the PostCSS configuration under postcss-load-config > 4.x again.
• Updates the postcss-load-config references from 3.1.4 to 4.0.1.
• Updates the template for the lit/esbuild-plugins to also use the asynchronous API.
• Updates the naming of the "import" function of the PostCSS plugin to align it with the other "import" functions in the esbuild.defaults.js.

I'm a bit rusty on my JavaScript, so I'm looking for feedback on the proposed async/await changes. I'm also not sure how I could add a test case for this and whether or not I should add a test case for this fix.

I also wonder whether or not you'd want to support both 3.x and 4.x versions of the postcss-load-config package as I'd need to provide a way to use both versions to get the configuration object.

I tested out things locally with the latest version of postcss-load-config and was able to build the Bridgetown site again with the new configuration.

Context

Fixes #591

[jaredcwhite]

Thanks for the PR @stefanvermaas! Apologies for the delay in looking into this. I'll try to review soon.

[jaredcwhite]

Thanks for your patience @stefanvermaas. Looking good to me! We'll want to make sure we mark this a breaking change as the build function call in esbuild.config.js will now return immediately with a promise, rather than run synchronously. If folks have added extra code to run after the build function, they'll have to use .then:

build(outputFolder, esbuildOptions).then(() => {
  console.log("build complete")
})