fix: workspace avatar url won't update (#1817)

apps/web/next.config.mjs

@@ -10,6 +10,8 @@ import preset from './preset.config.mjs';
 import { getCommitHash, getGitVersion } from './scripts/gitInfo.mjs';
 
 const require = createRequire(import.meta.url);
+const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
+const withVanillaExtract = createVanillaExtractPlugin();
 
 console.info('Runtime Preset', preset);
 
@@ -189,4 +191,4 @@ if (process.env.PERFSEE_TOKEN) {
   );
 }
 
-export default config;
+export default withVanillaExtract(config);

apps/web/package.json

@@ -53,6 +53,8 @@
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
     "@types/webpack-env": "^1.18.0",
+    "@vanilla-extract/css": "^1.11.0",
+    "@vanilla-extract/next-plugin": "^2.1.1",
     "dotenv": "^16.0.3",
     "eslint": "^8.37.0",
     "eslint-config-next": "^13.2.4",

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -5,6 +5,7 @@ import type React from 'react';
 
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import type { AllWorkspace } from '../../../../shared';
+import { workspaceAvatarStyle } from './index.css';
 import {
   StyledSelectorContainer,
   StyledSelectorWrapper,
@@ -29,9 +30,7 @@ export const WorkspaceSelector: React.FC<WorkspaceSelectorProps> = ({
     <StyledSelectorContainer onClick={onClick} data-testid="current-workspace">
       <WorkspaceAvatar
         data-testid="workspace-avatar"
-        style={{
-          flexShrink: 0,
-        }}
+        className={workspaceAvatarStyle}
         size={40}
         workspace={currentWorkspace}
       />

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.css.ts

@@ -0,0 +1,4 @@
+import { style } from '@vanilla-extract/css';
+export const workspaceAvatarStyle = style({
+  flexShrink: 0,
+});