chore: dependency update #420
Conversation
- Bump @types/node from 20.19.19 to 20.19.27 - Update @vitejs/plugin-vue from 6.0.1 to 6.0.3 - Upgrade eslint from 9.36.0 to 9.39.2 - Update eslint-plugin-unused-imports from 4.2.0 to 4.3.0 - Upgrade eslint-plugin-vue from 10.5.0 to 10.6.2 - Bump jsdom from 27.0.0 to 27.4.0 - Update vite from 7.1.7 to 7.3.0 - Upgrade vue-tsc from 3.1.0 to 3.2.1 - Bump @tailwindcss/postcss and @tailwindcss/vite from 4.1.14 to 4.1.18 - Upgrade lodash-es from 4.17.21 to 4.17.22 - Update tailwind-merge from 3.3.1 to 3.4.0 - Upgrade tailwindcss from 4.1.14 to 4.1.18
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughWidespread Tailwind utility and important-modifier adjustments across docs and components, plus Node/runtime and dependency updates (package.json, .node-version) and CI Node matrix changes. No public API, runtime control-flow, or behavior changes beyond CSS class strings. Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🔇 Additional comments (2)
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: 2
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
.node-versionpackage.json
🔇 Additional comments (2)
package.json (1)
83-84: Engine requirements align with .node-version but need verification.The engine requirements correctly match the Node version specified in
.node-version. However, both Node 24.x and NPM 11.x should be verified for availability and stability (see comment on.node-version)..node-version (1)
1-1: No action needed. Node 24.12.0 is a stable LTS release (codename "Krypton") released on December 10, 2025, and is appropriate for production use.Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
.github/workflows/node.js.ymlpackage.json
🔇 Additional comments (5)
.github/workflows/node.js.yml (1)
17-17: Good documentation of version requirements.The comments clearly explain why Node 20.x was removed and why 22.12+ is required.
Also applies to: 33-33, 49-49, 65-65
package.json (4)
44-44: Vue 3.5 requirement aligns with VueUse 14.This peer dependency update is necessary for VueUse 14 compatibility (line 71).
86-86: Engines requirement correctly enforces Vite 7 compatibility.The minimum Node version of 22.12.0 aligns with Vite 7 requirements and ensures users have a compatible environment.
82-84: Correctly enforces esbuild security fix.The override to esbuild >=0.25.0 addresses GHSA-67mh-4wv8-2f99, a moderate CORS vulnerability in esbuild's dev server (patched in 0.25.0). This also prevents regressions to older versions affected by CVE-2024-45341 and other related issues.
75-75: Review Flowbite 4.0 breaking changes compatibility and dark mode patterns.Flowbite upgraded from 3.1.2 to 4.0.1 (major version bump). While Tailwind CSS v4.1.18 is already in place, Flowbite 4.0 introduces significant breaking changes:
- Major theming overhaul with CSS variables
- Dark mode handling changes (variants refactored away from
dark:prefix toward CSS variables)- Component markup, class names, and JS options changes
- ~50% reduction in HTML classes
The codebase uses extensive
dark:prefix patterns throughout components. Verify that these patterns remain compatible with Flowbite 4.0's dark mode approach and test interactive components (modals, dropdowns, datepickers, carousels) for breakage. Review the official Flowbite 4.0 migration guide and ensure component implementations align with v4 structure.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
package.json (2)
43-43: Peer dependency and engine updates align with the migration requirements.The Vue ^3.5.x peer dependency and Node >=22.12.0 engine requirement are correctly updated to support VueUse 14 and Vite 7 respectively, as noted in the existing review comment.
Also applies to: 85-85
58-58: Minor dependency updates look safe.The minor and patch updates (lodash-es, tailwind-merge, jsdom) appear to be low-risk maintenance updates. The VueUse 14 major version update is already covered in the existing review comment at lines 47-49.
Also applies to: 70-71, 75-75, 78-78
🧹 Nitpick comments (2)
package.json (1)
53-53: Run linting to verify ESLint updates don't introduce regressions.The ESLint and plugin updates are minor/patch versions and should be backward compatible. However, they may include new rules or bug fixes that could flag additional issues.
#!/bin/bash # Run linting to check for any new issues or errors npm run lintAlso applies to: 55-56
src/components/FwbButton/tests/Button.spec.ts (1)
347-347: Consider simplifying the gradient check after full v4 migration.The test currently checks for both
gradientandbg-linearclass patterns. Since this PR migrates to Tailwind v4, you could simplify this to only check forbg-linearonce the migration is complete.🔎 Suggested simplification
- expect(classes.some(c => c.includes('gradient') || c.includes('bg-linear'))).toBe(true) + expect(classes.some(c => c.includes('bg-linear'))).toBe(true)
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (27)
docs/components/alert.mddocs/components/fileInput.mddocs/components/fileInput/examples/FwbFileInputExampleHelper.vuedocs/components/footer.mddocs/components/footer/examples/FwbFooterExampleWithLogo.vuedocs/components/heading.mddocs/components/image.mddocs/components/jumbotron/examples/FwbJumbotronGradientExample.vuedocs/components/radio.mddocs/components/radio/examples/FwbRadioExampleListHorizontal.vuedocs/components/sidebar.mddocs/components/sidebar/examples/FwbSidebarCtaExample.vuedocs/components/sidebar/examples/FwbSidebarDropdownExample.vuedocs/components/sidebar/examples/FwbSidebarExample.vuedocs/components/sidebar/examples/FwbSidebarGroupExample.vuedocs/components/sidebar/examples/FwbSidebarLogoExample.vuedocs/components/typography/heading/FwbHExampleCustom.vuedocs/components/typography/image/FwbImgExampleCustom.vuepackage.jsonsrc/components/FwbButton/composables/useButtonClasses.tssrc/components/FwbButton/tests/Button.spec.tssrc/components/FwbCarousel/FwbCarousel.vuesrc/components/FwbFileInput/composables/useFileInputClasses.tssrc/components/FwbInput/composables/useInputClasses.tssrc/components/FwbJumbotron/FwbJumbotron.vuesrc/components/FwbPagination/FwbPagination.vuesrc/components/FwbTable/composables/useTableRowClasses.ts
✅ Files skipped from review due to trivial changes (2)
- docs/components/fileInput.md
- docs/components/image.md
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-07-18T12:11:01.047Z
Learnt from: Sqrcz
Repo: themesberg/flowbite-vue PR: 389
File: src/components/FwbToggle/FwbToggle.vue:0-0
Timestamp: 2025-07-18T12:11:01.047Z
Learning: In the FwbToggle component, the `toggleBallClasses` variable name is misleading - it doesn't style the actual toggle ball/thumb, but rather the label text container. The visual toggle ball is rendered through other means (likely CSS on the toggle track or pseudo-elements).
Applied to files:
src/components/FwbButton/composables/useButtonClasses.ts
🔇 Additional comments (29)
src/components/FwbCarousel/FwbCarousel.vue (1)
11-11: LGTM! Good code clarity improvement.Removing the negative prefix from the zero-value translate utility (
-translate-y-0→translate-y-0) improves readability while maintaining identical behavior, since-0 = 0.docs/components/typography/image/FwbImgExampleCustom.vue (1)
5-5: LGTM! Good simplification.Replacing
border-[1px]with the standardborderutility is correct and improves consistency. Both produce identical 1px borders, but the standard utility is cleaner and more maintainable.src/components/FwbInput/composables/useInputClasses.ts (1)
10-10: Line number correction required.The code snippet shown is located on line 6, not line 10. Line 6 contains
const defaultInputClasses = 'block grow w-full p-0 bg-transparent text-inherit ring-offset-0 ring-0 border-0 focus:ring-offset-0 focus:ring-0 focus:border-0 dark:placeholder-gray-400', which correctly uses the Tailwind v4growutility (migrated fromflex-grow).The change is verified correct per Tailwind CSS v4 documentation, and search confirms all
flex-growandflex-shrinkinstances have been migrated across the codebase.Likely an incorrect or invalid review comment.
package.json (1)
81-83: Remove incorrect reference to non-existent comment.The esbuild override with >=0.25.0 is appropriate for addressing known Go runtime CVEs in esbuild versions, but the reference to a "previous review comment at lines 47-49" is incorrect—those lines contain devDependency versions, not comments. Remove this false reference and state the security concern directly if needed.
Likely an incorrect or invalid review comment.
docs/components/sidebar/examples/FwbSidebarLogoExample.vue (1)
3-3: Correct Tailwind v4 important modifier syntax.The change from
!h-fulltoh-full!correctly migrates to Tailwind CSS v4's required syntax where the important modifier must come after the utility name.docs/components/sidebar/examples/FwbSidebarGroupExample.vue (1)
3-3: Correct Tailwind v4 important modifier syntax.The migration from
!h-fulltoh-full!properly aligns with Tailwind v4's syntax requirement.docs/components/alert.md (1)
210-210: Correct Tailwind v4 utility name.The update from
flex-shrink-0toshrink-0follows Tailwind v4's utility naming convention whereflex-shrink-*classes are replaced with the shortershrink-*form.src/components/FwbFileInput/composables/useFileInputClasses.ts (2)
5-5: Simplified border utility.Removing the explicit
border-[1px]in favor ofborderis correct since Tailwind's defaultborderutility already applies a 1px border width, making the code cleaner.
9-9: Correct Tailwind v4 important modifier syntax.The change from
!-mb-2to-mb-2!correctly positions the important modifier at the end of the utility name, as required by Tailwind v4.src/components/FwbJumbotron/FwbJumbotron.vue (1)
55-55: The CSS variable--breakpoint-xlis not defined in the codebase.While the
max-w-(--breakpoint-xl)syntax is valid Tailwind v4, the referenced CSS custom property--breakpoint-xldoes not exist in your theme configuration, style files, or Flowbite v4.0.1 package. This means the utility class will not resolve correctly. Either define the variable in your theme or revert to using standard Tailwind breakpoints likemax-w-screen-xl.Likely an incorrect or invalid review comment.
docs/components/sidebar/examples/FwbSidebarDropdownExample.vue (1)
3-3: LGTM! Correct Tailwind v4 migration.The important modifier has been correctly moved to the end of the utility class (
!h-full→h-full!), which aligns with Tailwind CSS v4 requirements.Based on library documentation, Tailwind v4 requires the
!modifier to be placed after the utility name.docs/components/jumbotron/examples/FwbJumbotronGradientExample.vue (1)
43-43: LGTM! Correct Tailwind v4 gradient syntax.The gradient utility has been correctly updated from
bg-gradient-to-btobg-linear-to-b, which is the new Tailwind CSS v4 syntax for linear gradients.Based on library documentation, Tailwind v4 introduced new gradient utilities:
bg-linear-*,bg-radial-*, andbg-conic-*.docs/components/fileInput/examples/FwbFileInputExampleHelper.vue (1)
7-7: LGTM! Correct Tailwind v4 migration.The important modifier has been correctly moved to the end of the utility class (
!mt-1→mt-1!), consistent with Tailwind CSS v4 syntax requirements.docs/components/radio/examples/FwbRadioExampleListHorizontal.vue (1)
7-7: LGTM! Correct Tailwind v4 migration.The important modifier has been consistently moved to the end of the utility class (
!m-0→m-0!) across all four list items, aligning with Tailwind CSS v4 syntax requirements.Also applies to: 15-15, 23-23, 31-31
docs/components/sidebar/examples/FwbSidebarExample.vue (1)
3-3: LGTM! Correct Tailwind v4 migration.The important modifier has been correctly moved to the end of the utility class (
!h-full→h-full!), which aligns with Tailwind CSS v4 requirements. Verification confirms no remaining old-style important modifiers, gradient syntax, or opacity utilities in the codebase.src/components/FwbButton/tests/Button.spec.ts (1)
314-316: LGTM! Comment updated for Tailwind v4 syntax.The comment correctly reflects the new important modifier placement (suffix instead of prefix). The test appropriately checks for the class name without the modifier.
docs/components/footer/examples/FwbFooterExampleWithLogo.vue (1)
4-4: LGTM! Updated to Tailwind v4 CSS variable syntax.The change from
max-w-screen-xltomax-w-(--breakpoint-xl)correctly uses the new parentheses syntax for CSS variables in Tailwind v4 (replacing the previous bracket syntax).docs/components/footer.md (1)
59-59: LGTM! Documentation updated to match implementation.The documentation correctly reflects the Tailwind v4 CSS variable syntax change from
max-w-screen-xltomax-w-(--breakpoint-xl), consistent with the example component.docs/components/radio.md (1)
129-160: LGTM! Important modifier correctly moved to suffix.All four list items have been consistently updated from
!m-0tom-0!, correctly implementing Tailwind v4's breaking change where the important modifier must now come after the utility name.src/components/FwbTable/composables/useTableRowClasses.ts (1)
4-4: Excellent refactor using Tailwind v4's not-last: variant!The change from arbitrary selector syntax
[&:not(:last-child)]:border-bto the nativenot-last:border-bvariant is much cleaner and more maintainable while preserving the exact same functionality. This is a great example of leveraging Tailwind v4's new variant capabilities.src/components/FwbPagination/FwbPagination.vue (1)
355-355: Correct Tailwind v4 migration for not-last selector.The
not-last:variant is the proper Tailwind v4 replacement for the verbose[&:not(:last-child)]:arbitrary selector syntax. This aligns with Tailwind v4's built-in pseudo-class variants.src/components/FwbButton/composables/useButtonClasses.ts (4)
61-93: Correct Tailwind v4 gradient utility migration.The
bg-gradient-to-*utilities have been properly migrated tobg-linear-to-*per Tailwind v4's expanded gradient syntax. The direction suffixes (-r,-br,-bl,-l) are preserved correctly.
97-104: Outline gradient classes correctly updated.The outline gradient button variants properly use the new
bg-linear-to-brsyntax.
228-228: Correct important modifier placement for Tailwind v4.Moving
!from prefix (!rounded-full) to suffix (rounded-full!) is required by Tailwind v4's breaking change for the important modifier syntax.
242-242: Correct opacity utility migration using slash syntax.The old
group-hover:bg-opacity-0utility is replaced with explicitgroup-hover:bg-white/0anddark:group-hover:bg-gray-900/0. This follows Tailwind v4's removal of standalone opacity utilities in favor of the slash syntax for color opacity.docs/components/heading.md (1)
136-136: Documentation correctly updated for Tailwind v4 important modifier syntax.The example now demonstrates the trailing
!syntax (text-xl!) required by Tailwind v4.docs/components/typography/heading/FwbHExampleCustom.vue (1)
2-2: Correct Tailwind v4 important modifier syntax.docs/components/sidebar/examples/FwbSidebarCtaExample.vue (1)
3-3: Correct Tailwind v4 important modifier placement.The
h-full!syntax properly uses the trailing important modifier required by Tailwind v4.docs/components/sidebar.md (1)
38-38: Correct Tailwind v4 utility name migration throughout documentation.All
flex-shrink-0utilities have been properly updated toshrink-0per Tailwind v4's simplified naming convention. This change is consistent across all sidebar documentation examples.
…ing classes to tailwindcss v4
1 participant
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.