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/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%',
-});