feat: add prettier-plugin-bootstrap for consistent Bootstrap class ordering#418
Conversation
📝 WalkthroughWalkthrough
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 6✅ Passed checks (6 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/webviews/webview-side/dataframe-renderer/DataframeRenderer.tsx`:
- Around line 143-148: Update the className attribute in the div element (within
the filteredColumns.map function in DataframeRenderer.tsx) by replacing the
older Tailwind utility class `flex-grow-1` with the modern Tailwind v4
convention `grow` to maintain consistency with current best practices.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: aa70c773-7bfe-4aab-94ef-4e32b5589d1d
📒 Files selected for processing (8)
.prettierrc.cjspackage.jsonsrc/test/testMultiRootWkspc/workspace5/djangoApp/home/templates/index.htmlsrc/test/testMultiRootWkspc/workspace5/flaskApp/templates/index.htmlsrc/webviews/webview-side/data-explorer/index.htmlsrc/webviews/webview-side/dataframe-renderer/DataframeRenderer.tsxsrc/webviews/webview-side/plot/index.htmlsrc/webviews/webview-side/variable-view/index.html
…dering Add prettier-plugin-bootstrap@^0.3.1 to devDependencies and .prettierrc.cjs to enforce consistent Bootstrap class ordering. Signed-off-by: Pierluigi Lenoci <pierlugi.lenoci@gmail.com>
pierluigilenoci
force-pushed
the
feat/adopt-prettier-plugin-bootstrap
branch
from
94846a7 to
6895587
Compare
|
Hi @DonJayamanne, @rchiodo — this PR is ready for review. Would you be willing to take a look? Thank you! |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/webviews/webview-side/dataframe-renderer/DataframeRenderer.tsx (1)
141-231:⚠️ Potential issue | 🔴 Criticalprettier-plugin-bootstrap is incompatible with Tailwind CSS and should not be used for this project.
The project uses
prettier-plugin-bootstrap(globally configured) on Tailwind CSS codebases. Bootstrap and Tailwind class ordering plugins are incompatible—they apply conflicting sorting logic and should not be used together. Since DataframeRenderer and other webview files use Tailwind, either:
- Replace
prettier-plugin-bootstrapwithprettier-plugin-tailwindcss, or- Remove Prettier class sorting entirely and manage manually
Verify no styling regressions occur with current plugin, then address the plugin mismatch.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/webviews/webview-side/dataframe-renderer/DataframeRenderer.tsx` around lines 141 - 231, The prettier configuration is using prettier-plugin-bootstrap which conflicts with the Tailwind CSS classes used throughout DataframeRenderer.tsx and other webview components. Update the Prettier configuration file (likely .prettierrc or similar) to replace the prettier-plugin-bootstrap plugin with prettier-plugin-tailwindcss, which provides correct class ordering for Tailwind utilities. Verify that the class names in the component (such as the border, flex, and spacing utilities in the column header and pagination sections) are properly sorted after making this change, and ensure no styling regressions occur in the rendered dataframe.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/webviews/webview-side/dataframe-renderer/DataframeRenderer.tsx`:
- Around line 141-231: The prettier configuration is using
prettier-plugin-bootstrap which conflicts with the Tailwind CSS classes used
throughout DataframeRenderer.tsx and other webview components. Update the
Prettier configuration file (likely .prettierrc or similar) to replace the
prettier-plugin-bootstrap plugin with prettier-plugin-tailwindcss, which
provides correct class ordering for Tailwind utilities. Verify that the class
names in the component (such as the border, flex, and spacing utilities in the
column header and pagination sections) are properly sorted after making this
change, and ensure no styling regressions occur in the rendered dataframe.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 6349920d-ccad-47d9-b043-1bbf88aee7d4
📒 Files selected for processing (8)
.prettierrc.cjspackage.jsonsrc/test/testMultiRootWkspc/workspace5/djangoApp/home/templates/index.htmlsrc/test/testMultiRootWkspc/workspace5/flaskApp/templates/index.htmlsrc/webviews/webview-side/data-explorer/index.htmlsrc/webviews/webview-side/dataframe-renderer/DataframeRenderer.tsxsrc/webviews/webview-side/plot/index.htmlsrc/webviews/webview-side/variable-view/index.html
|
Hi @DonJayamanne, @rchiodo — friendly ping! Is this PR on your radar for review? Happy to make any adjustments if needed. Thanks! |
I don't think Don or I work on this code. It must have been forked from something else and included our commits. Not sure who owns this repository. |
|
Hi @rchiodo — thanks for the response! Just to clarify: this repo (deepnote/vscode-deepnote) is original, not a fork — DonJayamanne and you are listed as the top contributors. You may be thinking of a different project. Could you point me to whoever owns the webview/frontend side, or forward this to the right team? Happy to make any adjustments needed. Thank you! |
Sorry but we never actually contributed to this. Like I said somebody copied our commits from somewhere else. It looks like they came from here: https://github.com/microsoft/vscode-jupyter Which would explain why it looks like Don and I are top contributors. For example, this is the last commit I made to https://github.com/microsoft/vscode-jupyter. It's identical to the last commit in this deepnote repository. |
2 participants
Summary
Add
prettier-plugin-bootstrapto enforce consistent Bootstrap class ordering across template files.Benefit
Bootstrap recommends a specific class ordering (layout → spacing → typography → visual). This plugin automatically enforces that ordering during Prettier formatting runs, reducing manual review effort and improving consistency.
Changes
package.json: addedprettier-plugin-bootstrap@^0.3.1todevDependencies.prettierrc.cjs: registered plugin inpluginsarraydata-explorer/index.html,plot/index.html,variable-view/index.html,DataframeRenderer.tsx, Django/Flask test templatesReferences
Status: draft — awaiting CI
Summary by CodeRabbit
Chores
Style