Don't inline CSS for comment widget #276479
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: alexr00 <[email protected]>
Copilot
AI
changed the title
[WIP] Remove inline CSS for comment widget
Don't inline CSS for comment widget
Nov 10, 2025
Copilot finished work on behalf of
alexr00
November 10, 2025 12:09
alexr00
approved these changes
Nov 11, 2025
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the comment widget theme styling by replacing dynamically generated inline CSS with static CSS rules that use CSS custom properties (variables). This eliminates runtime CSS generation and reduces code complexity.
Key changes:
- Removed dynamic CSS generation code from
applyThememethod - Moved all theme-dependent styles to static CSS file using CSS variables
- Retained only font-related CSS custom property assignments in TypeScript
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/vs/workbench/contrib/comments/browser/commentThreadWidget.ts |
Removed _styleElement field, dynamic CSS content generation, and unused theme color imports; simplified applyTheme to only set font custom properties |
src/vs/workbench/contrib/comments/browser/media/review.css |
Added static CSS rules using CSS variables for theme colors (links, focus, blockquotes, borders, validation errors, thread state, code fonts) |
Comment on lines
380
to
383
| const fontSizeVar = '--comment-thread-editor-font-size'; | ||
| const fontWeightVar = '--comment-thread-editor-font-weight'; | ||
| this.container?.style.setProperty(fontFamilyVar, fontInfo.fontFamily); | ||
| this.container?.style.setProperty(fontSizeVar, `${fontInfo.fontSize}px`); |
There was a problem hiding this comment.
The --comment-thread-editor-font-size CSS custom property is being set but is never used in the CSS file. Consider either using it in review.css (e.g., in the .review-widget .body code rule) or removing the fontSizeVar assignment to avoid setting unused CSS properties.
dbaeumer
previously approved these changes
Nov 11, 2025
Tyriar
approved these changes
Nov 11, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes https://github.com/microsoft/vscode/issues/[issue_number]
The
applyThememethod was dynamically generating CSS rules and injecting them via a<style>element. This moves all theme-dependent styles to the static CSS file using CSS variables.Changes
commentThreadWidget.ts:_styleElementfield and initializationapplyThemeto only set font custom properties (fontFamily, fontSize, fontWeight)domStylesheets, theme color constantsreview.css:--vscode-textLink-foreground,--vscode-textLink-activeForeground--vscode-focusBorder--vscode-textBlockQuote-background--vscode-panel-border,--vscode-contrastBorder--vscode-inputValidation-error*--comment-thread-state-color,--comment-thread-state-background-color--comment-thread-editor-font-*Net: -25 lines, no runtime CSS generation.
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.