feat(@core/base): 新增CSS变量转RGBA颜色功能 #7130
Conversation
新增cssVarToRgba函数，用于将CSS自定义属性变量转换为RGBA颜色字符串， 支持设置透明度，默认为1（不透明），可用于echarts动态更改主题颜色。
abcd0f
requested review from
anncwb,
jinmao88,
mynetfan and
vince292007
as code owners
|
📝 WalkthroughWalkthroughA new utility function Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/`@core/base/shared/src/color/convert.ts:
- Around line 63-69: The cssVarToRgba function accesses document.documentElement
and getComputedStyle directly and doesn't validate the returned CSS variable
value; update cssVarToRgba to be safe in SSR by early-returning or throwing when
window/document are undefined (guarding access to document.documentElement and
getComputedStyle), and validate the result of getPropertyValue(cssVar) (ensure
non-empty and matches expected HSL parts) before calling convertToRgb and
TinyColor; if invalid, return a sensible fallback (e.g., null or a default rgba
string) or throw a clear error so server environments and missing CSS variables
are handled predictably.
🧹 Nitpick comments (1)
packages/@core/base/shared/src/color/convert.ts (1)
63-63: Add explicit return type annotation.For consistency with the other functions in this file and for better type safety, consider adding an explicit return type.
✏️ Suggested fix
-function cssVarToRgba(cssVar: string, alpha = 1) { +function cssVarToRgba(cssVar: string, alpha = 1): string {
| function cssVarToRgba(cssVar: string, alpha = 1) { | ||
| const el = document.documentElement; | ||
| const hslVal = getComputedStyle(el).getPropertyValue(cssVar).trim(); | ||
| const color = convertToRgb(`hsl(${hslVal})`); | ||
| const rgba = new TinyColor(color).setAlpha(alpha).toRgbString(); | ||
| return rgba; | ||
| } |
There was a problem hiding this comment.
SSR/Node.js compatibility issue: document is undefined in server environments.
Directly accessing document.documentElement will throw a ReferenceError in SSR or Node.js contexts. Consider adding a guard or documenting that this function is browser-only.
Additionally, if the CSS variable doesn't exist, getPropertyValue returns an empty string, resulting in hsl() which silently converts to black (rgb(0, 0, 0)). Consider validating and handling this case explicitly.
🛠️ Suggested fix with SSR guard and validation
function cssVarToRgba(cssVar: string, alpha = 1): string {
+ if (typeof document === 'undefined') {
+ console.warn('cssVarToRgba: document is not available in this environment');
+ return `rgba(0, 0, 0, ${alpha})`;
+ }
const el = document.documentElement;
const hslVal = getComputedStyle(el).getPropertyValue(cssVar).trim();
+ if (!hslVal) {
+ console.warn(`cssVarToRgba: CSS variable "${cssVar}" not found or empty`);
+ return `rgba(0, 0, 0, ${alpha})`;
+ }
const color = convertToRgb(`hsl(${hslVal})`);
const rgba = new TinyColor(color).setAlpha(alpha).toRgbString();
return rgba;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function cssVarToRgba(cssVar: string, alpha = 1) { | |
| const el = document.documentElement; | |
| const hslVal = getComputedStyle(el).getPropertyValue(cssVar).trim(); | |
| const color = convertToRgb(`hsl(${hslVal})`); | |
| const rgba = new TinyColor(color).setAlpha(alpha).toRgbString(); | |
| return rgba; | |
| } | |
| function cssVarToRgba(cssVar: string, alpha = 1): string { | |
| if (typeof document === 'undefined') { | |
| console.warn('cssVarToRgba: document is not available in this environment'); | |
| return `rgba(0, 0, 0, ${alpha})`; | |
| } | |
| const el = document.documentElement; | |
| const hslVal = getComputedStyle(el).getPropertyValue(cssVar).trim(); | |
| if (!hslVal) { | |
| console.warn(`cssVarToRgba: CSS variable "${cssVar}" not found or empty`); | |
| return `rgba(0, 0, 0, ${alpha})`; | |
| } | |
| const color = convertToRgb(`hsl(${hslVal})`); | |
| const rgba = new TinyColor(color).setAlpha(alpha).toRgbString(); | |
| return rgba; | |
| } |
🤖 Prompt for AI Agents
In `@packages/`@core/base/shared/src/color/convert.ts around lines 63 - 69, The
cssVarToRgba function accesses document.documentElement and getComputedStyle
directly and doesn't validate the returned CSS variable value; update
cssVarToRgba to be safe in SSR by early-returning or throwing when
window/document are undefined (guarding access to document.documentElement and
getComputedStyle), and validate the result of getPropertyValue(cssVar) (ensure
non-empty and matches expected HSL parts) before calling convertToRgb and
TinyColor; if invalid, return a sensible fallback (e.g., null or a default rgba
string) or throw a clear error so server environments and missing CSS variables
are handled predictably.
2 participants
PR Description
📝 Summary
Add
cssVarToRgbautility function to convert CSS variables to RGBA color strings for dynamic theme support in charts.🎯 Purpose
When using charting libraries like ECharts, we need to convert project CSS variables (typically in HSL format) to RGBA format to:
✨ Changes
New Features
cssVarToRgba(cssVar: string, alpha?: number): stringfunctionImplementation Details
document.documentElementconvertToRgbTinyColorlibrary to set alpha and output RGBA string💻 Code
🔧 Usage Example
📦 Dependencies
TinyColor: Color manipulation libraryconvertToRgb: Internal HSL to RGB conversion function✅ Testing Checklist
📋 Type of Change
🔗 Related Issues
Closes #[issue_number] (if applicable)
📌 Notes
hsl()wrapper, in the format221 83% 53%--prefix (e.g.,'--primary-color')Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.