fix(core): replace most --affine with cssVar (#5728)

using a [babel plugin](https://gist.github.com/pengx17/49e24ae8a5a609bdaff122ee8c679d1c) to transform all var(--affine-xxx) to cssVar

Some issues:
- tried ast-grep but it seems to be not easy to add imports conditionally
- current work does not work well with ts with types because babel will strip them out

packages/frontend/component/src/ui/resize-panel/styles.css.ts

@@ -1,7 +1,5 @@
 import { style } from '@vanilla-extract/css';
-
 const HANDLE_SIZE = 24;
-
 export const container = style({
   position: 'relative',
   border: '1px solid rgba(100, 100, 100, 0.2)',
@@ -9,18 +7,15 @@ export const container = style({
   borderRadius: 4,
   borderBottomRightRadius: HANDLE_SIZE / 2,
 });
-
 export const cornerHandle = style({
   position: 'absolute',
   top: `calc(100% - ${HANDLE_SIZE / 1.5}px)`,
   left: `calc(100% - ${HANDLE_SIZE / 1.5}px)`,
   width: HANDLE_SIZE,
   height: HANDLE_SIZE,
-
   borderRadius: '50%',
   border: '2px solid transparent',
   borderRightColor: 'rgba(100, 100, 100, 0.3)',
   transform: 'rotate(45deg)',
-
   cursor: 'nwse-resize',
 });