fix: ensure @import rules are before any other styles (#1611)

* fix: ensure @import rules are before any other styles

Resolves warnings in consuming apps, and prevents duplicate @import entries for teh same font.

https://czi-tech.atlassian.net/browse/EFI-1094

* chore: fix spaces

src/design-tokens/external-fonts.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap');

src/design-tokens/mixins.css

@@ -1,5 +1,4 @@
 @import '../design-tokens/tier-2-usage/typography-usage.css';
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap');
 
 /**
  * Link button styles
@@ -27,7 +26,7 @@
 
   &:focus-visible {
     /**
-     * Make the focus outline invisible but don't remove it. High contrast mode will remove the background 
+     * Make the focus outline invisible but don't remove it. High contrast mode will remove the background
      * color, but it will also make borders 100% opacity black.
      */
     outline: 1px solid transparent;
@@ -41,7 +40,7 @@
   @supports not selector(:focus-visible) {
     &:focus {
       /**
-       * Make the focus outline invisible but don't remove it. High contrast mode will remove the background 
+       * Make the focus outline invisible but don't remove it. High contrast mode will remove the background
        * color, but it will also make borders 100% opacity black.
        */
       outline: 1px solid transparent;

src/index.ts

@@ -1,3 +1,6 @@
+// Ensure @import rules for fonts are before anything else. Otherwise build tools can show warnings
+// in consuming apps.
+import './design-tokens/external-fonts.css';
 // This brings the style tokens that are css custom variables into the built stylesheet so only one stylesheet for EDS has to be imported.
 import './tokens-dist/css/variables.css';