From 2e39b77c80c4aae8d98dce77bb840461b4c9fbb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 2 Nov 2024 18:23:30 -0500
Subject: [PATCH] feat: remove vanilla-extract
---
.vscode/settings.json | 1 +
packages/website/astro.config.mjs | 2 -
packages/website/package.json | 3 --
.../TankSearch/components/TankCard.css.ts | 45 -------------------
.../TankSearch/components/TankCard/index.css | 37 +++++++++++++++
.../{TankCard.tsx => TankCard/index.tsx} | 30 ++++++-------
.../Options/components/QuickInputs/index.css | 8 ++++
.../components/QuickInputs/index.css.ts | 15 -------
.../Options/components/QuickInputs/index.tsx | 4 +-
9 files changed, 63 insertions(+), 82 deletions(-)
delete mode 100644 packages/website/src/components/TankSearch/components/TankCard.css.ts
create mode 100644 packages/website/src/components/TankSearch/components/TankCard/index.css
rename packages/website/src/components/TankSearch/components/{TankCard.tsx => TankCard/index.tsx} (88%)
create mode 100644 packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css
delete mode 100644 packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css.ts
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d81c44577..b121917ec 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -67,6 +67,7 @@
"echarts",
"Everytime",
"FASTNAME",
+ "flexdirection",
"FOURCC",
"frameloop",
"fsformat",
diff --git a/packages/website/astro.config.mjs b/packages/website/astro.config.mjs
index 9412efe18..31cecc7e0 100644
--- a/packages/website/astro.config.mjs
+++ b/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':
diff --git a/packages/website/package.json b/packages/website/package.json
index b1916769f..c82f1babb 100644
--- a/packages/website/package.json
+++ b/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"
}
}
diff --git a/packages/website/src/components/TankSearch/components/TankCard.css.ts b/packages/website/src/components/TankSearch/components/TankCard.css.ts
deleted file mode 100644
index 97a006784..000000000
--- a/packages/website/src/components/TankSearch/components/TankCard.css.ts
+++ /dev/null
@@ -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',
- },
-});
diff --git a/packages/website/src/components/TankSearch/components/TankCard/index.css b/packages/website/src/components/TankSearch/components/TankCard/index.css
new file mode 100644
index 000000000..e12d5d3dd
--- /dev/null
+++ b/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;
+}
diff --git a/packages/website/src/components/TankSearch/components/TankCard.tsx b/packages/website/src/components/TankSearch/components/TankCard/index.tsx
similarity index 88%
rename from packages/website/src/components/TankSearch/components/TankCard.tsx
rename to packages/website/src/components/TankSearch/components/TankCard/index.tsx
index fdba4cfd9..d9c63e4c6 100644
--- a/packages/website/src/components/TankSearch/components/TankCard.tsx
+++ b/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`)})`,
+ }}
>
{
if (onSelect) event.preventDefault();
}}
>
- })
+
-
-
+
+
{tank.name}
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css
new file mode 100644
index 000000000..44ee39965
--- /dev/null
+++ b/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;
+}
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css.ts b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css.ts
deleted file mode 100644
index 308a36803..000000000
--- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css.ts
+++ /dev/null
@@ -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',
- },
- },
-});
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx
index 8a5a332a7..33190df23 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx
+++ b/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"
>