fix @import rule warning in GlobalStyles (#1607)

cengage · Dec 19, 2024 · b95b94c · b95b94c · github-actions · Dec 19, 2024
1 parent 09f1b1e
commit b95b94c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/.changeset/fix-GlobalStyles-import-warning.md b/.changeset/fix-GlobalStyles-import-warning.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(GlobalStyles): fix @import rule warning in GlobalStyles
diff --git a/packages/react-magma-dom/src/theme/GlobalStyles/index.tsx b/packages/react-magma-dom/src/theme/GlobalStyles/index.tsx
@@ -3,11 +3,14 @@ import * as React from 'react';
 import { useIsInverse } from '../../inverse';
 import { ThemeContext } from '../ThemeContext';
 
-function getStyles(theme, isInverse: boolean) {
+function getGlobalImports() {
   return css`
-    @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-    @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+  `;
+}
 
+function getStyles(theme, isInverse: boolean) {
+  return css`
     *,
     *:before,
     *:after {
@@ -81,7 +84,12 @@ export const GlobalStyles: React.FunctionComponent = () => {
   const isInverse = useIsInverse();
   return (
     <ThemeContext.Consumer>
-      {theme => <Global styles={getStyles(theme, isInverse)} />}
+      {theme => (
+        <>
+          <Global styles={getGlobalImports()} />
+          <Global styles={getStyles(theme, isInverse)} />
+        </>
+      )}
     </ThemeContext.Consumer>
   );
 };