fix: 兼容不支持less的项目 (#3181)

Alexzjt · web-flow · commit 26dbcf8348b9 · 2025-06-09T13:44:15.000+08:00
* refactor: tooltip的less改为css

* refactor: tooltip的less改为css

* refactor: tooltip的less改为css

* refactor: tooltip的less改为css
diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json
@@ -58,7 +58,7 @@
     "build:esm": "tsc --module ESNext --outDir esm -p tsconfig.build.json && pnpm build:sync-assets esm/",
     "build:size-limit": "size-limit",
     "build:size-limit-json": "pnpm build:size-limit -- --json",
-    "build:sync-assets": "copyfiles -u 1 \"src/**/*.{less,svg}\"",
+    "build:sync-assets": "copyfiles -u 1 \"src/**/*.{css,less,svg}\"",
     "build:umd": "cross-env FORMAT=umd rollup -c rollup.config.mjs",
     "clean": "rimraf lib esm dist temp",
     "start": "pnpm test:live",
diff --git a/packages/s2-core/src/index.ts b/packages/s2-core/src/index.ts
@@ -10,6 +10,7 @@ export * from './facet';
 export * from './interaction';
 export * from './shared';
 export * from './sheet-type';
+export * from './styles';
 export * from './theme';
 export * from './ui/scrollbar';
 export * from './ui/tooltip';
diff --git a/packages/s2-core/src/shared/styles/tooltip/index.less b/packages/s2-core/src/shared/styles/tooltip/index.less
@@ -1,4 +1,4 @@
-@import '../../../ui/tooltip/index.less';
+@import '../../../styles/variables.less';
 
 .@{tooltip-cls-prefix} {
   &-tips,
diff --git a/packages/s2-core/src/styles/index.ts b/packages/s2-core/src/styles/index.ts
@@ -0,0 +1 @@
+import './theme/dark.css';
diff --git a/packages/s2-core/src/styles/theme/dark.css b/packages/s2-core/src/styles/theme/dark.css
@@ -0,0 +1,30 @@
+.antv-s2-dark-theme {
+    --antv-s2-background: #000;
+    --antv-s2-tooltip-background: rgba(43, 43, 43, .95);
+    --antv-s2-tooltip-operator-background: rgba(43, 43, 43, .95);
+    --antv-s2-tooltip-operator-menu-selected-background: #1677ff;
+    --antv-s2-container-background: #191919;
+    --antv-s2-block-background: #232323;
+    --antv-s2-font: #fff;
+    --antv-s2-font-95: hsla(0, 0%, 100%, .95);
+    --antv-s2-font-90: hsla(0, 0%, 100%, .9);
+    --antv-s2-font-85: hsla(0, 0%, 100%, .85);
+    --antv-s2-font-80: hsla(0, 0%, 100%, .8);
+    --antv-s2-font-75: hsla(0, 0%, 100%, .75);
+    --antv-s2-font-70: hsla(0, 0%, 100%, .7);
+    --antv-s2-font-65: hsla(0, 0%, 100%, .65);
+    --antv-s2-font-60: hsla(0, 0%, 100%, .6);
+    --antv-s2-font-55: hsla(0, 0%, 100%, .55);
+    --antv-s2-font-50: hsla(0, 0%, 100%, .5);
+    --antv-s2-font-45: hsla(0, 0%, 100%, .45);
+    --antv-s2-font-40: hsla(0, 0%, 100%, .4);
+    --antv-s2-font-35: hsla(0, 0%, 100%, .35);
+    --antv-s2-font-30: hsla(0, 0%, 100%, .3);
+    --antv-s2-font-25: hsla(0, 0%, 100%, .25);
+    --antv-s2-font-20: hsla(0, 0%, 100%, .2);
+    --antv-s2-font-15: hsla(0, 0%, 100%, .15);
+    --antv-s2-font-10: hsla(0, 0%, 100%, .1);
+    --antv-s2-font-5: hsla(0, 0%, 100%, .05);
+    --antv-s2-border: hsla(0, 0%, 100%, .15);
+    --antv-s2-divider: hsla(0, 0%, 100%, .1)
+}
diff --git a/packages/s2-core/src/styles/theme/dark.less b/packages/s2-core/src/styles/theme/dark.less
diff --git a/packages/s2-core/src/ui/tooltip/index.css b/packages/s2-core/src/ui/tooltip/index.css
@@ -0,0 +1,33 @@
+.antv-s2-tooltip-container {
+  position: fixed;
+  user-select: text;
+  min-width: 200px;
+  max-width: 640px;
+  max-height: 100vh;
+  overflow: auto;
+  z-index: 1024;
+  display: inline-block;
+  background: var(--antv-s2-tooltip-background, rgba(255, 255, 255, 0.95));
+  border-radius: 4px;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+  font-size: 12px;
+  font-family: Roboto, 'PingFang SC', 'Chinese Quote', 'Segoe UI',
+  'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
+  sans-serif;
+}
+
+.antv-s2-tooltip-container-hide {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.antv-s2-tooltip-container-hide * {
+  transition: none;
+}
+
+.antv-s2-tooltip-container-show {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
diff --git a/packages/s2-core/src/ui/tooltip/index.less b/packages/s2-core/src/ui/tooltip/index.less
diff --git a/packages/s2-core/src/ui/tooltip/index.ts b/packages/s2-core/src/ui/tooltip/index.ts
@@ -11,7 +11,7 @@ import {
   getAutoAdjustPosition,
   setTooltipContainerStyle,
 } from '../../utils/tooltip';
-import './index.less';
+import './index.css';
 
 /**
  * Tooltip 基类
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -23,7 +23,7 @@ import {
   type ThemeCfg,
   type TooltipAutoAdjustBoundary,
 } from '@antv/s2';
-import '@antv/s2/src/styles/theme/dark.less';
+import '@antv/s2/src/styles/theme/dark.css';
 import { useUpdateEffect } from 'ahooks';
 import {
   Button,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '../../../ui/tooltip/index.less';`
	`1`	`+@import '../../../styles/variables.less';`
`2`	`2`
`3`	`3`	`.@{tooltip-cls-prefix} {`
`4`	`4`	`&-tips,`