upgrade to tailwind 4 #430
Conversation
WalkthroughThis pull request updates the project's Tailwind CSS dependencies and configuration while standardizing CSS class syntax across numerous Svelte components. The changes include dependency upgrades, a revised PostCSS plugin declaration, an explicit safelist in the Tailwind config, and several CSS adjustments—such as replacing Changes
Possibly related PRs
Suggested reviewers
Poem
Warning Review ran into problems🔥 ProblemsGitHub Actions and Pipeline Checks: Resource not accessible by integration - https://docs.github.com/rest/actions/workflow-runs#list-workflow-runs-for-a-repository. Please grant the required permissions to the CodeRabbit GitHub App under the organization or repository settings. 📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (7)
🚧 Files skipped from review as they are similar to previous changes (6)
🔇 Additional comments (3)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (40)
frontend/package.json(2 hunks)frontend/postcss.config.js(1 hunks)frontend/src/app.css(2 hunks)frontend/src/lib/components/CollapsibleSection.svelte(1 hunks)frontend/src/lib/components/ExpandableCell.svelte(2 hunks)frontend/src/lib/components/NavigationBar.svelte(1 hunks)frontend/src/lib/components/SplitView.svelte(1 hunks)frontend/src/lib/components/StatusCell.svelte(1 hunks)frontend/src/lib/components/charts/FeaturesLineChart.svelte(1 hunks)frontend/src/lib/components/charts/TransformControls.svelte(1 hunks)frontend/src/lib/components/ui/badge/index.ts(1 hunks)frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte(1 hunks)frontend/src/lib/components/ui/button/index.ts(1 hunks)frontend/src/lib/components/ui/calendar/calendar-day.svelte(1 hunks)frontend/src/lib/components/ui/checkbox/checkbox.svelte(1 hunks)frontend/src/lib/components/ui/command/command-dialog.svelte(1 hunks)frontend/src/lib/components/ui/command/command-group.svelte(1 hunks)frontend/src/lib/components/ui/command/command-input.svelte(1 hunks)frontend/src/lib/components/ui/command/command-item.svelte(1 hunks)frontend/src/lib/components/ui/dialog/dialog-content.svelte(1 hunks)frontend/src/lib/components/ui/dialog/dialog-overlay.svelte(1 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte(1 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte(1 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte(1 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte(1 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte(1 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte(1 hunks)frontend/src/lib/components/ui/input/input.svelte(1 hunks)frontend/src/lib/components/ui/popover/popover-content.svelte(1 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-day.svelte(1 hunks)frontend/src/lib/components/ui/select/select-content.svelte(1 hunks)frontend/src/lib/components/ui/select/select-item.svelte(1 hunks)frontend/src/lib/components/ui/select/select-trigger.svelte(1 hunks)frontend/src/lib/components/ui/sheet/sheet-content.svelte(1 hunks)frontend/src/lib/components/ui/sheet/sheet-overlay.svelte(1 hunks)frontend/src/lib/components/ui/tabs/tabs-content.svelte(1 hunks)frontend/src/lib/components/ui/tabs/tabs-trigger.svelte(1 hunks)frontend/src/routes/[conf]/[name]/job-tracking/+page.svelte(1 hunks)frontend/src/routes/[conf]/[name]/observability/drift/+page.svelte(1 hunks)frontend/src/routes/[conf]/[name]/overview/+page.svelte(2 hunks)
✅ Files skipped from review due to trivial changes (13)
- frontend/src/lib/components/charts/FeaturesLineChart.svelte
- frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
- frontend/src/lib/components/ui/tabs/tabs-content.svelte
- frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
- frontend/src/routes/[conf]/[name]/observability/drift/+page.svelte
- frontend/src/lib/components/ExpandableCell.svelte
- frontend/src/lib/components/ui/command/command-input.svelte
- frontend/src/lib/components/ui/checkbox/checkbox.svelte
- frontend/src/lib/components/NavigationBar.svelte
- frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
- frontend/src/lib/components/charts/TransformControls.svelte
- frontend/src/lib/components/ui/sheet/sheet-overlay.svelte
- frontend/src/routes/[conf]/[name]/overview/+page.svelte
🔇 Additional comments (40)
frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte (1)
19-19: Class update for Tailwind 4 compatibility.Change from
focus:outline-nonetofocus:outline-hiddenaligns with Tailwind 4.frontend/src/lib/components/SplitView.svelte (1)
59-59: Class updated for Tailwind 4.
focus:outline-nonetofocus:outline-hiddenmatches new Tailwind 4 syntax.frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte (1)
20-20: Class updated for Tailwind 4.Changed
focus:outline-nonetofocus:outline-hiddenas required.frontend/src/lib/components/StatusCell.svelte (1)
35-35: Updated important syntax for Tailwind v4Changed from
!text-small !text-neutral-800totext-small! text-neutral-800!to match Tailwind v4 syntax for important modifiers.frontend/package.json (2)
33-33: Added new Tailwind v4 dependencyAdded
@tailwindcss/postcssrequired for Tailwind CSS v4.
55-55: Upgraded Tailwind from v3 to v4Major version upgrade from
^3.4.17to^4.0.8.frontend/src/lib/components/ui/input/input.svelte (1)
20-20: Updated Tailwind classes for v4 compatibilityTwo changes:
shadow-sm→shadow-xs(smaller shadow)focus-visible:outline-none→focus-visible:outline-hidden(v4 syntax)frontend/src/lib/components/ui/sheet/sheet-content.svelte (1)
48-48: Updated focus outline class for v4Changed
focus:outline-nonetofocus:outline-hiddento match Tailwind v4 naming convention.frontend/src/lib/components/ui/popover/popover-content.svelte (1)
25-25: LGTM - Outline utility updated for Tailwind 4.Class updated from outline-none to outline-hidden.
frontend/src/lib/components/ui/select/select-content.svelte (1)
28-28: LGTM - Focus outline utility updated.Consistent with Tailwind 4 upgrade pattern.
frontend/src/lib/components/ui/select/select-trigger.svelte (1)
15-15: LGTM - Multiple Tailwind 4 syntax updates.Changes include:
- Updated data attribute selector syntax
- Shadow size from sm to xs
- Outline utility to outline-hidden
frontend/src/lib/components/ui/dialog/dialog-content.svelte (1)
30-30: LGTM - Focus outline updated for close button.Consistent with other component updates.
frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte (1)
17-17: Updated data attribute syntax and outline class for Tailwind 4Class syntax updated to match Tailwind 4 requirements: removed brackets from data attributes and changed
outline-nonetooutline-hidden.frontend/src/lib/components/ui/badge/index.ts (3)
5-5: Updated outline class for Tailwind 4Correctly replaced
focus:outline-nonewithfocus:outline-hiddento match Tailwind 4 requirements.
8-9: Refined shadow utilityUpdated default variant from
shadowto more specificshadow-smfor refined styling.
12-12: Refined shadow utilityUpdated destructive variant from
shadowto more specificshadow-smfor consistent styling.frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte (1)
17-17: Updated data attribute syntax and outline class for Tailwind 4Class syntax updated to match Tailwind 4 requirements: removed brackets from data attributes and changed
outline-nonetooutline-hidden.frontend/src/lib/components/ui/tabs/tabs-trigger.svelte (1)
18-18: Tailwind 4 syntax updatesUpdated to use new Tailwind 4 utilities:
outline-hiddeninstead ofoutline-none,shadow-sminstead ofshadow, andnot-first:ml-5instead of the longer selector syntax.frontend/src/lib/components/ui/command/command-dialog.svelte (1)
16-16: Partial Tailwind 4 selector syntax migrationChanged data attribute selectors to use new
**:data-*syntax, but some bracket notation selectors remain. Consider updating all selectors for consistency.frontend/src/lib/components/ui/button/index.ts (3)
6-6: Updated outline utilityChanged to use
outline-hiddeninstead ofoutline-noneper Tailwind 4.
9-9: Shadow refinementUpdated default variant to use
shadow-smfor more precise shadow control.
11-15: Consistent shadow updatesAll non-default button variants now use
shadow-xsinstead ofshadow.frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte (1)
16-16: Updated data attribute selectorsChanged from bracket notation (
data-[highlighted]) to simplified syntax (data-highlighted). Also updated to useoutline-hidden.frontend/src/lib/components/ui/select/select-item.svelte (1)
21-21: Updated class syntax for Tailwind 4Class syntax updated for Tailwind 4 compatibility:
- Removed brackets from data attributes (e.g.,
data-[highlighted]→data-highlighted)- Changed
outline-nonetooutline-hiddenfrontend/src/lib/components/ui/command/command-group.svelte (1)
12-12: Updated nested selector syntaxTailwind 4 selector syntax changes:
&_[data-cmdk-group-heading]→**:data-cmdk-group-heading:!p-0→p-0!(new important modifier syntax)frontend/postcss.config.js (2)
1-3: Direct plugin imports addedAdded direct imports for PostCSS plugins:
tailwindcssfrom@tailwindcss/postcssautoprefixer
5-5: Updated plugins configurationChanged plugins format from object to array notation for Tailwind 4.
frontend/src/lib/components/ui/command/command-item.svelte (1)
16-17: Updated class syntax for Tailwind 4Multiple syntax updates:
- Changed
px-4topx-4!(new important syntax)- Replaced
outline-nonewithoutline-hidden- Simplified data attributes (removed brackets)
- Changed
&:not(:last-child):border-btonot-last:border-b(new utility)frontend/src/lib/components/ui/calendar/calendar-day.svelte (4)
25-25: Updated data attribute selector syntax.Syntax updated from bracket to non-bracket form, aligning with Tailwind 4.
27-27: Disabled state selector updated.Syntax simplified from
data-[disabled]todata-disabled.
29-29: Unavailable state selector updated.Syntax change consistent with other attribute selectors.
31-31: Outside month selector updated.Mixed syntax present - some using new format, others still using bracket notation.
Consider updating remaining bracket notations (
[&[data-outside-month][data-selected]]) for consistency.frontend/src/app.css (4)
1-3: Updated Tailwind import approach.Switched from directives to import statement with config reference.
5-21: Added compatibility layer for Tailwind v4.Good approach to ensure visual consistency with v3 border colors.
23-39: Added new utility classes.Helpful additions for content visibility, grid stacking, and scrollbar hiding.
215-246: Relocated font declarations.Font-face declarations moved to utilities layer for better organization.
frontend/src/lib/components/ui/range-calendar/range-calendar-day.svelte (4)
21-21: Updated selected state selector.Simplified from
data-[selected]todata-selected.
25-25: Updated selection start state selector.Long selector chain updated to new format.
27-27: Updated selection end state selector.Consistent with selection start changes.
29-33: Updated remaining state selectors.Outside month, disabled, and unavailable selectors all updated.
Same issue as calendar-day.svelte - mixed syntax with
[&[data-outside-month][data-selected]]remains. Consider full conversion.
| @@ -47,7 +47,7 @@ | |||
| <IconChevronDown | |||
| class="size-4 transition-transform duration-200 {open ? '' : '-rotate-90'}" | |||
| /> | |||
| <h2 class="{sizeClasses.title} !ml-2 select-text">{title}</h2> | |||
| <h2 class="{sizeClasses.title} ml-2! select-text">{title}</h2> | |||
There was a problem hiding this comment.
Fix important flag syntax.
The important flag is incorrectly placed after class name. In Tailwind, it should be before the utility.
- <h2 class="{sizeClasses.title} ml-2! select-text">{title}</h2>
+ <h2 class="{sizeClasses.title} !ml-2 select-text">{title}</h2>📝 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.
| <h2 class="{sizeClasses.title} ml-2! select-text">{title}</h2> | |
| <h2 class="{sizeClasses.title} !ml-2 select-text">{title}</h2> |
| @@ -186,7 +186,7 @@ | |||
| <div class="flex flex-col"> | |||
| <CollapsibleSection title="Current job" bind:open={isMetadataOpen} class="mt-5 mb-6"> | |||
| {#snippet headerContentRight()} | |||
| <Button variant="outline" size="md" class="!text-small text-muted-foreground"> | |||
| <Button variant="outline" size="md" class="text-small! text-muted-foreground"> | |||
There was a problem hiding this comment.
Incorrect important modifier syntax
The important modifier is positioned incorrectly. In Tailwind 4, it should be a prefix, not a suffix.
- <Button variant="outline" size="md" class="text-small! text-muted-foreground">
+ <Button variant="outline" size="md" class="!text-small text-muted-foreground">📝 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.
| <Button variant="outline" size="md" class="text-small! text-muted-foreground"> | |
| <Button variant="outline" size="md" class="!text-small text-muted-foreground"> |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/tailwind.config.js (1)
10-57:❓ Verification inconclusive
Explicit safelist replaces regex patterns.
Switched from regex patterns to explicit class listing. While clearer, this approach requires manual updates if new job statuses or grid columns are added.
Consider adding a brief comment explaining this design decision.
🏁 Script executed:
#!/bin/bash # Check if job statuses in code match those in safelist job_statuses=$(rg -o "WAITING_FOR_UPSTREAM|RUNNING|FAILED|SUCCESS|QUEUED|UPSTREAM_FAILED|UPSTREAM_MISSING|WAITING_FOR_RESOURCES" --type ts --type svelte src/ | sort | uniq) echo "Job statuses found in code:" echo "$job_statuses" echo "Verify these match safelist entries in tailwind.config.js"Length of output: 409
Action Required: Document Explicit Safelist Design Decision
The explicit safelist replaces regex matching for clarity—but it requires manual updates when new job statuses or grid columns are added. Please add a brief inline comment in
frontend/tailwind.config.js(Lines 10-57) that explains this design decision for future maintainers.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (2)
frontend/src/routes/[conf]/[name]/observability/drift/+page.svelte(1 hunks)frontend/tailwind.config.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/routes/[conf]/[name]/observability/drift/+page.svelte
This reverts commit 0b5e3ad.
| // Job status border active classes | ||
| 'border-jobs-WAITING_FOR_UPSTREAM-active-border', | ||
| 'hover:border-jobs-WAITING_FOR_UPSTREAM-active-border', | ||
| 'border-jobs-RUNNING-active-border', | ||
| 'hover:border-jobs-RUNNING-active-border', | ||
| 'border-jobs-FAILED-active-border', | ||
| 'hover:border-jobs-FAILED-active-border', | ||
| 'border-jobs-SUCCESS-active-border', | ||
| 'hover:border-jobs-SUCCESS-active-border', | ||
| 'border-jobs-QUEUED-active-border', | ||
| 'hover:border-jobs-QUEUED-active-border', | ||
| 'border-jobs-UPSTREAM_FAILED-active-border', | ||
| 'hover:border-jobs-UPSTREAM_FAILED-active-border', | ||
| 'border-jobs-UPSTREAM_MISSING-active-border', | ||
| 'hover:border-jobs-UPSTREAM_MISSING-active-border', | ||
| 'border-jobs-WAITING_FOR_RESOURCES-active-border', | ||
| 'hover:border-jobs-WAITING_FOR_RESOURCES-active-border', | ||
| // Job status border classes | ||
| 'border-jobs-WAITING_FOR_UPSTREAM-border', | ||
| 'border-jobs-RUNNING-border', | ||
| 'border-jobs-FAILED-border', | ||
| 'border-jobs-SUCCESS-border', | ||
| 'border-jobs-QUEUED-border', | ||
| 'border-jobs-UPSTREAM_FAILED-border', | ||
| 'border-jobs-UPSTREAM_MISSING-border', | ||
| 'border-jobs-WAITING_FOR_RESOURCES-border', | ||
| // Job status background classes | ||
| 'bg-jobs-WAITING_FOR_UPSTREAM-bg', | ||
| 'bg-jobs-RUNNING-bg', | ||
| 'bg-jobs-FAILED-bg', | ||
| 'bg-jobs-SUCCESS-bg', | ||
| 'bg-jobs-QUEUED-bg', | ||
| 'bg-jobs-UPSTREAM_FAILED-bg', | ||
| 'bg-jobs-UPSTREAM_MISSING-bg', | ||
| 'bg-jobs-WAITING_FOR_RESOURCES-bg' |
There was a problem hiding this comment.
Instead of dynamically building class strings in status.ts and using a safelist it's typically better practice to explicitly list out the full class names. It's a little verbose, but so is listing all the class names in a safelist.
It might not even be worth registering all these classes in TW and just leverage the CSS variables directly. In that case, we can build the CSS variable names dynamically.
In TW4, the declaration of colors are now done within app.css in a @theme { ... } declaration, and include the color function (--color-primary: hsl(200 100% 50%)).
I think we should leave this PR as is and incrementally adopt the newer approaches, but thought it was worth pointing out.
# Conflicts: # frontend/src/lib/components/NavigationBar.svelte # frontend/src/routes/[conf]/[name]/overview/+page.svelte
## Summary ## Checklist - [ ] Added Unit Tests - [ ] Covered by existing CI - [ ] Integration tested - [ ] Documentation update <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Chores** - Upgraded core styling dependencies and configuration to leverage the latest standards. - **Style** - Refined visual elements across the interface for enhanced consistency and responsiveness. - Adjusted focus outlines, shadows, and layout utilities on various interactive components. - Enhanced grid and backdrop effects to improve overall visual clarity. These updates deliver a smoother and more polished experience without changing the underlying functionality. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary This PR is mostly a continuation of the initial Tailwind 4 [upgrade](#430) with some additional best practices and simplification applied and has the goal of introducing minimal visual changes. With that said, there are some minor visual changes due to the removal of all the [custom](https://github.com/zipline-ai/chronon/pull/505/files#diff-8fdab0c1827a182dfaa61b1253086037a44105350409f6701c49ebe130f6705bL168-L243) font sizes. This removal helps to simplify the config and usage (Tailwind already provides many [sizes](https://tailwindcss.com/docs/font-size) and [weights](https://tailwindcss.com/docs/font-weight) by default). We can still refine the sizing if desired with 1-off custom sizes (ex. `text-[13px]`) but the simplification improved readability. I did manually refine a few sizes already to tighten up the design. - Switch from `@tailwindcss/postcss` to `@tailwindcss/vite` ([recommended](https://tailwindcss.com/docs/upgrade-guide#using-vite)) - Migrate config from [legacy](https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file) `tailwind.config.js` (js-based) to `app.css` (css-first with directives) - Cleanup / simplify - Remove unused `@tailwindcss/typography` plugin - Remove unused container config (no longer [supported](https://tailwindcss.com/docs/upgrade-guide#container-configuration) in v4 as well) - Remove use of deprecated/unsupported [safelist](https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file) - Simplify job tracking styling by using css directly (remove js / tailwind indirection) - Rename `MetadataTableSection` to `MetadataTable` and replace `MetadataTable` usage with simple div - `MetadataTableSection` was the actual `Table` - Removes dynamic `grid-col-{$columns}` class string which isn't [supported](https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names) by Tailwind (especially without `safelist` support) - Update [LayerChart](https://github.com/techniq/layerchart/pull/449/files) and [Svelte UX](techniq/svelte-ux#571) to `2.0.0@next` (improved compat with Tailwind 4 and [later](techniq/layerchart#458) Svelte 5) ## Screenshots ### Dark mode Before | After --- | ---  |   |   |   |  ### Light mode Before | After --- | ---  |   |   |   |  ## Checklist - [ ] Added Unit Tests - [ ] Covered by existing CI - [ ] Integration tested - [ ] Documentation update <!-- av pr metadata This information is embedded by the av CLI when creating PRs to track the status of stacks when using Aviator. Please do not delete or edit this section of the PR. ``` {"parent":"main","parentHead":"","trunk":"main"} ``` --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced enhanced theming with a comprehensive set of CSS custom properties for improved color schemes and typography. - Streamlined metadata and status displays for a cleaner and more intuitive presentation. - **Style** - Refined UI elements including navigation bars, headers, and buttons for better readability and visual consistency. - Updated layout adjustments across key pages, offering a more cohesive look and feel. - **Chores** - Upgraded dependencies and optimized build configurations while removing legacy styling tools for improved performance. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Sean Lynch <[email protected]>
Summary
Checklist
Summary by CodeRabbit
These updates deliver a smoother and more polished experience without changing the underlying functionality.