Change the CSS build and switch to Preact custom element

[DanWebb]

The primary goal of this PR is to improve performance of CSS loading and prevent adding more CSS meaning larger Javascript bundle size:

• Add a separate postcss-cli based build for styles
• Output the built styles into /public
• Use <link> to pull in the file on the base web component
• Use postcss import to pull in diamond ui
• Replace :root with :host
• Reload on public file changes
• Use Preact for Web components and remove Lit because we don't need Lit for anything that Preact can't already do
• Had a hell of a time trying to get storybook to render stories into a parent shadow root, ended up telling preact to render into a different host element that's included in preview-body.html time will tell if the method holds up

Here's a comparison of the unminified builds after these changes, it's ~10kb saved at this early stage where barely any CSS has been written yet:

Before

After

Note: Ignoring the HTML lint warning, storybooks preview-body.html isn't a normal HTML file

[sonarcloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[DanWebb]

🎉 This PR is included in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀