feat: remove vanilla-extract

.vscode/settings.json

@@ -67,6 +67,7 @@
     "echarts",
     "Everytime",
     "FASTNAME",
+    "flexdirection",
     "FOURCC",
     "frameloop",
     "fsformat",

packages/website/astro.config.mjs

@@ -2,7 +2,6 @@
 
 import react from '@astrojs/react';
 import sitemap from '@astrojs/sitemap';
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
@@ -14,7 +13,6 @@ export default defineConfig({
 
   integrations: [react(), sitemap()],
   vite: {
-    plugins: [vanillaExtractPlugin()],
     resolve: {
       alias: {
         '.prisma/client/index-browser':

packages/website/package.json

@@ -19,8 +19,6 @@
     "@radix-ui/themes": "^3.1.4",
     "@react-three/drei": "^9.115.0",
     "@react-three/fiber": "^8.17.10",
-    "@vanilla-extract/css": "1.15.5",
-    "@vanilla-extract/dynamic": "^2.1.2",
     "compare-versions": "^6.1.1",
     "echarts": "^5.5.1",
     "immer": "^10.1.1",
@@ -42,7 +40,6 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/three": "^0.160.0",
-    "@vanilla-extract/vite-plugin": "4.0.15",
     "astro": "^4.16.7"
   }
 }

packages/website/src/components/TankSearch/components/TankCard.css.ts

@@ -1,45 +0,0 @@
-import { createVar, style } from '@vanilla-extract/css';
-
-export const cardBackgroundVar = createVar();
-
-export const card = style({
-  cursor: 'pointer',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 'var(--space-2)',
-  background: cardBackgroundVar,
-  overflow: 'hidden',
-});
-
-export const image = style({
-  height: 64,
-  width: '100%',
-  objectPosition: 'center right',
-  objectFit: 'contain',
-});
-
-export const classIcon = style({
-  width: '1em',
-  height: '1em',
-  minWidth: '1em',
-  minHeight: '1em',
-});
-
-export const name = style({
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-export const link = style({
-  color: 'inherit',
-  textDecoration: 'none',
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-
-  ':hover': {
-    textDecoration: 'underline',
-  },
-});

packages/website/src/components/TankSearch/components/TankCard/index.css

@@ -0,0 +1,37 @@
+.tank-search-card {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  background-position: top left;
+  background-size: contain;
+  background-repeat: no-repeat;
+  overflow: hidden;
+}
+
+.tank-search-card .link {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tank-search-card .image {
+  width: 100%;
+  height: 4rem;
+  object-position: center right;
+  object-fit: contain;
+}
+
+.tank-search-card .class-icon {
+  width: 1em;
+  height: 1em;
+  min-width: 1em;
+  min-height: 1em;
+}
+
+.tank-search-card .name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

packages/website/src/components/TankSearch/components/TankCard/index.tsx

@@ -10,12 +10,11 @@ import {
 } from '@blitzkit/core';
 import { useStore } from '@nanostores/react';
 import { Flex, Link, Text } from '@radix-ui/themes';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useMemo } from 'react';
-import { resolveReload } from '../../../core/blitzkit/resolveReload';
-import { $tankopediaSort } from '../../../stores/tankopediaSort';
-import { classIcons } from '../../ClassIcon';
-import * as styles from './TankCard.css';
+import { resolveReload } from '../../../../core/blitzkit/resolveReload';
+import { $tankopediaSort } from '../../../../stores/tankopediaSort';
+import { classIcons } from '../../../ClassIcon';
+import './index.css';
 
 interface TankCardProps {
   tank: TankDefinition;
@@ -151,21 +150,22 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
       }
       highContrast={tank.type === TankType.RESEARCHABLE}
       onClick={onSelect ? () => onSelect(tank) : undefined}
-      className={styles.card}
-      style={assignInlineVars({
-        [styles.cardBackgroundVar]: `top left / contain no-repeat url(${asset(
-          `flags/scratched/${tank.nation}.webp`,
-        )})`,
-      })}
+      className="tank-search-card"
+      style={{
+        backgroundImage: `url(${asset(`flags/scratched/${tank.nation}.webp`)})`,
+      }}
     >
       <Link
-        className={styles.link}
+        className="link"
+        color="gray"
+        highContrast
+        underline="hover"
         href={onSelect ? '#' : `/tools/tankopedia/${tank.id}`}
         onClick={(event) => {
           if (onSelect) event.preventDefault();
         }}
       >
-        <img alt={tank.name} src={tankIcon(tank.id)} className={styles.image} />
+        <img alt={tank.name} src={tankIcon(tank.id)} className="image" />
 
         <Flex
           justify="center"
@@ -174,8 +174,8 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
           overflow="hidden"
           width="100%"
         >
-          <Icon className={styles.classIcon} />
-          <Text align="center" className={styles.name}>
+          <Icon className="class-icon" />
+          <Text align="center" className="name">
             {tank.name}
           </Text>
         </Flex>

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css

@@ -0,0 +1,8 @@
+.quick-inputs {
+  display: none;
+}
+
+.quick-inputs:focus-within,
+.tank-sandbox-container:hover .quick-inputs {
+  display: flex;
+}

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css.ts

@@ -1,15 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const container = style({
-  display: 'none',
-
-  ':focus-within': {
-    display: 'flex',
-  },
-
-  selectors: {
-    '.tank-sandbox-container:hover &': {
-      display: 'flex',
-    },
-  },
-});

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx

@@ -10,7 +10,7 @@ import {
 import { useEquipment } from '../../../../../../../hooks/useEquipment';
 import { useTankModelDefinition } from '../../../../../../../hooks/useTankModelDefinition';
 import { Duel } from '../../../../../../../stores/duel';
-import * as styles from './index.css';
+import './index.css';
 
 export function QuickInputs() {
   const mutateDuel = Duel.useMutation();
@@ -73,7 +73,7 @@ export function QuickInputs() {
         top: 16,
         transform: 'translateX(-50%)',
       }}
-      className={styles.container}
+      className="quick-inputs"
     >
       <TextField.Root
         size="1"