feat: move animation to astro styles

packages/website/src/components/Embeds/PreviewWrapper.tsx

@@ -1,8 +1,7 @@
 import { Box } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
-import { embedPreviews } from '../../../constants/embeds';
+import { embedPreviews } from '../../constants/embeds';
-import { useEmbedStateCurry } from '../../../stores/embedState/utilities';
+import { useEmbedStateCurry } from '../../stores/embedState/utilities';
-import * as styles from './index.css';
 
 interface PreviewWrapperProps {
   name: keyof typeof embedPreviews;
@@ -19,9 +18,9 @@ export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
   useEffect(() => {
     if (!wrapper.current) return;
 
-    wrapper.current.classList.remove(styles.animated);
+    wrapper.current.classList.remove('preview-container-animated');
     void wrapper.current.offsetWidth;
-    wrapper.current.classList.add(styles.animated);
+    wrapper.current.classList.add('preview-container-animated');
   }, [width, height]);
 
   if (naked) {
@@ -47,6 +46,7 @@ export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
       overflow="hidden"
       style={{ transform: naked ? 'scale(0.25)' : 'translate(-50%, -50%)' }}
       ref={wrapper}
+      className="preview-container-animated"
       width={`${width}px`}
       height={`${height}px`}
     >

packages/website/src/components/Embeds/PreviewWrapper/index.css.ts

@@ -1,18 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-
-const fadeOutBorder = keyframes({
-  from: {
-    outline: '1rem solid #ff0000ff',
-  },
-  to: {
-    outline: '1rem solid #ff000000',
-  },
-});
-
-export const animated = style({
-  animation: `${fadeOutBorder} 0.5s linear`,
-
-  ':hover': {
-    outline: '1rem solid #ff000080',
-  },
-});

packages/website/src/pages/tools/embed/[embed]/index.astro

@@ -14,6 +14,25 @@ export const getStaticPaths = (() => {
 
 <title>BlitzKit - {capitalize(Astro.params.embed)} embed</title>
 
+<style is:global>
+  @keyframes fade-out-border {
+    from {
+      outline: 1rem solid #ff0000ff;
+    }
+    to {
+      outline: 0.75rem solid #ff000000;
+    }
+  }
+
+  .preview-container-animated {
+    animation: fade-out-border 0.5s linear;
+  }
+
+  .preview-container-animated:hover {
+    outline: 1rem solid #ff000080;
+  }
+</style>
+
 <BaseLayout>
   <Page client:load embed={Astro.params.embed} />
 </BaseLayout>