10000 Chore: Tailwind Migration — Markdown and Codeblocks Components by sachasayan · Pull Request #3503 · RooCodeInc/Roo-Code · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Chore: Tailwind Migration — Markdown and Codeblocks Components #3503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Chore: Tailwind Migration — Markdown and Codeblocks Components #3503

wants to merge 2 commits into from
+64 −6

Conversation

sachasayan
Copy link
@sachasayan sachasayan commented May 12, 2025 •
edited
Loading

Tailwind migration — Markdown and Codeblocks Components

This PR covers the Tailwind Migration to the Markdown and Codeblocks Components

It makes no functional changes — this is a straight-port from explicit styles to tailwind utility classes.

Type of Change

  • ♻️ Refactor: Code change that neither fixes a bug nor adds a feature.

Pre-Submission Checklist

  • Self-Review: I have performed a thorough self-review of my code.
  • Code Quality:
    • My code adheres to the project's style guidelines.
    • There are no new linting errors or warnings (npm run lint).
    • All debug code (e.g., console.log) has been removed.
  • Testing:
    • New and/or updated tests have been added to cover my changes.
    • All tests pass locally (npm test).
    • The application builds successfully with my changes.
  • Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
  • Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
  • Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
  • Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

No visual impacts, these components look and act identical with the changes applied.

Documentation Updates

Does this PR necessitate updates to user-facing documentation?

  • No documentation updates are required.

Important

Refactor to migrate Markdown and Codeblocks components to Tailwind CSS, updating styles in Blockquote.tsx, CodeBlock.tsx, and index.css.

  • Refactor:
    • Migrate styles to Tailwind CSS utility classes in Blockquote.tsx and CodeBlock.tsx.
    • Replace inline styles with Tailwind classes for icons in CodeBlock.tsx.
  • CSS Changes:
    • Add custom CSS variables for VSCode theme compatibility in index.css.
    • Define fallback colors for Highlight.js themes in index.css.
    • Add fadeIn animation keyframes in index.css.

This description was created by Ellipsis for ef265c9. You can customize this summary. It will automatically update as commits are pushed.

@changeset-bot changeset-bot
Copy link
changeset-bot bot 8000 commented May 12, 2025

⚠️ No Changeset found

Latest commit: ef265c9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@sachasayan sachasayan changed the title Chore/tailwind migration markdown and codeblocks Chore: Tailwind Migration — Markdown and Codeblocks Components May 12, 2025
@sachasayan sachasayan marked this pull request as ready for review May 12, 2025 18:45
@sachasayan sachasayan requested review from mrubens and cte as code owners May 12, 2025 18:45
@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label May 12, 2025
@hannesrudolph hannesrudolph moved this from New to PR [Greenlit] in Roo Code Roadmap May 14, 2025
bgilbert6 pushed a commit to bgilbert6/Roo-Code that referenced this pull request May 14, 2025
@canvrno
FIX: Detect directory change when reusing active terminals (RooCodeIn…
65f1b05 
…c#3503)

* Added confirmation of a sucessful cd prior to executing commands in active terminals

* typo fix, fine tuning

* cleanup
@hannesrudolph hannesrudolph moved this from New to PR [Greenlit] in Roo Code Roadmap May 20, 2025
@hannesrudolph hannesrudolph moved this from New to PR [Pre Approval Review] in Roo Code Roadmap May 20, 2025
@hannesrudolph hannesrudolph moved this from PR [Needs Review] to TEMP in Roo Code Roadmap May 26, 2025
@daniel-lxs daniel-lxs moved this from TEMP to PR [Needs Review] in Roo Code Roadmap May 26, 2025
@hannesrudolph hannesrudolph assigned mrubens and unassigned mrubens May 27, 2025
daniel-lxs
daniel-lxs reviewed May 27, 2025
View reviewed changes
Copy link
Collaborator
@daniel-lxs daniel-lxs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @sachasayan, this looks good, can you solve the merge conflicts so we can merge it?

webview-ui/src/index.css
@@ -184,6 +229,11 @@
.history-item-highlight {
@apply underline;
}

/* Shiki code block inner code transparency */
.shiki > code {
Copy link
Collaborator
@daniel-lxs daniel-lxs May 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was the !important necessary to override Shiki's default styles, or could a less specific selector achieve the same result? Just checking for best practices.

webview-ui/src/index.css
Copy link
Collaborator
@daniel-lxs daniel-lxs May 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see a similar inline @keyframes fadeIn is already defined and used in webview-ui/src/components/chat/Markdown.tsx. Is the intention for this global animation to replace the inline one, or is it for other components? If it's to replace the inline one, it would be good to update webview-ui/src/components/chat/Markdown.tsx to use the global animation in this PR or a follow-up. If it's for other components not touched in this PR, it could be introduced separately.

@daniel-lxs daniel-lxs moved this from Needs Preliminary Review to PR [Changes Requested] in Roo Code Roadmap May 27, 2025
@daniel-lxs daniel-lxs assigned mrubens and unassigned sachasayan May 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@daniel-lxs daniel-lxs daniel-lxs left review comments

@mrubens mrubens Awaiting requested review from mrubens mrubens is a code owner

@cte cte Awaiting requested review from cte cte is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@mrubens mrubens

Labels
PR - Changes Requested size:M This PR changes 30-99 lines, ignoring generated files.
Projects
Roo Code Roadmap
Status: PR [Changes Requested]
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@sachasayan @daniel-lxs @mrubens
0