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/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(