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/components/page-detail-skeleton/index.css.ts

@@ -1,20 +1,17 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const pageDetailSkeletonStyle = style({
   padding: '0 20px',
 });
-
 export const pageDetailSkeletonTitleStyle = style({
   height: '52px',
   width: '100%',
 });
-
 export const blockSuiteEditorStyle = style({
-  maxWidth: 'var(--affine-editor-width)',
+  maxWidth: cssVar('editorWidth'),
   margin: '0 2rem',
   padding: '0 24px',
 });
-
 export const blockSuiteEditorHeaderStyle = style({
   marginTop: '40px',
   marginBottom: '40px',