🐛 [LightningCss] Find a solution to global keyframes

beefchimi · Nov 22, 2024 · e6d014d · e6d014d
1 parent f5c7c07
commit e6d014d
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ This template provides a minimal setup to get React working in Vite with HMR and
 
 ## Tasks
 
-- Update all instances of `@media`.
+- Figure out how to import `@custom-media` globally, so that we do not need to `@import` it in every file.
 - See if I can replace all `mixin` instances with `CSS Modules > composes`.
   - <https://lightningcss.dev/css-modules.html>
 - Update `Button` styles.

diff --git a/src/components/primitives/Spinner/Spinner.module.css b/src/components/primitives/Spinner/Spinner.module.css
@@ -8,4 +8,5 @@
   border: 0.125em solid var(--shade-white-20);
   border-top: 0.125em solid var(--shade-white-80);
   border-radius: 50%;
+  animation: var(--motion-spin) var(--speed-slow) var(--ease) infinite both;
 }
diff --git a/src/components/primitives/Spinner/Spinner.tsx b/src/components/primitives/Spinner/Spinner.tsx
@@ -1,4 +1,4 @@
-import {clamp, clx} from 'beeftools';
+import {clamp} from 'beeftools';
 
 import styles from './Spinner.module.css';
 
@@ -22,7 +22,7 @@ export function Spinner({size = 16, ariaLabel = 'Loading…'}: SpinnerProps) {
       style={{fontSize: safeSize}}
       data-spinner="simple"
     >
-      <div className={clx(styles.Icon, 'motion-spin')} />
+      <div className={styles.Icon} />
       <p className="visually-hidden">{ariaLabel}</p>
     </div>
   );

diff --git a/src/components/primitives/YouTubeEmbed/YouTubeEmbed.module.css b/src/components/primitives/YouTubeEmbed/YouTubeEmbed.module.css
@@ -1,9 +1,11 @@
+@import '@src/styles/media-queries.css';
+
 .YouTubeEmbed {
   padding: 20px;
   width: 100%;
   max-width: var(--breakpoint-x-widescreen);
 
-  @media (min-width: 1080px) {
+  @media (--min-hd) {
     padding: 32px;
   }
 

diff --git a/src/components/sections/Footer/Footer.module.css b/src/components/sections/Footer/Footer.module.css
@@ -1,3 +1,5 @@
+@import '@src/styles/media-queries.css';
+
 .Footer {
   --footer-action-padding: 6px;
   --footer-underline-width: 0%;
@@ -6,7 +8,7 @@
   width: 100%;
   text-align: center;
 
-  @media (min-width: 1280px) {
+  @media (--min-desktop) {
     padding: 40px;
   }
 }

diff --git a/src/components/sections/Header/Header.module.css b/src/components/sections/Header/Header.module.css
@@ -1,9 +1,11 @@
+@import '@src/styles/media-queries.css';
+
 .Header {
   padding: 20px;
   width: 100%;
   text-align: center;
 
-  @media (min-width: 1280px) {
+  @media (--min-desktop) {
     padding: 40px;
   }
 }

diff --git a/src/components/sections/Main/Main.module.css b/src/components/sections/Main/Main.module.css
@@ -1,9 +1,11 @@
+@import '@src/styles/media-queries.css';
+
 .Main {
   padding: 20px;
   width: 100%;
   text-align: center;
 
-  @media (min-width: 1280px) {
+  @media (--min-desktop) {
     padding: 40px;
   }
 }

diff --git a/src/components/ui/Accordion/Accordion.module.css b/src/components/ui/Accordion/Accordion.module.css
@@ -1,3 +1,5 @@
+@import '@src/styles/media-queries.css';
+
 .Accordion {
   --accordion-title-size: 20px;
   --accordion-icon-rotate: 0deg;
@@ -13,15 +15,15 @@
 
   display: grid;
 
-  @media (min-width: 768px) {
+  @media (--min-tablet) {
     --accordion-title-size: 24px;
   }
 }
 
 .smallTitle {
   --accordion-title-size: 16px;
 
-  @media (min-width: 768px) {
+  @media (--min-tablet) {
     --accordion-title-size: 18px;
   }
 }

diff --git a/src/styles/keyframes.css b/src/styles/keyframes.css
@@ -16,7 +16,11 @@
   }
 }
 
-/* TODO: Figure out how to use `:global()` keyframes in `lightningcss`. */
-.motion-spin {
-  animation: motionSpin var(--speed-slow) var(--ease) infinite both;
+:root {
+  /*
+    TODO: Figure out how to use `:global()` keyframes in `lightningcss`.
+    https://github.com/parcel-bundler/lightningcss/issues/825
+  */
+  --motion-fade-in: motionFadeIn;
+  --motion-spin: motionSpin;
 }