Font Import URLs fail to load

[gpsamson]

Describe the bug

Overriding the theme's font.importUrls does not work because emotion expects imports before other rules. This is the exact error being logged:

`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.

I suspect the solution here is to update the bumbag/Provider/GlobalStyles so that import URLs are included before any other global styling. I've attempted to test the fix in my fork (gpsamson@6ae1e48) but I'm having issues importing the package into my project, so I'm unsure if this would actually fix it.

Opening this issue to get feedback from core contributors before proposing a fix. Maybe you'll have a better testing workflow than me.

To Reproduce

1. Create a basic React app using bumbag
2. Override the default theme:

const theme = {
  fonts: {
    importUrls: [
      'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'
    ],
    heading: "'Poppins', system-ui, sans-serif"
  }
}

...

<BumbagProvider theme={theme}>

3. Open Devtools and inspect the global styles and console

Expected behavior

External fonts are imported within global styles.

Screenshots

stacktrace:

[gpsamson]

As a stop-gap, I've just imported the fonts within the HTML file so this is by no means urgent.