refactor(editor): replace @vanilla-extract/css with @emotion/css (#12195)

close: BS-3446

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Refactor**
  - Migrated all styling from vanilla-extract to Emotion for improved CSS-in-JS consistency across database, table, and data view components.
  - Updated import paths for style modules to reflect the new Emotion-based file naming.
  - Removed unused or redundant style exports and updated selector syntax where necessary.

- **Chores**
  - Updated dependencies: removed vanilla-extract and added Emotion in relevant package files.

- **Style**
  - No visual changes to existing components; all style definitions remain consistent with previous designs.

- **New Features**
  - Introduced new reusable CSS classes for data view and table components using Emotion.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/database/package.json

@@ -30,7 +30,6 @@
     "@preact/signals-core": "^1.8.0",
     "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
-    "@vanilla-extract/css": "^1.17.0",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/database/src/properties/link/cell-renderer-css.ts

@@ -1,15 +1,15 @@
 import { cssVarV2 } from '@blocksuite/affine-shared/theme';
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const linkCellStyle = style({
+export const linkCellStyle = css({
   width: '100%',
   height: '100%',
   userSelect: 'none',
   position: 'relative',
 });
 
-export const linkContainerStyle = style({
+export const linkContainerStyle = css({
   display: 'flex',
   position: 'relative',
   alignItems: 'center',
@@ -21,7 +21,8 @@ export const linkContainerStyle = style({
   lineHeight: 'var(--data-view-cell-text-line-height)',
   wordBreak: 'break-all',
 });
-export const linkIconContainerStyle = style({
+
+export const linkIconContainerStyle = css({
   position: 'absolute',
   right: '8px',
   top: '8px',
@@ -34,7 +35,8 @@ export const linkIconContainerStyle = style({
   overflow: 'hidden',
   zIndex: 1,
 });
-export const linkIconStyle = style({
+
+export const linkIconStyle = css({
   width: '100%',
   height: '100%',
   display: 'flex',
@@ -48,15 +50,13 @@ export const linkIconStyle = style({
   },
 });
 
-export const showLinkIconStyle = style({
-  selectors: {
-    [`${linkCellStyle}:hover &`]: {
-      visibility: 'visible',
-    },
+export const showLinkIconStyle = css({
+  [`.${linkCellStyle}:hover &`]: {
+    visibility: 'visible',
   },
 });
 
-export const linkedDocStyle = style({
+export const linkedDocStyle = css({
   textDecoration: 'underline',
   textDecorationColor: 'var(--affine-divider-color)',
   transition: 'text-decoration-color 0.2s ease-out',
@@ -66,7 +66,7 @@ export const linkedDocStyle = style({
   },
 });
 
-export const linkEditingStyle = style({
+export const linkEditingStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
@@ -74,7 +74,7 @@ export const linkEditingStyle = style({
   border: 'none',
   fontFamily: baseTheme.fontSansFamily,
   color: 'var(--affine-text-primary-color)',
-  fontWeight: '400',
+  fontWeight: 400,
   backgroundColor: 'transparent',
   fontSize: 'var(--data-view-cell-text-size)',
   lineHeight: 'var(--data-view-cell-text-line-height)',
@@ -84,7 +84,7 @@ export const linkEditingStyle = style({
   },
 });
 
-export const inlineLinkNodeStyle = style({
+export const inlineLinkNodeStyle = css({
   wordBreak: 'break-all',
   color: 'var(--affine-link-color)',
   fill: 'var(--affine-link-color)',
@@ -94,6 +94,6 @@ export const inlineLinkNodeStyle = style({
   textDecoration: 'none',
 });
 
-export const normalTextStyle = style({
+export const normalTextStyle = css({
   wordBreak: 'break-all',
 });

blocksuite/affine/blocks/database/src/properties/link/cell-renderer.ts

@@ -26,7 +26,7 @@ import {
   linkIconStyle,
   normalTextStyle,
   showLinkIconStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 import { linkPropertyModelConfig } from './define.js';
 
 export class LinkCell extends BaseCellRenderer<string, string> {

blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer-css.ts

@@ -1,13 +1,13 @@
-import { style } from '@vanilla-extract/css';
+import { css } from '@emotion/css';
 
-export const richTextCellStyle = style({
+export const richTextCellStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
   userSelect: 'none',
 });
 
-export const richTextContainerStyle = style({
+export const richTextContainerStyle = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',

blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.ts

@@ -29,7 +29,7 @@ import type { DatabaseBlockComponent } from '../../database-block.js';
 import {
   richTextCellStyle,
   richTextContainerStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 import { richTextPropertyModelConfig } from './define.js';
 
 function toggleStyle(

blocksuite/affine/blocks/database/src/properties/title/cell-renderer-css.ts

@@ -1,12 +1,12 @@
 import { cssVarV2 } from '@blocksuite/affine-shared/theme';
-import { style } from '@vanilla-extract/css';
+import { css } from '@emotion/css';
 
-export const titleCellStyle = style({
+export const titleCellStyle = css({
   width: '100%',
   display: 'flex',
 });
 
-export const titleRichTextStyle = style({
+export const titleRichTextStyle = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -18,7 +18,7 @@ export const titleRichTextStyle = style({
   lineHeight: 'var(--data-view-cell-text-line-height)',
 });
 
-export const headerAreaIconStyle = style({
+export const headerAreaIconStyle = css({
   height: 'max-content',
   display: 'flex',
   alignItems: 'center',

blocksuite/affine/blocks/database/src/properties/title/text.ts

@@ -24,7 +24,7 @@ import {
   headerAreaIconStyle,
   titleCellStyle,
   titleRichTextStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 
 export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
   activity = true;

blocksuite/affine/blocks/table/package.json

@@ -23,9 +23,9 @@
     "@blocksuite/icons": "^2.2.12",
     "@blocksuite/std": "workspace:*",
     "@blocksuite/store": "workspace:*",
+    "@emotion/css": "^11.13.5",
     "@floating-ui/dom": "^1.6.13",
     "@preact/signals-core": "^1.8.0",
-    "@vanilla-extract/css": "^1.17.0",
     "lit": "^3.2.0",
     "rxjs": "^7.8.1",
     "yjs": "^13.6.21",

blocksuite/affine/blocks/table/src/add-button-css.ts

@@ -1,7 +1,7 @@
 import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme';
-import { style } from '@vanilla-extract/css';
+import { css } from '@emotion/css';
 
-export const addColumnButtonStyle = style({
+export const addColumnButtonStyle = css({
   cursor: 'col-resize',
   backgroundColor: cssVarV2.layer.background.hoverOverlay,
   fontSize: '16px',
@@ -18,16 +18,19 @@ export const addColumnButtonStyle = style({
     'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out',
   borderRadius: '2px',
   opacity: 0,
-  selectors: {
-    '&:hover, &.active': {
-      backgroundColor: cssVarV2.table.indicator.drag,
-      color: cssVarV2.icon.primary,
-      opacity: 1,
-    },
+  ':hover': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
+  },
+  '&.active': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
   },
 });
 
-export const addRowButtonStyle = style({
+export const addRowButtonStyle = css({
   cursor: 'row-resize',
   backgroundColor: cssVarV2.layer.background.hoverOverlay,
   fontSize: '16px',
@@ -44,16 +47,19 @@ export const addRowButtonStyle = style({
     'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out',
   borderRadius: '2px',
   opacity: 0,
-  selectors: {
-    '&:hover, &.active': {
-      backgroundColor: cssVarV2.table.indicator.drag,
-      color: cssVarV2.icon.primary,
-      opacity: 1,
-    },
+  ':hover': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
+  },
+  '&.active': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
   },
 });
 
-export const addRowColumnButtonStyle = style({
+export const addRowColumnButtonStyle = css({
   cursor: 'nwse-resize',
   backgroundColor: cssVarV2.layer.background.hoverOverlay,
   fontSize: '16px',
@@ -70,16 +76,19 @@ export const addRowColumnButtonStyle = style({
   opacity: 0,
   transition:
     'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out',
-  selectors: {
-    '&:hover, &.active': {
-      backgroundColor: cssVarV2.table.indicator.drag,
-      color: cssVarV2.icon.primary,
-      opacity: 1,
-    },
+  ':hover': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
+  },
+  '&.active': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
   },
 });
 
-export const cellCountTipsStyle = style({
+export const cellCountTipsStyle = css({
   position: 'absolute',
   backgroundColor: cssVarV2.tooltips.background,
   borderRadius: '4px',

blocksuite/affine/blocks/table/src/add-button.ts

@@ -20,7 +20,7 @@ import {
   addRowButtonStyle,
   addRowColumnButtonStyle,
   cellCountTipsStyle,
-} from './add-button.css';
+} from './add-button-css';
 import { DefaultColumnWidth, DefaultRowHeight } from './consts';
 import type { TableDataManager } from './table-data-manager';
 

blocksuite/affine/blocks/table/src/table-block-css.ts

@@ -0,0 +1,40 @@
+import { css } from '@emotion/css';
+
+export const tableContainer = css({
+  display: 'block',
+  padding: '10px 0 18px 10px',
+  overflowX: 'auto',
+  overflowY: 'visible',
+  '::-webkit-scrollbar': {
+    height: '8px',
+  },
+  '::-webkit-scrollbar-thumb:horizontal': {
+    borderRadius: '4px',
+    backgroundColor: 'transparent',
+  },
+  '::-webkit-scrollbar-track:horizontal': {
+    backgroundColor: 'transparent',
+    height: '8px',
+  },
+  '&:hover::-webkit-scrollbar-thumb:horizontal': {
+    borderRadius: '4px',
+    backgroundColor: 'var(--affine-black-30)',
+  },
+  '&:hover::-webkit-scrollbar-track:horizontal': {
+    backgroundColor: 'var(--affine-hover-color)',
+    height: '8px',
+  },
+});
+
+export const tableWrapper = css({
+  overflow: 'visible',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '8px',
+  position: 'relative',
+  width: 'max-content',
+});
+
+export const table = css({});
+
+export const rowStyle = css({});

blocksuite/affine/blocks/table/src/table-block.css.ts

@@ -1,42 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const tableContainer = style({
-  display: 'block',
-  padding: '10px 0 18px 10px',
-  overflowX: 'auto',
-  overflowY: 'visible',
-  selectors: {
-    '&::-webkit-scrollbar': {
-      height: '8px',
-    },
-    '&::-webkit-scrollbar-thumb:horizontal': {
-      borderRadius: '4px',
-      backgroundColor: 'transparent',
-    },
-    '&::-webkit-scrollbar-track:horizontal': {
-      backgroundColor: 'transparent',
-      height: '8px',
-    },
-    '&:hover::-webkit-scrollbar-thumb:horizontal': {
-      borderRadius: '4px',
-      backgroundColor: 'var(--affine-black-30)',
-    },
-    '&:hover::-webkit-scrollbar-track:horizontal': {
-      backgroundColor: 'var(--affine-hover-color)',
-      height: '8px',
-    },
-  },
-});
-
-export const tableWrapper = style({
-  overflow: 'visible',
-  display: 'flex',
-  flexDirection: 'row',
-  gap: '8px',
-  position: 'relative',
-  width: 'max-content',
-});
-
-export const table = style({});
-
-export const rowStyle = style({});

blocksuite/affine/blocks/table/src/table-block.ts

@@ -18,7 +18,7 @@ import {
   table,
   tableContainer,
   tableWrapper,
-} from './table-block.css';
+} from './table-block-css';
 import { TableDataManager } from './table-data-manager';
 
 export const TableBlockComponentName = 'affine-table';

blocksuite/affine/blocks/table/src/table-cell-css.ts

@@ -1,7 +1,7 @@
 import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme';
-import { createVar, style } from '@vanilla-extract/css';
+import { css } from '@emotion/css';
 
-export const cellContainerStyle = style({
+export const cellContainerStyle = css({
   position: 'relative',
   alignItems: 'center',
   border: '1px solid',
@@ -12,7 +12,7 @@ export const cellContainerStyle = style({
   verticalAlign: 'top',
 });
 
-export const columnOptionsCellStyle = style({
+export const columnOptionsCellStyle = css({
   position: 'absolute',
   height: '0',
   top: '0',
@@ -23,8 +23,7 @@ export const columnOptionsCellStyle = style({
   justifyContent: 'center',
 });
 
-const threePointerIconColorVar = createVar();
-export const columnOptionsStyle = style({
+export const columnOptionsStyle = css({
   cursor: 'pointer',
   zIndex: 2,
   width: '28px',
@@ -37,24 +36,18 @@ export const columnOptionsStyle = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  vars: {
-    [threePointerIconColorVar]: cssVarV2.icon.secondary,
+  '--three-pointer-icon-color': cssVarV2.icon.secondary,
+  ':hover': {
+    opacity: 1,
   },
-  selectors: {
-    '&:hover': {
-      opacity: 1,
-    },
-    '&.active': {
-      opacity: 1,
-      backgroundColor: cssVarV2.table.indicator.activated,
-      vars: {
-        [threePointerIconColorVar]: cssVarV2.table.indicator.pointerActive,
-      },
-    },
+  '&.active': {
+    opacity: 1,
+    backgroundColor: cssVarV2.table.indicator.activated,
+    '--three-pointer-icon-color': cssVarV2.table.indicator.pointerActive,
   },
 });
 
-export const rowOptionsCellStyle = style({
+export const rowOptionsCellStyle = css({
   position: 'absolute',
   top: '0',
   left: '0',
@@ -65,7 +58,8 @@ export const rowOptionsCellStyle = style({
   alignItems: 'center',
   justifyContent: 'center',
 });
-export const rowOptionsStyle = style({
+
+export const rowOptionsStyle = css({
   cursor: 'pointer',
   zIndex: 2,
   width: '16px',
@@ -78,44 +72,40 @@ export const rowOptionsStyle = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  vars: {
-    [threePointerIconColorVar]: cssVarV2.icon.secondary,
+  '--three-pointer-icon-color': cssVarV2.icon.secondary,
+  ':hover': {
+    opacity: 1,
   },
-  selectors: {
-    '&:hover': {
-      opacity: 1,
-    },
-    '&.active': {
-      opacity: 1,
-      backgroundColor: cssVarV2.table.indicator.activated,
-      vars: {
-        [threePointerIconColorVar]: cssVarV2.table.indicator.pointerActive,
-      },
-    },
+  '&.active': {
+    opacity: 1,
+    backgroundColor: cssVarV2.table.indicator.activated,
+    '--three-pointer-icon-color': cssVarV2.table.indicator.pointerActive,
   },
 });
 
-export const threePointerIconStyle = style({
+export const threePointerIconStyle = css({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   gap: '2px',
 });
 
-export const threePointerIconDotStyle = style({
+export const threePointerIconDotStyle = css({
   width: '3px',
   height: '3px',
-  backgroundColor: threePointerIconColorVar,
+  backgroundColor: 'var(--three-pointer-icon-color)',
   borderRadius: '50%',
 });
-export const indicatorStyle = style({
+
+export const indicatorStyle = css({
   position: 'absolute',
   backgroundColor: cssVarV2.table.indicator.activated,
   zIndex: 2,
   transition: 'opacity 0.2s ease-in-out',
   pointerEvents: 'none',
 });
-export const columnIndicatorStyle = style([
+
+export const columnIndicatorStyle = css([
   indicatorStyle,
   {
     top: '-1px',
@@ -123,7 +113,8 @@ export const columnIndicatorStyle = style([
     width: '5px',
   },
 ]);
-export const columnRightIndicatorStyle = style([
+
+export const columnRightIndicatorStyle = css([
   columnIndicatorStyle,
   {
     cursor: 'ew-resize',
@@ -131,13 +122,15 @@ export const columnRightIndicatorStyle = style([
     pointerEvents: 'auto',
   },
 ]);
-export const columnLeftIndicatorStyle = style([
+
+export const columnLeftIndicatorStyle = css([
   columnIndicatorStyle,
   {
     left: '-2px',
   },
 ]);
-export const rowIndicatorStyle = style([
+
+export const rowIndicatorStyle = css([
   indicatorStyle,
   {
     left: '-1px',
@@ -145,13 +138,15 @@ export const rowIndicatorStyle = style([
     height: '5px',
   },
 ]);
-export const rowBottomIndicatorStyle = style([
+
+export const rowBottomIndicatorStyle = css([
   rowIndicatorStyle,
   {
     bottom: '-3px',
   },
 ]);
-export const rowTopIndicatorStyle = style([
+
+export const rowTopIndicatorStyle = css([
   rowIndicatorStyle,
   {
     top: '-2px',

blocksuite/affine/blocks/table/src/table-cell.ts

@@ -57,7 +57,7 @@ import {
   rowTopIndicatorStyle,
   threePointerIconDotStyle,
   threePointerIconStyle,
-} from './table-cell.css';
+} from './table-cell-css';
 import type { TableDataManager } from './table-data-manager';
 export const TableCellComponentName = 'affine-table-cell';
 export class TableCell extends SignalWatcher(

blocksuite/affine/data-view/package.json

@@ -16,13 +16,13 @@
     "@blocksuite/icons": "^2.2.12",
     "@blocksuite/std": "workspace:*",
     "@blocksuite/store": "workspace:*",
+    "@emotion/css": "^11.13.5",
     "@emotion/hash": "^0.9.2",
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
     "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
-    "@vanilla-extract/css": "^1.17.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",

blocksuite/affine/data-view/src/core/common/dv-css.ts

@@ -0,0 +1,72 @@
+import { css } from '@emotion/css';
+import { cssVarV2 } from '@toeverything/theme/v2';
+
+export const dataViewVars = {
+  cellTextSize: '--affine-data-view-cell-text-size',
+  cellTextLineHeight: '--affine-data-view-cell-text-line-height',
+};
+
+export const dataViewRoot = css({
+  fontFamily: 'var(--affine-font-family)',
+  [dataViewVars.cellTextSize]: '14px',
+  [dataViewVars.cellTextLineHeight]: '22px',
+});
+
+export const withDataViewCssVariable = css({
+  fontFamily: 'var(--affine-font-family)',
+  [dataViewVars.cellTextSize]: '14px',
+  [dataViewVars.cellTextLineHeight]: '22px',
+});
+
+export const p2 = css({
+  padding: '2px',
+});
+export const p4 = css({
+  padding: '4px',
+});
+export const p8 = css({
+  padding: '8px',
+});
+
+export const hover = css({
+  '&:hover, &.active': {
+    backgroundColor: 'var(--affine-hover-color)',
+    cursor: 'pointer',
+  },
+});
+
+export const icon16 = css({
+  fontSize: '16px',
+  color: cssVarV2.icon.primary,
+});
+export const icon20 = css({
+  fontSize: '20px',
+  color: cssVarV2.icon.primary,
+});
+
+export const border = css({
+  border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
+});
+export const round4 = css({
+  borderRadius: '4px',
+});
+export const round8 = css({
+  borderRadius: '8px',
+});
+export const color2 = css({
+  color: 'var(--affine-text-secondary-color)',
+});
+export const shadow2 = css({
+  boxShadow: 'var(--affine-shadow-2)',
+});
+
+export const dividerH = css({
+  height: '1px',
+  backgroundColor: 'var(--affine-divider-color)',
+  margin: '8px 0',
+});
+export const dividerV = css({
+  width: '1px',
+  backgroundColor: 'var(--affine-divider-color)',
+  margin: '0 8px',
+});

blocksuite/affine/data-view/src/core/common/dv.css.ts

@@ -1,85 +0,0 @@
-import { cssVarV2 } from '@toeverything/theme/v2';
-import { createVar, style } from '@vanilla-extract/css';
-
-export const dataViewVars = {
-  cellTextSize: createVar(),
-  cellTextLineHeight: createVar(),
-};
-
-export const dataViewRoot = style({
-  vars: {
-    [dataViewVars.cellTextSize]: '14px',
-    [dataViewVars.cellTextLineHeight]: '22px',
-  },
-});
-
-export const withDataViewCssVariable = style({
-  vars: {
-    [dataViewVars.cellTextSize]: '14px',
-    [dataViewVars.cellTextLineHeight]: '22px',
-  },
-  fontFamily: 'var(--affine-font-family)',
-});
-
-export const p2 = style({
-  padding: '2px',
-});
-
-export const p4 = style({
-  padding: '4px',
-});
-
-export const p8 = style({
-  padding: '8px',
-});
-
-export const hover = style({
-  selectors: {
-    '&:hover, &.active': {
-      backgroundColor: 'var(--affine-hover-color)',
-      cursor: 'pointer',
-    },
-  },
-});
-
-export const icon16 = style({
-  fontSize: '16px',
-  color: cssVarV2.icon.primary,
-});
-
-export const icon20 = style({
-  fontSize: '20px',
-  color: cssVarV2.icon.primary,
-});
-
-export const border = style({
-  border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
-});
-
-export const round4 = style({
-  borderRadius: '4px',
-});
-
-export const round8 = style({
-  borderRadius: '8px',
-});
-
-export const color2 = style({
-  color: 'var(--affine-text-secondary-color)',
-});
-
-export const shadow2 = style({
-  boxShadow: 'var(--affine-shadow-2)',
-});
-
-export const dividerH = style({
-  height: '1px',
-  backgroundColor: 'var(--affine-divider-color)',
-  margin: '8px 0',
-});
-
-export const dividerV = style({
-  width: '1px',
-  backgroundColor: 'var(--affine-divider-color)',
-  margin: '0 8px',
-});

blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts

@@ -53,7 +53,7 @@ import {
   tagSelectInputContainerStyle,
   tagSelectInputStyle,
   tagTextStyle,
-} from './styles.css.js';
+} from './styles-css.js';
 
 type RenderOption = {
   value: string;

blocksuite/affine/data-view/src/core/component/tags/styles-css.ts

@@ -1,8 +1,8 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { style } from '@vanilla-extract/css';
 
-export const tagSelectContainerStyle = style({
+export const tagSelectContainerStyle = css({
   position: 'absolute',
   zIndex: 2,
   color: cssVarV2('text/primary'),
@@ -16,14 +16,12 @@ export const tagSelectContainerStyle = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '4px',
-  '@media': {
-    print: {
-      display: 'none',
-    },
+  '@media print': {
+    display: 'none',
   },
 });
 
-export const tagSelectInputContainerStyle = style({
+export const tagSelectInputContainerStyle = css({
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
@@ -31,7 +29,7 @@ export const tagSelectInputContainerStyle = style({
   padding: '4px',
 });
 
-export const tagSelectInputStyle = style({
+export const tagSelectInputStyle = css({
   flex: '1 1 0',
   border: 'none',
   fontFamily: baseTheme.fontSansFamily,
@@ -45,7 +43,7 @@ export const tagSelectInputStyle = style({
   },
 });
 
-export const selectOptionsTipsStyle = style({
+export const selectOptionsTipsStyle = css({
   padding: '4px',
   color: cssVarV2('text/secondary'),
   fontSize: '14px',
@@ -54,7 +52,7 @@ export const selectOptionsTipsStyle = style({
   userSelect: 'none',
 });
 
-export const selectOptionsContainerStyle = style({
+export const selectOptionsContainerStyle = css({
   maxHeight: '400px',
   overflowY: 'auto',
   userSelect: 'none',
@@ -63,7 +61,7 @@ export const selectOptionsContainerStyle = style({
   gap: '4px',
 });
 
-export const selectOptionStyle = style({
+export const selectOptionStyle = css({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -72,11 +70,11 @@ export const selectOptionStyle = style({
   cursor: 'pointer',
 });
 
-export const selectedStyle = style({
+export const selectedStyle = css({
   background: cssVarV2('layer/background/hoverOverlay'),
 });
 
-export const tagContainerStyle = style({
+export const tagContainerStyle = css({
   display: 'flex',
   alignItems: 'center',
   padding: '0 8px',
@@ -89,26 +87,26 @@ export const tagContainerStyle = style({
   userSelect: 'none',
 });
 
-export const tagTextStyle = style({
+export const tagTextStyle = css({
   fontSize: '14px',
   lineHeight: '22px',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });
 
-export const tagDeleteIconStyle = style({
+export const tagDeleteIconStyle = css({
   display: 'flex',
   alignItems: 'center',
   color: cssVarV2('chip/label/text'),
 });
 
-export const selectOptionContentStyle = style({
+export const selectOptionContentStyle = css({
   display: 'flex',
   alignItems: 'center',
   overflow: 'hidden',
 });
 
-export const selectOptionIconStyle = style({
+export const selectOptionIconStyle = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -121,14 +119,12 @@ export const selectOptionIconStyle = style({
   ':hover': {
     background: cssVarV2('layer/background/hoverOverlay'),
   },
-  selectors: {
-    [`${selectedStyle} &`]: {
-      visibility: 'visible',
-    },
+  [`.${selectedStyle} &`]: {
+    visibility: 'visible',
   },
 });
 
-export const selectOptionDragHandlerStyle = style({
+export const selectOptionDragHandlerStyle = css({
   width: '4px',
   height: '12px',
   borderRadius: '1px',
@@ -138,7 +134,7 @@ export const selectOptionDragHandlerStyle = style({
   flexShrink: 0,
 });
 
-export const selectOptionNewIconStyle = style({
+export const selectOptionNewIconStyle = css({
   fontSize: '14px',
   lineHeight: '22px',
   color: cssVarV2('text/primary'),

blocksuite/affine/data-view/src/property-presets/date/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const dateCellStyle = style({
+export const dateCellStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
@@ -16,7 +16,7 @@ export const dateCellStyle = style({
   height: 'var(--data-view-cell-text-line-height)',
 });
 
-export const dateValueContainerStyle = style({
+export const dateValueContainerStyle = css({
   padding: '12px',
   backgroundColor: 'var(--layer-background-primary)',
   borderRadius: '12px',
@@ -26,7 +26,7 @@ export const dateValueContainerStyle = style({
   height: '46px',
 });
 
-export const datePickerContainerStyle = style({
+export const datePickerContainerStyle = css({
   padding: '12px',
   backgroundColor: 'var(--layer-background-primary)',
   borderRadius: '12px',

blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts

@@ -17,7 +17,7 @@ import {
   dateCellStyle,
   datePickerContainerStyle,
   dateValueContainerStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 import { datePropertyModelConfig } from './define.js';
 
 export class DateCell extends BaseCellRenderer<number, number> {

blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const multiSelectStyle = style({
+export const multiSelectStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',

blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts

@@ -9,7 +9,7 @@ import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { stopPropagation } from '../../core/utils/event.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
 import type { SelectPropertyData } from '../select/define.js';
-import { multiSelectStyle } from './cell-renderer.css.js';
+import { multiSelectStyle } from './cell-renderer-css.js';
 import { multiSelectPropertyModelConfig } from './define.js';
 
 export class MultiSelectCell extends BaseCellRenderer<

blocksuite/affine/data-view/src/property-presets/number/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const numberStyle = style({
+export const numberStyle = css({
   overflow: 'hidden',
   display: 'flex',
   alignItems: 'center',
@@ -18,7 +18,7 @@ export const numberStyle = style({
   wordBreak: 'break-all',
 });
 
-export const numberInputStyle = style({
+export const numberInputStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',

blocksuite/affine/data-view/src/property-presets/number/cell-renderer.ts

@@ -6,7 +6,7 @@ import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { stopPropagation } from '../../core/utils/event.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
-import { numberInputStyle, numberStyle } from './cell-renderer.css.js';
+import { numberInputStyle, numberStyle } from './cell-renderer-css.js';
 import { numberPropertyModelConfig } from './define.js';
 import type { NumberPropertyDataType } from './types.js';
 import {

blocksuite/affine/data-view/src/property-presets/progress/cell-renderer-css.ts

@@ -1,37 +1,37 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const progressCellStyle = style({
+export const progressCellStyle = css({
   display: 'block',
   width: '100%',
   padding: '0 4px',
   userSelect: 'none',
 });
 
-export const progressContainerStyle = style({
+export const progressContainerStyle = css({
   display: 'flex',
   alignItems: 'center',
   height: 'var(--data-view-cell-text-line-height)',
   gap: '4px',
 });
 
-export const progressBarStyle = style({
+export const progressBarStyle = css({
   position: 'relative',
   width: '100%',
 });
 
-export const progressBgStyle = style({
+export const progressBgStyle = css({
   overflow: 'hidden',
   width: '100%',
   height: '10px',
   borderRadius: '22px',
 });
 
-export const progressFgStyle = style({
+export const progressFgStyle = css({
   height: '100%',
 });
 
-export const progressDragHandleStyle = style({
+export const progressDragHandleStyle = css({
   position: 'absolute',
   top: '0',
   left: '0',
@@ -45,7 +45,7 @@ export const progressDragHandleStyle = style({
   transition: 'opacity 0.2s ease-in-out',
 });
 
-export const progressNumberStyle = style({
+export const progressNumberStyle = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',

blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.ts

@@ -14,7 +14,7 @@ import {
   progressDragHandleStyle,
   progressFgStyle,
   progressNumberStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 import { progressPropertyModelConfig } from './define.js';
 
 const progressColors = {

blocksuite/affine/data-view/src/property-presets/select/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const selectStyle = style({
+export const selectStyle = css({
   overflow: 'hidden',
   display: 'flex',
   alignItems: 'center',

blocksuite/affine/data-view/src/property-presets/select/cell-renderer.ts

@@ -7,7 +7,7 @@ import type { SelectTag } from '../../core/index.js';
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
-import { selectStyle } from './cell-renderer.css.js';
+import { selectStyle } from './cell-renderer-css.js';
 import {
   type SelectPropertyData,
   selectPropertyModelConfig,

blocksuite/affine/data-view/src/property-presets/text/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const textStyle = style({
+export const textStyle = css({
   display: 'flex',
   alignItems: 'center',
   height: '100%',
@@ -19,7 +19,7 @@ export const textStyle = style({
   whiteSpace: 'nowrap',
 });
 
-export const textInputStyle = style({
+export const textInputStyle = css({
   display: 'flex',
   alignItems: 'center',
   height: '100%',

blocksuite/affine/data-view/src/property-presets/text/cell-renderer.ts

@@ -4,7 +4,7 @@ import { query } from 'lit/decorators.js';
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
-import { textInputStyle, textStyle } from './cell-renderer.css.js';
+import { textInputStyle, textStyle } from './cell-renderer-css.js';
 import { textPropertyModelConfig } from './define.js';
 
 export class TextCell extends BaseCellRenderer<string, string> {

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer-css.ts

@@ -1,10 +1,10 @@
+import { css } from '@emotion/css';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { style } from '@vanilla-extract/css';
 
-export const groupFooter = style({
+export const groupFooter = css({
   display: 'block',
 });
-export const addRowWrapper = style({
+export const addRowWrapper = css({
   display: 'flex',
   width: '100%',
   height: '28px',
@@ -16,7 +16,7 @@ export const addRowWrapper = style({
   borderBottom: `1px solid ${cssVarV2.database.border}`,
 });
 
-export const addRowButton = style({
+export const addRowButton = css({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -25,7 +25,7 @@ export const addRowButton = style({
   left: '8px',
 });
 
-export const addRowText = style({
+export const addRowText = css({
   userSelect: 'none',
   fontSize: '12px',
   lineHeight: '20px',

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer.ts

@@ -8,7 +8,7 @@ import { property } from 'lit/decorators.js';
 import { TableViewAreaSelection } from '../../../selection';
 import type { VirtualTableView } from '../../table-view';
 import type { TableGridGroup } from '../../types';
-import * as styles from './group-footer.css';
+import * as styles from './group-footer-css';
 
 export class TableGroupFooter extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header-css.ts

@@ -0,0 +1,5 @@
+import { css } from '@emotion/css';
+
+export const groupHeader = css({
+  display: 'block',
+});

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.css.ts

@@ -1,5 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const groupHeader = style({
-  display: 'block',
-});

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.ts

@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { TableViewAreaSelection } from '../../../selection';
 import type { VirtualTableView } from '../../table-view';
 import type { TableGridGroup } from '../../types';
-import * as styles from './group-header.css';
+import * as styles from './group-header-css';
 import { GroupTitle } from './group-title';
 export class TableGroupHeader extends SignalWatcher(
   WithDisposable(ShadowlessElement)

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title-css.ts

@@ -1,7 +1,7 @@
 import { cssVarV2 } from '@blocksuite/affine-shared/theme';
-import { style } from '@vanilla-extract/css';
+import { css } from '@emotion/css';
 
-export const groupHeaderCount = style({
+export const groupHeaderCount = css({
   flexShrink: 0,
   width: '20px',
   height: '20px',
@@ -14,27 +14,20 @@ export const groupHeaderCount = style({
   fontSize: 'var(--data-view-cell-text-size)',
 });
 
-export const groupHeaderName = style({
-  flex: 1,
-  overflow: 'hidden',
-});
-
-export const groupHeaderOps = style({
+export const groupHeaderOps = css({
   display: 'flex',
   alignItems: 'center',
   opacity: 0,
-  selectors: {
-    '&:has(.active)': {
-      opacity: 1,
-    },
+  '&:has(.active)': {
+    opacity: 1,
   },
 });
 
-export const show = style({
+export const show = css({
   opacity: 1,
 });
 
-export const groupHeaderOp = style({
+export const groupHeaderOp = css({
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -42,14 +35,12 @@ export const groupHeaderOp = style({
   borderRadius: '4px',
   transition: 'all 150ms cubic-bezier(0.42, 0, 1, 1)',
   color: cssVarV2.icon.primary,
-  selectors: {
-    '&:hover, &.active': {
-      backgroundColor: cssVarV2.layer.background.hoverOverlay,
-    },
+  '&:hover, &.active': {
+    backgroundColor: cssVarV2.layer.background.hoverOverlay,
   },
 });
 
-export const groupHeaderIcon = style({
+export const groupHeaderIcon = css({
   display: 'flex',
   alignItems: 'center',
   marginRight: '-4px',
@@ -57,13 +48,13 @@ export const groupHeaderIcon = style({
   fontSize: '16px',
 });
 
-export const groupHeaderTitle = style({
+export const groupHeaderTitle = css({
   color: cssVarV2.text.primary,
   fontSize: 'var(--data-view-cell-text-size)',
   marginLeft: '4px',
 });
 
-export const groupTitleRow = style({
+export const groupTitleRow = css({
   display: 'flex',
   alignItems: 'center',
   gap: '8px',

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title.ts

@@ -16,7 +16,7 @@ import {
   groupHeaderTitle,
   groupTitleRow,
   show,
-} from './group-title.css';
+} from './group-title-css';
 
 function GroupHeaderCount(group: GroupData) {
   const cards = group.rows;

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header-css.ts

@@ -1,16 +1,16 @@
+import { css } from '@emotion/css';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { globalStyle, style } from '@vanilla-extract/css';
 
 import { DEFAULT_COLUMN_TITLE_HEIGHT } from '../../../../consts';
 
-export const columnHeaderContainer = style({
+export const columnHeaderContainer = css({
   display: 'block',
   backgroundColor: 'var(--affine-background-primary-color)',
   position: 'relative',
   zIndex: 2,
 });
 
-export const columnHeader = style({
+export const columnHeader = css({
   position: 'relative',
   display: 'flex',
   flexDirection: 'row',
@@ -21,40 +21,15 @@ export const columnHeader = style({
   backgroundColor: 'var(--affine-background-primary-color)',
 });
 
-export const column = style({
+export const column = css({
   cursor: 'pointer',
 });
 
-export const cell = style({
+export const cell = css({
   userSelect: 'none',
 });
 
-export const columnMove = style({
-  display: 'flex',
-  alignItems: 'center',
-  vars: {
-    '--color': 'var(--affine-placeholder-color)',
-    '--active': 'var(--affine-black-10)',
-    '--bw': '1px',
-    '--bw2': '-1px',
-  },
-  cursor: 'grab',
-  background: 'none',
-  border: 'none',
-  borderRadius: 0,
-  position: 'absolute',
-  inset: 0,
-});
-
-globalStyle(`${columnMove} svg`, {
-  width: '10px',
-  height: '14px',
-  color: 'var(--affine-black-10)',
-  cursor: 'grab',
-  opacity: 0,
-});
-
-export const headerAddColumnButton = style({
+export const headerAddColumnButton = css({
   height: `${DEFAULT_COLUMN_TITLE_HEIGHT}px`,
   backgroundColor: 'var(--affine-background-primary-color)',
   display: 'flex',

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header.ts

@@ -8,7 +8,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
 import type { TableSingleView } from '../../../../table-view-manager';
-import * as styles from './column-header.css';
+import * as styles from './column-header-css';
 
 export class VirtualTableHeader extends SignalWatcher(
   WithDisposable(ShadowlessElement)

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/cell.ts

@@ -19,7 +19,7 @@ import {
 import type { VirtualTableView } from '../table-view';
 import type { TableGridCell } from '../types';
 import { popRowMenu } from './menu';
-import { rowSelectedBg } from './row-header.css';
+import { rowSelectedBg } from './row-header-css';
 export class DatabaseCellContainer extends SignalWatcher(
   WithDisposable(ShadowlessElement)
 ) {

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header-css.ts

@@ -1,18 +1,18 @@
+import { css } from '@emotion/css';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { style } from '@vanilla-extract/css';
 
-export const leftBar = style({
+export const leftBar = css({
   display: 'flex',
   height: '34px',
 });
 
-export const dragHandlerWrapper = style({
+export const dragHandlerWrapper = css({
   backgroundColor: cssVarV2.layer.background.primary,
   marginBottom: '1px',
   display: 'flex',
 });
 
-export const dragHandler = style({
+export const dragHandler = css({
   width: '4px',
   display: 'flex',
   alignItems: 'center',
@@ -22,24 +22,24 @@ export const dragHandler = style({
   opacity: 0,
 });
 
-export const checkboxWrapper = style({
+export const checkboxWrapper = css({
   backgroundColor: cssVarV2.layer.background.primary,
   marginBottom: '1px',
   display: 'flex',
 });
 
-export const rowSelectedBg = style({
+export const rowSelectedBg = css({
   backgroundColor: 'var(--affine-primary-color-04)',
 });
 
-export const dragHandlerIndicator = style({
+export const dragHandlerIndicator = css({
   width: '4px',
   borderRadius: '2px',
   height: '12px',
   backgroundColor: 'var(--affine-placeholder-color)',
 });
 
-export const rowSelectCheckbox = style({
+export const rowSelectCheckbox = css({
   display: 'flex',
   alignItems: 'center',
   opacity: 0,
@@ -48,6 +48,6 @@ export const rowSelectCheckbox = style({
   color: cssVarV2.icon.primary,
 });
 
-export const show = style({
+export const show = css({
   opacity: 1,
 });

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header.ts

@@ -10,7 +10,7 @@ import { html } from 'lit/static-html.js';
 import type { TableSingleView } from '../../table-view-manager.js';
 import type { VirtualTableView } from '../table-view.js';
 import type { TableGridCell } from '../types.js';
-import * as styles from './row-header.css.js';
+import * as styles from './row-header-css.js';
 
 export class TableRowHeader extends SignalWatcher(
   WithDisposable(ShadowlessElement)

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-last.ts

@@ -8,7 +8,7 @@ import { html } from 'lit/static-html.js';
 import type { TableSingleView } from '../../table-view-manager.js';
 import type { VirtualTableView } from '../table-view.js';
 import type { TableGridCell } from '../types.js';
-import * as styles from './row-header.css.js';
+import * as styles from './row-header-css.js';
 
 export class TableRowLast extends SignalWatcher(
   WithDisposable(ShadowlessElement)

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view-css.ts

@@ -0,0 +1,60 @@
+import { css } from '@emotion/css';
+import { cssVarV2 } from '@toeverything/theme/v2';
+
+import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
+
+export const tableView = css({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const tableContainer = css({
+  overflowY: 'auto',
+});
+
+export const tableBlockTable = css({
+  position: 'relative',
+  width: '100%',
+  paddingBottom: '4px',
+  zIndex: 1,
+  overflowX: 'scroll',
+  overflowY: 'hidden',
+  '&::-webkit-scrollbar': {
+    height: '8px',
+  },
+  '&::-webkit-scrollbar-thumb:horizontal': {
+    borderRadius: '4px',
+    backgroundColor: 'transparent',
+  },
+  '&::-webkit-scrollbar-track:horizontal': {
+    backgroundColor: 'transparent',
+    height: '8px',
+  },
+  '&:hover::-webkit-scrollbar-thumb:horizontal': {
+    borderRadius: '4px',
+    backgroundColor: 'var(--affine-black-30)',
+  },
+  '&:hover::-webkit-scrollbar-track:horizontal': {
+    backgroundColor: 'var(--affine-hover-color)',
+    height: '8px',
+  },
+});
+
+export const tableContainer2 = css({
+  position: 'relative',
+  width: 'fit-content',
+  minWidth: '100%',
+});
+
+export const addGroup = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  padding: '6px 12px 6px 8px',
+  color: cssVarV2.text.secondary,
+  fontSize: '12px',
+  lineHeight: '20px',
+  position: 'sticky',
+  left: `${LEFT_TOOL_BAR_WIDTH}px`,
+});

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.css.ts

@@ -1,111 +0,0 @@
-import { cssVarV2 } from '@toeverything/theme/v2';
-import { style } from '@vanilla-extract/css';
-
-import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
-
-export const tableView = style({
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export const tableViewAllElements = style({
-  boxSizing: 'border-box',
-});
-
-export const tableContainer = style({
-  overflowY: 'auto',
-});
-
-export const tableTitleContainer = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  height: '44px',
-  margin: '2px 0 2px',
-});
-
-export const tableBlockTable = style({
-  position: 'relative',
-  width: '100%',
-  paddingBottom: '4px',
-  zIndex: 1,
-  overflowX: 'scroll',
-  overflowY: 'hidden',
-  selectors: {
-    '&::-webkit-scrollbar': {
-      height: '8px',
-    },
-    '&::-webkit-scrollbar-thumb:horizontal': {
-      borderRadius: '4px',
-      backgroundColor: 'transparent',
-    },
-    '&::-webkit-scrollbar-track:horizontal': {
-      backgroundColor: 'transparent',
-      height: '8px',
-    },
-    '&:hover::-webkit-scrollbar-thumb:horizontal': {
-      borderRadius: '4px',
-      backgroundColor: 'var(--affine-black-30)',
-    },
-    '&:hover::-webkit-scrollbar-track:horizontal': {
-      backgroundColor: 'var(--affine-hover-color)',
-      height: '8px',
-    },
-  },
-});
-
-export const tableContainer2 = style({
-  position: 'relative',
-  width: 'fit-content',
-  minWidth: '100%',
-});
-
-export const tableBlockTagCircle = style({
-  width: '12px',
-  height: '12px',
-  borderRadius: '50%',
-  display: 'inline-block',
-});
-
-export const tableBlockTag = style({
-  display: 'inline-flex',
-  borderRadius: '11px',
-  alignItems: 'center',
-  padding: '0 8px',
-  cursor: 'pointer',
-});
-
-export const cellDivider = style({
-  width: '1px',
-  height: '100%',
-  backgroundColor: cssVarV2.layer.insideBorder.border,
-});
-
-export const tableLeftBar = style({
-  display: 'flex',
-  alignItems: 'center',
-  position: 'sticky',
-  zIndex: 1,
-  left: 0,
-  width: `${LEFT_TOOL_BAR_WIDTH}px`,
-  flexShrink: 0,
-});
-
-export const tableBlockRows = style({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'flex-start',
-});
-export const addGroup = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '10px',
-  padding: '6px 12px 6px 8px',
-  color: cssVarV2.text.secondary,
-  fontSize: '12px',
-  lineHeight: '20px',
-  position: 'sticky',
-  left: `${LEFT_TOOL_BAR_WIDTH}px`,
-});

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.ts

@@ -9,7 +9,7 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import * as dv from '../../../core/common/dv.css.js';
+import * as dv from '../../../core/common/dv-css.js';
 import {
   type GroupTrait,
   groupTraitKey,
@@ -31,7 +31,7 @@ import { TableGroupHeader } from './group/top/group-header';
 import { DatabaseCellContainer } from './row/cell';
 import { TableRowHeader } from './row/row-header.js';
 import { TableRowLast } from './row/row-last.js';
-import * as styles from './table-view.css.js';
+import * as styles from './table-view-css.js';
 import type {
   TableCellData,
   TableGrid,

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell-css.ts

@@ -0,0 +1,6 @@
+import { css } from '@emotion/css';
+
+export const cell = css({
+  position: 'absolute',
+  padding: '6px',
+});

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell.css.ts

@@ -1,12 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const cell = style({
-  position: 'absolute',
-  padding: '6px',
-});
-
-export const cellContent = style({
-  padding: '6px',
-  width: '100%',
-  height: '100%',
-});