fix: css style override #911
Conversation
WalkthroughDisables CSS code splitting in the Vite Electron renderer config, updates the vue-renderer-markdown devDependency, relocates the markdown CSS import from main.ts into the global stylesheet, and adds a base typography layer in the renderer’s CSS. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 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 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
electron.vite.config.ts (2)
90-93: cssCodeSplit: false is a pragmatic fix; watch bundle size and cross‑entry bleed.This should stabilize cascade order across async chunks. In a multi‑entry renderer (shell/index/floating/splash), it will also merge CSS into a single stylesheet, increasing size and applying styles globally to all entries. If that becomes an issue, consider gating by mode/env:
Apply if needed:
-import { defineConfig, externalizeDepsPlugin } from 'electron-vite' +import { defineConfig, externalizeDepsPlugin } from 'electron-vite' -export default defineConfig({ +export default defineConfig(({ mode }) => ({ renderer: { build: { - cssCodeSplit: false, + cssCodeSplit: mode === 'production' ? false : true, } } -}) +}))
72-73: Non‑English inline comment in TS.Project rules require English for comments in TS/JS. Please translate.
- host: '0.0.0.0' // 防止代理干扰，导致vite-electron之间ws://localhost:5713和http://localhost:5713通信失败、页面组件无法加载 + host: '0.0.0.0' // Prevent proxy interference that breaks Vite↔Electron WS/HTTP (5713) and component loadingsrc/renderer/src/assets/style.css (2)
142-153: Font stack tweak (optional).Consider placing 'Segoe UI' before system-ui for better Windows fallback consistency.
- 'Geist', - Noto Sans, - ui-sans-serif, - system-ui, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji', - 'Segoe UI Symbol', - 'Noto Color Emoji'; + 'Geist', + Noto Sans, + 'Segoe UI', + ui-sans-serif, + system-ui, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji';
81-86: Translate comments to English for consistency.Project guidance prefers English comments. No behavioral change.
-/* 亮绿 */ +/* bright green */ -/* 亮黄 */ +/* bright yellow */ -/* 亮红 */ +/* bright red */ -/* 暗绿 */ +/* dark green */ -/* 暗黄 */ +/* dark yellow */ -/* 暗红 */ +/* dark red */Also applies to: 124-129
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
electron.vite.config.ts(1 hunks)package.json(1 hunks)src/renderer/src/assets/style.css(4 hunks)src/renderer/src/main.ts(0 hunks)
💤 Files with no reviewable changes (1)
- src/renderer/src/main.ts
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
**/*.{js,jsx,ts,tsx}: Use OxLint for JS/TS code; pre-commit hooks run lint-staged and typecheck
Use camelCase for variables and functions
Use PascalCase for types and classes
Use SCREAMING_SNAKE_CASE for constants
Files:
electron.vite.config.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
electron.vite.config.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
electron.vite.config.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)
Files:
electron.vite.config.ts
**/*.{js,jsx,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting: single quotes, no semicolons, max width 100
Files:
electron.vite.config.ts
src/renderer/src/**/*
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/assets/style.css
src/renderer/src/**
📄 CodeRabbit inference engine (AGENTS.md)
Put application code for the Vue app under src/renderer/src (components, stores, views, i18n, lib)
Files:
src/renderer/src/assets/style.css
🧠 Learnings (17)
📓 Common learnings
Learnt from: neoragex2002
PR: ThinkInAIXYZ/deepchat#807
File: src/renderer/src/components/markdown/MarkdownRenderer.vue:58-58
Timestamp: 2025-08-28T08:07:05.182Z
Learning: In src/renderer/src/components/markdown/MarkdownRenderer.vue, the unscoped <style> tag is intentionally used for global prose styles and the anchor .markdown-renderer fix, as confirmed by user neoragex2002.
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-06T03:07:23.817Z
Learning: Applies to src/renderer/{src,shell,floating}/**/*.vue : Use Tailwind CSS utilities and ensure styles are scoped in Vue components
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-21T01:47:11.608Z
Learning: Applies to src/renderer/**/*.{vue,ts,js,tsx,jsx} : 渲染进程代码放在 `src/renderer`
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.
Applied to files:
package.jsonsrc/renderer/src/assets/style.css
📚 Learning: 2025-09-16T07:06:30.926Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: AGENTS.md:0-0
Timestamp: 2025-09-16T07:06:30.926Z
Learning: Applies to test/{main,renderer}/**/*.{test,spec}.ts : Write tests with Vitest (jsdom) and Vue Test Utils
Applied to files:
package.json
📚 Learning: 2025-07-21T01:46:30.354Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/i18n.mdc:0-0
Timestamp: 2025-07-21T01:46:30.354Z
Learning: Applies to src/renderer/src/**/* : Use the 'vue-i18n' framework for all internationalization in the renderer
Applied to files:
package.json
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Vue 3 with TypeScript, leveraging defineComponent and PropType.
Applied to files:
package.json
📚 Learning: 2025-09-16T07:06:30.926Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: AGENTS.md:0-0
Timestamp: 2025-09-16T07:06:30.926Z
Learning: Applies to src/renderer/src/**/*.{vue,ts} : All user-facing strings in the renderer must use vue-i18n keys defined in src/renderer/src/i18n
Applied to files:
package.json
📚 Learning: 2025-07-21T01:47:11.608Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-21T01:47:11.608Z
Learning: Applies to src/renderer/**/*.{vue,ts,js,tsx,jsx} : 渲染进程代码放在 `src/renderer`
Applied to files:
package.json
📚 Learning: 2025-08-28T08:07:05.182Z
Learnt from: neoragex2002
PR: ThinkInAIXYZ/deepchat#807
File: src/renderer/src/components/markdown/MarkdownRenderer.vue:58-58
Timestamp: 2025-08-28T08:07:05.182Z
Learning: In src/renderer/src/components/markdown/MarkdownRenderer.vue, the unscoped <style> tag is intentionally used for global prose styles and the anchor .markdown-renderer fix, as confirmed by user neoragex2002.
Applied to files:
src/renderer/src/assets/style.css
📚 Learning: 2025-09-06T03:07:23.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-06T03:07:23.817Z
Learning: Applies to src/renderer/{src,shell,floating}/**/*.vue : Use Tailwind CSS utilities and ensure styles are scoped in Vue components
Applied to files:
src/renderer/src/assets/style.css
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Prefer "lucide:" icon family as the primary choice.
Applied to files:
src/renderer/src/assets/style.css
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use template syntax for declarative rendering.
Applied to files:
src/renderer/src/assets/style.css
📚 Learning: 2025-07-21T01:47:28.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:47:28.817Z
Learning: Applies to src/renderer/src/**/*.vue : Use scoped styles to prevent CSS conflicts between components
Applied to files:
src/renderer/src/assets/style.css
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Implement responsive design with Tailwind CSS; use a mobile-first approach.
Applied to files:
src/renderer/src/assets/style.css
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/{composables,utils}/**/*.ts : Use VueUse for common composables and utility functions.
Applied to files:
src/renderer/src/assets/style.css
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Import Icon component from Iconify/Vue.
Applied to files:
src/renderer/src/assets/style.css
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use <script setup> syntax for concise component definitions.
Applied to files:
src/renderer/src/assets/style.css
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Iconify/Vue for icon implementation.
Applied to files:
src/renderer/src/assets/style.css
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
🔇 Additional comments (4)
src/renderer/src/assets/style.css (3)
1-1: Good move: centralize markdown CSS import to control order.Importing vue-renderer-markdown CSS here ties it to the main stylesheet and, with cssCodeSplit disabled, prevents late‑loaded chunks from reordering it. Keep it above app overrides if the app should win in cascade. If you need markdown to win, relocate this import to the bottom of the file.
Please confirm that the import was removed from src/renderer/src/main.ts and that all renderer entries include this stylesheet so markdown styling is available everywhere.
138-140: Base typography on body is sensible.Applying bg-transparent, text-foreground, and font-text at body is consistent with the new tokens.
161-163: Utility class for text weight looks good.Defines a single source of truth via CSS variable; aligns with new tokens.
package.json (1)
160-160: Confirm CSS import & peer deps
- CSS: src/renderer/src/assets/style.css contains "@import 'vue-renderer-markdown/index.css'".
- JS: library APIs are imported in src/renderer/src/components/markdown/MarkdownRenderer.vue and (at least) AboutUsSettings.vue, UpdateDialog.vue, MessageBlockThink.vue, CodeArtifact.vue.
- npm shows vue-renderer-markdown declares peerDependencies (vue, @iconify/vue, @vueuse/core, katex, mermaid, vue-use-monaco) — verify those peers are present in your package.json and that the class names used by MarkdownRenderer still match the library's CSS. (npmjs.com)
fix css style after build
Summary by CodeRabbit
Style
Chores
Refactor