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

close: BS-3446  ## 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.
2025-05-09 10:08:03 +00:00
parent a5872dff65
commit 7b6e00d84a
51 changed files with 374 additions and 482 deletions
--- a/blocksuite/affine/blocks/database/package.json
+++ b/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",
--- a/blocksuite/affine/blocks/database/src/properties/link/cell-renderer-css.ts
+++ b/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',
 });
--- a/blocksuite/affine/blocks/database/src/properties/link/cell-renderer.ts
+++ b/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> {
--- a/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer-css.ts
+++ b/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',
--- a/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.ts
+++ b/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(
--- a/blocksuite/affine/blocks/database/src/properties/title/cell-renderer-css.ts
+++ b/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',
--- a/blocksuite/affine/blocks/database/src/properties/title/text.ts
+++ b/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;
--- a/blocksuite/affine/blocks/table/package.json
+++ b/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",
--- a/blocksuite/affine/blocks/table/src/add-button-css.ts
+++ b/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',
--- a/blocksuite/affine/blocks/table/src/add-button.ts
+++ b/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';

--- a/blocksuite/affine/blocks/table/src/table-block-css.ts
+++ b/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({});
--- a/blocksuite/affine/blocks/table/src/table-block.css.ts
+++ b/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({});
--- a/blocksuite/affine/blocks/table/src/table-block.ts
+++ b/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';
--- a/blocksuite/affine/blocks/table/src/table-cell-css.ts
+++ b/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',
--- a/blocksuite/affine/blocks/table/src/table-cell.ts
+++ b/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(