refactor: 调整暗黑主题样式的加载方式, 避免样式污染和构建错误 (#2988)

* refactor: 调整暗黑主题样式的加载方式, 避免样式污染和构建错误 * test: 完善单测
antvis · Nov 26, 2024 · fa142fa · fa142fa
1 parent e28baa0
commit fa142fa
Show file tree

Hide file tree

Showing 19 changed files with 67 additions and 71 deletions.
diff --git a/.github/workflows/prerelease-notify.yml b/.github/workflows/prerelease-notify.yml
@@ -19,7 +19,7 @@ jobs:
             ${{ secrets.DING_TALK_GROUP_TOKEN }}
             ${{ secrets.DING_TALK_PUBLIC_TOKEN }}
           notify_title: '🎉 AntV/S2 测试版发布 🎉'
-          notify_body: '🎉 AntV/S2 新版本发布啦 🎉 <br/> ![preview](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1PTTQLk3j5AAAAAAAAAAAAAADmJ7AQ/original) <hr /> [**点击查看更新日志**](https://github.com/antvis/S2/releases) <hr />'
+          notify_body: '🎉 **AntV/S2 新版本发布啦** 🎉 <hr /><br/> ![preview](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1PTTQLk3j5AAAAAAAAAAAAAADmJ7AQ/original) <hr /> [**点击查看更新日志**](https://github.com/antvis/S2/releases) <hr />'
           notify_footer: '> 该版本为测试版, 请谨慎使用 ([AntV/S2 Releases](https://github.com/antvis/S2/releases))'
           at_all: false
           enable_prerelease: true
diff --git a/.github/workflows/release-notify.yml b/.github/workflows/release-notify.yml
@@ -19,7 +19,7 @@ jobs:
             ${{ secrets.DING_TALK_GROUP_TOKEN }}
             ${{ secrets.DING_TALK_PUBLIC_TOKEN }}
           notify_title: '🎉 AntV/S2 新版本发布啦 🎉'
-          notify_body: '🎉 AntV/S2 新版本发布啦 🎉 <br/> ![preview](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1PTTQLk3j5AAAAAAAAAAAAAADmJ7AQ/original) <hr /> [**点击查看更新日志**](https://github.com/antvis/S2/releases) <hr />'
+          notify_body: '🎉 **AntV/S2 新版本发布啦** 🎉 <hr /><br/> ![preview](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1PTTQLk3j5AAAAAAAAAAAAAADmJ7AQ/original) <hr /> [**点击查看更新日志**](https://github.com/antvis/S2/releases) <hr />'
           notify_footer: '> [AntV/S2 Releases](https://github.com/antvis/S2/releases)'
           at_all: false
           enable_prerelease: false
diff --git a/build.config.base.mjs b/build.config.base.mjs
@@ -40,10 +40,6 @@ export const getBaseConfig = ({
     // 防止开发模式下直接加载 s2-core 中的主题 less
     resolve.alias.push(
       ...[
-        {
-          find: /^(.*)\/theme\/(.*)\.less$/,
-          replacement: '$1/theme/$2.less?inline',
-        },
         {
           find: /^@antv\/s2$/,
           replacement: path.join(__dirname, './packages/s2-core/src'),

diff --git a/packages/s2-core/__tests__/spreadsheet/tooltip-spec.ts b/packages/s2-core/__tests__/spreadsheet/tooltip-spec.ts
@@ -1,4 +1,5 @@
 import type { S2Options } from '@/common/interface';
+import { DARK_THEME_CLS } from '@antv/s2';
 import { createPivotSheet } from 'tests/util/helpers';
 
 const s2Options: S2Options = {
@@ -106,4 +107,19 @@ describe('Tooltip Tests', () => {
 
     s2.destroy();
   });
+
+  test('should render dark theme tooltip style', async () => {
+    const s2 = createS2({ enable: true });
+
+    s2.setThemeCfg({
+      name: 'dark',
+    });
+
+    await s2.render();
+    s2.showTooltip({ position: { x: 0, y: 0 } });
+
+    expect(document.querySelector(`body > .${DARK_THEME_CLS}`)).toBeTruthy();
+
+    s2.destroy();
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts b/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts
@@ -29,6 +29,7 @@ import {
   getTooltipOptions,
   setTooltipContainerStyle,
 } from '@/utils/tooltip';
+import { DARK_THEME_CLS } from '@antv/s2';
 import { omit } from 'lodash';
 import * as dataConfig from 'tests/data/mock-dataset.json';
 import {
@@ -1221,6 +1222,16 @@ describe('Tooltip Utils Tests', () => {
     );
   });
 
+  test('should set container dark style', () => {
+    const container = document.createElement('div');
+
+    setTooltipContainerStyle(container, {
+      dark: true,
+    });
+
+    expect(container.classList.contains(DARK_THEME_CLS)).toBeTruthy();
+  });
+
   test('should get custom fields summaries of custom tree', () => {
     const mockData = [
       {

diff --git a/packages/s2-core/__tests__/util/helpers.ts b/packages/s2-core/__tests__/util/helpers.ts
@@ -215,6 +215,7 @@ export const createFakeSpreadSheet = (config?: {
   s2.hideTooltip = jest.fn();
   s2.showTooltip = jest.fn();
   s2.showTooltipWithInfo = jest.fn();
+  s2.getThemeName = jest.fn();
   s2.isTableMode = jest.fn();
   s2.isPivotMode = jest.fn();
   s2.getCell = jest.fn();

diff --git a/packages/s2-core/rollup.config.mjs b/packages/s2-core/rollup.config.mjs
@@ -1,5 +1,4 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import alias from '@rollup/plugin-alias';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
@@ -32,14 +31,6 @@ const output = {
 
 const plugins = [
   peerDepsExternal(),
-  alias({
-    entries: [
-      {
-        find: /^(?<name>.*).less\?inline$/,
-        replacement: '$1.less',
-      },
-    ],
-  }),
   replace({
     'process.env.NODE_ENV': JSON.stringify('production'),
     preventAssignment: true,

diff --git a/packages/s2-core/src/common/constant/theme.ts b/packages/s2-core/src/common/constant/theme.ts
@@ -23,10 +23,7 @@ export const FONT_FAMILY =
 
 export const INTERVAL_BAR_HEIGHT = 12;
 
-/**
- * 注入主题 css 变量的节点名
- */
-export const STYLE_ELEMENT_ID = `${S2_PREFIX_CLS}-core-vars`;
+export const DARK_THEME_CLS = `${S2_PREFIX_CLS}-dark-theme`;
 
 /**
  * 兼容 G2 主题: S2 和 G2 的主题名转换

diff --git a/packages/s2-core/src/shared/constant/theme.ts b/packages/s2-core/src/shared/constant/theme.ts
diff --git a/packages/s2-core/src/shared/styles/theme/dark.less b/packages/s2-core/src/shared/styles/theme/dark.less
diff --git a/packages/s2-core/src/shared/styles/tooltip/operator.less b/packages/s2-core/src/shared/styles/tooltip/operator.less
@@ -54,7 +54,7 @@
 
       &.ant-menu-submenu-selected {
         background-color: var(
-          --antv-s2-tooltip-operator-menu-selected-background,
+          ~'@{css-var-prefix}-tooltip-operator-menu-selected-background',
           #e6f4ff
         );
       }

diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -70,7 +70,6 @@ import { clearValueRangeState } from '../utils/condition/state-controller';
 import { hideColumnsByThunkGroup } from '../utils/hide-columns';
 import { isMobile } from '../utils/is-mobile';
 import { customMerge, setupDataConfig, setupOptions } from '../utils/merge';
-import { injectThemeVars } from '../utils/theme';
 import { getTooltipData, getTooltipOptions } from '../utils/tooltip';
 import type { PivotSheet } from './pivot-sheet';
 import type { TableSheet } from './table-sheet';
@@ -548,7 +547,6 @@ export abstract class SpreadSheet extends EE {
 
     this.theme = customMerge(newTheme, theme);
     this.setThemeName(themeCfg?.name!);
-    injectThemeVars(themeCfg?.name);
   }
 
   public setTheme(theme: S2Theme) {

diff --git a/packages/s2-core/src/styles/theme/dark.less b/packages/s2-core/src/styles/theme/dark.less
@@ -1,9 +1,27 @@
 @import '../variables.less';
 
-:root {
+.@{s2-cls-prefix}-dark-theme {
+  @white: #fff;
+
   // container
   @{css-var-prefix}-background: #000;
   @{css-var-prefix}-tooltip-background: rgba(43, 43, 43, 0.95);
   @{css-var-prefix}-tooltip-operator-background: rgba(43, 43, 43, 0.95);
   @{css-var-prefix}-tooltip-operator-menu-selected-background: #1677ff;
+
+  // container
+  @{css-var-prefix}-container-background: #191919;
+  @{css-var-prefix}-block-background: #232323;
+
+  // text
+  @{css-var-prefix}-font: @white;
+
+  each(range(19), {
+    @fadePercent: 100 - @value * 5;
+    @{css-var-prefix}-font-@{fadePercent}: fade(@white, @fadePercent);
+  });
+
+  // border
+  @{css-var-prefix}-border: fade(@white, 15);
+  @{css-var-prefix}-divider: fade(@white, 10);
 }
diff --git a/packages/s2-core/src/ui/tooltip/index.less b/packages/s2-core/src/ui/tooltip/index.less
@@ -1,4 +1,5 @@
 @import '../../styles/variables.less';
+@import '../../styles/theme/dark.less';
 
 .@{tooltip-cls-prefix} {
   &-container {

diff --git a/packages/s2-core/src/ui/tooltip/index.ts b/packages/s2-core/src/ui/tooltip/index.ts
@@ -11,7 +11,6 @@ import {
   getAutoAdjustPosition,
   setTooltipContainerStyle,
 } from '../../utils/tooltip';
-
 import './index.less';
 
 /**
@@ -73,6 +72,7 @@ export class BaseTooltip<
         pointerEvents: 'all',
       },
       visible: true,
+      dark: this.spreadsheet.getThemeName() === 'dark',
     });
   }
 

diff --git a/packages/s2-core/src/utils/theme.ts b/packages/s2-core/src/utils/theme.ts
@@ -1,22 +1,9 @@
-import { PALETTE_MAP, STYLE_ELEMENT_ID } from '../common/constant';
+import { PALETTE_MAP } from '../common/constant';
 import type { Palette, ThemeName } from '../common/interface/theme';
-import DarkVars from '../styles/theme/dark.less';
-import { injectCssText } from './inject-css-text';
 
 /**
  * 获取当前的主题色板
  */
 export const getPalette = (themeName?: ThemeName): Palette => {
   return PALETTE_MAP[themeName!] || PALETTE_MAP['default'];
 };
-
-/**
- * 根据主题注入组件的 CSS 变量
- */
-export const injectThemeVars = (themeName?: ThemeName) => {
-  // 目前仅 dark 主题需要定制
-  injectCssText(
-    STYLE_ELEMENT_ID,
-    themeName === 'dark' ? (DarkVars as string) : '',
-  );
-};
diff --git a/packages/s2-core/src/utils/tooltip.ts b/packages/s2-core/src/utils/tooltip.ts
@@ -29,6 +29,7 @@ import {
 } from 'lodash';
 import {
   CellType,
+  DARK_THEME_CLS,
   EXTRA_FIELD,
   PRECISION,
   VALUE_FIELD,
@@ -153,13 +154,14 @@ export const setTooltipContainerStyle = (
     visible?: boolean;
     style?: CSS.Properties;
     className?: string[];
+    dark?: boolean;
   },
 ) => {
   if (!container) {
     return;
   }
 
-  const { style, className = [], visible } = options;
+  const { style, className = [], visible, dark = false } = options;
 
   if (style) {
     Object.assign(container.style, style);
@@ -173,6 +175,7 @@ export const setTooltipContainerStyle = (
 
   container.classList.toggle(TOOLTIP_CONTAINER_SHOW_CLS, visible);
   container.classList.toggle(TOOLTIP_CONTAINER_HIDE_CLS, !visible);
+  container.classList.toggle(DARK_THEME_CLS, dark);
 };
 
 export const getListItem = (

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable no-console */
 import {
+  DARK_THEME_CLS,
   DEFAULT_FROZEN_COUNTS,
   DEFAULT_STYLE,
   Node,
@@ -22,6 +23,7 @@ import {
   type ThemeCfg,
   type TooltipAutoAdjustBoundary,
 } from '@antv/s2';
+import '@antv/s2/src/styles/theme/dark.less';
 import { useUpdateEffect } from 'ahooks';
 import {
   Button,
@@ -40,6 +42,7 @@ import {
   Tooltip,
   type RadioChangeEvent,
 } from 'antd';
+import cls from 'classnames';
 import { debounce, isEmpty, random } from 'lodash';
 import React from 'react';
 import { ChromePicker } from 'react-color';
@@ -391,7 +394,11 @@ function MainLayout() {
           logHandler,
         }}
       >
-        <div className="playground">
+        <div
+          className={cls('playground', {
+            [DARK_THEME_CLS]: themeCfg.name === 'dark',
+          })}
+        >
           <LinkGroup />
           <Tabs
             defaultActiveKey={localStorage.getItem('debugTabKey') || 'basic'}

diff --git a/packages/s2-react/src/components/sheets/base-sheet/index.tsx b/packages/s2-react/src/components/sheets/base-sheet/index.tsx
@@ -1,4 +1,4 @@
-import { S2_PREFIX_CLS, injectThemeVars } from '@antv/s2';
+import { S2_PREFIX_CLS } from '@antv/s2';
 import { isFunction } from 'lodash';
 import React from 'react';
 import { useSpreadSheet } from '../../../hooks/useSpreadSheet';
@@ -12,10 +12,6 @@ export const BaseSheet: React.FC<SheetComponentProps> = React.memo((props) => {
     ? props.children({ pagination })
     : props.children;
 
-  React.useEffect(() => {
-    injectThemeVars(props.themeCfg?.name);
-  }, [props.themeCfg?.name]);
-
   return (
     <div ref={wrapperRef} className={`${S2_PREFIX_CLS}-wrapper`}>
       <div ref={containerRef} className={`${S2_PREFIX_CLS}-container`} />