feat: initial commit for tailwind v4 #1430
Closed
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
WalkthroughThis update modernizes Tailwind CSS integration across both Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant Vite as Vite Build
participant Tailwind as @tailwindcss/vite Plugin
participant Storybook as Storybook
participant UI as UI Components
Dev->>Vite: Runs build or dev server
Vite->>Tailwind: Loads Tailwind via Vite plugin
Tailwind->>UI: Processes CSS imports and directives
Tailwind->>UI: Applies updated utility classes (v4 syntax)
Dev->>Storybook: Runs Storybook
Storybook->>Vite: Uses Vite with @tailwindcss/vite
Storybook->>UI: Loads stories with updated imports and CSS
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (76)
💤 Files with no reviewable changes (2)
✅ Files skipped from review due to trivial changes (9)
🚧 Files skipped from review as they are similar to previous changes (64)
🧰 Additional context used🪛 Biome (1.9.4)unraid-ui/stories/components/common/Loading.stories.ts[error] 3-3: Do not shadow the global "Error" property. Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global. (lint/suspicious/noShadowRestrictedNames) ⏰ Context from checks skipped due to timeout of 90000ms (4)
🔇 Additional comments (2)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 0
🧹 Nitpick comments (1)
unraid-ui/stories/components/common/Loading.stories.ts (1)
3-3: Consider renaming the Error import to avoid shadowing.The import name
Errorshadows the globalErrorconstructor, which can cause confusion. Consider using an alias:-import Error from '../../../src/components/common/loading/Error.vue'; +import LoadingError from '../../../src/components/common/loading/Error.vue';And update the corresponding references in the component usage.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (34)
unraid-ui/.storybook/main.ts(2 hunks)unraid-ui/.storybook/preview.ts(2 hunks)unraid-ui/.storybook/tailwind.config.ts(1 hunks)unraid-ui/eslint.config.ts(2 hunks)unraid-ui/package.json(3 hunks)unraid-ui/postcss.config.js(1 hunks)unraid-ui/scripts/build-style.mjs(2 hunks)unraid-ui/src/styles/globals.css(2 hunks)unraid-ui/stories/components/brand/BrandButton.stories.ts(3 hunks)unraid-ui/stories/components/brand/BrandLoading.stories.ts(1 hunks)unraid-ui/stories/components/brand/BrandLogo.stories.ts(2 hunks)unraid-ui/stories/components/brand/BrandLogoConnect.stories.ts(2 hunks)unraid-ui/stories/components/common/Badge.stories.ts(3 hunks)unraid-ui/stories/components/common/Button.stories.ts(2 hunks)unraid-ui/stories/components/common/DropdownMenu.stories.ts(2 hunks)unraid-ui/stories/components/common/Loading.stories.ts(3 hunks)unraid-ui/stories/components/common/Popover.stories.ts(1 hunks)unraid-ui/stories/components/common/ScrollArea.stories.ts(4 hunks)unraid-ui/stories/components/common/Sheet.stories.ts(1 hunks)unraid-ui/stories/components/common/Stepper.stories.ts(1 hunks)unraid-ui/stories/components/common/Tabs.stories.ts(2 hunks)unraid-ui/stories/components/common/Tooltip.stories.ts(1 hunks)unraid-ui/stories/components/form/Combobox.stories.ts(2 hunks)unraid-ui/stories/components/form/Input.stories.ts(1 hunks)unraid-ui/stories/components/form/Label.stories.ts(1 hunks)unraid-ui/stories/components/form/Lightswitch.stories.ts(2 hunks)unraid-ui/stories/components/form/Select.stories.ts(1 hunks)unraid-ui/stories/components/form/Switch.stories.ts(1 hunks)unraid-ui/stories/components/layout/CardWrapper.stories.ts(2 hunks)unraid-ui/stories/components/layout/PageContainer.stories.ts(2 hunks)unraid-ui/tailwind.config.ts(1 hunks)unraid-ui/vite.web-component.ts(1 hunks)web/helpers/globals.d.ts(1 hunks)web/package.json(3 hunks)
✅ Files skipped from review due to trivial changes (26)
- unraid-ui/stories/components/common/Popover.stories.ts
- unraid-ui/stories/components/common/Tooltip.stories.ts
- unraid-ui/stories/components/common/Sheet.stories.ts
- unraid-ui/stories/components/brand/BrandLoading.stories.ts
- unraid-ui/stories/components/common/Stepper.stories.ts
- unraid-ui/stories/components/form/Select.stories.ts
- unraid-ui/.storybook/preview.ts
- web/helpers/globals.d.ts
- unraid-ui/stories/components/form/Lightswitch.stories.ts
- unraid-ui/stories/components/form/Label.stories.ts
- unraid-ui/stories/components/common/DropdownMenu.stories.ts
- unraid-ui/stories/components/common/Badge.stories.ts
- unraid-ui/stories/components/brand/BrandButton.stories.ts
- unraid-ui/stories/components/form/Switch.stories.ts
- unraid-ui/stories/components/form/Input.stories.ts
- unraid-ui/stories/components/form/Combobox.stories.ts
- unraid-ui/stories/components/brand/BrandLogoConnect.stories.ts
- unraid-ui/stories/components/common/Button.stories.ts
- unraid-ui/stories/components/layout/PageContainer.stories.ts
- unraid-ui/stories/components/common/ScrollArea.stories.ts
- unraid-ui/stories/components/brand/BrandLogo.stories.ts
- unraid-ui/tailwind.config.ts
- unraid-ui/stories/components/common/Tabs.stories.ts
- unraid-ui/stories/components/layout/CardWrapper.stories.ts
- unraid-ui/eslint.config.ts
- web/package.json
🚧 Files skipped from review as they are similar to previous changes (2)
- unraid-ui/src/styles/globals.css
- unraid-ui/package.json
🧰 Additional context used
🪛 Biome (1.9.4)
unraid-ui/stories/components/common/Loading.stories.ts
[error] 3-3: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Build Web App
- GitHub Check: Build Unraid UI Library (Webcomponent Version)
- GitHub Check: Test API
- GitHub Check: Build API
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (10)
unraid-ui/postcss.config.js (1)
3-3: Correct migration to Tailwind v4 PostCSS plugin.The switch from
tailwindcssto@tailwindcss/postcssaligns with Tailwind CSS v4 requirements and is consistent across the codebase.unraid-ui/vite.web-component.ts (1)
2-2: Consistent Tailwind v4 migration.The import source change to
@tailwindcss/postcssis correct and maintains consistency with other configuration files in this PR.unraid-ui/scripts/build-style.mjs (2)
5-5: Correct import source for Tailwind v4.The switch to
@tailwindcss/postcssmaintains consistency with the migration pattern across all configuration files.
20-20: Good simplification of plugin invocation.Removing the empty configuration object is a clean improvement and the plugin will work correctly without explicit configuration.
unraid-ui/stories/components/common/Loading.stories.ts (2)
1-1: Correct Storybook package update for v9.The import change to
@storybook/vue3-vitealigns with the Storybook v9 upgrade mentioned in the summary.
2-4: Good quote consistency improvements.Converting to single quotes maintains consistency with the codebase style.
Also applies to: 7-7, 38-38
unraid-ui/.storybook/tailwind.config.ts (2)
10-11: Good addition of CSS files to content scanning.Including
../src/styles/**/*.cssensures Tailwind properly detects class usage in style files.
12-30: Excellent safelist strategy for theme classes.The comprehensive safelist ensures all critical theme utility classes are always available, which is essential for dynamic theming and Storybook consistency. The approach of spreading the base config safelist maintains backward compatibility.
unraid-ui/.storybook/main.ts (2)
6-6: Verify that removed addons functionality is not needed.The addons array has been simplified, removing
@storybook/addon-essentialsand@storybook/addon-interactions. Since@storybook/addon-essentialsis a bundle containing multiple common addons, ensure that stories don't rely on functionality from controls, actions, viewport, backgrounds, or other essential addons that were previously included.#!/bin/bash # Description: Check if any stories use features from removed addons # Expected: Find any usage of controls, actions, or interactions that might break echo "Checking for addon-essentials features usage..." rg -A 3 -B 3 "argTypes|parameters\.actions|parameters\.controls|parameters\.backgrounds|parameters\.viewport" unraid-ui/stories/ echo -e "\nChecking for interaction addon usage..." rg -A 3 -B 3 "play.*function|userEvent|within" unraid-ui/stories/
36-36: [web_search]What is the correct plugin name for Tailwind CSS v4 in postcss.config.js?
elibosley
force-pushed
the
feat/tailwind-v4
branch
from
829d955 to
f853eaa
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (77)
unraid-ui/.storybook/main.ts(1 hunks)unraid-ui/.storybook/preview.ts(2 hunks)unraid-ui/.storybook/tailwind.config.ts(1 hunks)unraid-ui/eslint.config.ts(2 hunks)unraid-ui/package.json(1 hunks)unraid-ui/postcss.config.js(0 hunks)unraid-ui/scripts/build-style.mjs(0 hunks)unraid-ui/src/components/brand/BrandButton.vue(2 hunks)unraid-ui/src/components/brand/brand-loading.variants.ts(1 hunks)unraid-ui/src/components/common/badge/Badge.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioItem.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperIndicator.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperItem.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperSeparator.vue(1 hunks)unraid-ui/src/components/form/combobox/ComboboxItem.vue(1 hunks)unraid-ui/src/components/form/combobox/ComboboxList.vue(1 hunks)unraid-ui/src/components/form/lightswitch/Lightswitch.vue(1 hunks)unraid-ui/src/components/form/number/NumberFieldContent.vue(1 hunks)unraid-ui/src/components/form/select/SelectContent.vue(1 hunks)unraid-ui/src/components/form/select/SelectItem.vue(1 hunks)unraid-ui/src/components/form/select/SelectTrigger.vue(1 hunks)unraid-ui/src/forms/ComboBoxField.vue(2 hunks)unraid-ui/src/forms/ControlWrapper.vue(1 hunks)unraid-ui/src/forms/InputField.vue(1 hunks)unraid-ui/src/forms/LabelRenderer.vue(1 hunks)unraid-ui/src/styles/globals.css(2 hunks)unraid-ui/src/styles/index.css(1 hunks)unraid-ui/src/theme/preset.ts(1 hunks)unraid-ui/stories/components/brand/BrandButton.stories.ts(3 hunks)unraid-ui/stories/components/brand/BrandLoading.stories.ts(1 hunks)unraid-ui/stories/components/brand/BrandLogo.stories.ts(2 hunks)unraid-ui/stories/components/brand/BrandLogoConnect.stories.ts(2 hunks)unraid-ui/stories/components/common/Badge.stories.ts(3 hunks)unraid-ui/stories/components/common/Button.stories.ts(2 hunks)unraid-ui/stories/components/common/DropdownMenu.stories.ts(2 hunks)unraid-ui/stories/components/common/Loading.stories.ts(3 hunks)unraid-ui/stories/components/common/Popover.stories.ts(1 hunks)unraid-ui/stories/components/common/ScrollArea.stories.ts(4 hunks)unraid-ui/stories/components/common/Sheet.stories.ts(1 hunks)unraid-ui/stories/components/common/Stepper.stories.ts(1 hunks)unraid-ui/stories/components/common/Tabs.stories.ts(2 hunks)unraid-ui/stories/components/common/Tooltip.stories.ts(1 hunks)unraid-ui/stories/components/form/Combobox.stories.ts(2 hunks)unraid-ui/stories/components/form/Input.stories.ts(1 hunks)unraid-ui/stories/components/form/Label.stories.ts(1 hunks)unraid-ui/stories/components/form/Lightswitch.stories.ts(2 hunks)unraid-ui/stories/components/form/Select.stories.ts(1 hunks)unraid-ui/stories/components/form/Switch.stories.ts(1 hunks)unraid-ui/stories/components/layout/CardWrapper.stories.ts(2 hunks)unraid-ui/stories/components/layout/PageContainer.stories.ts(2 hunks)unraid-ui/tailwind.config.ts(2 hunks)unraid-ui/vite.config.ts(1 hunks)unraid-ui/vite.web-component.ts(1 hunks)web/assets/main.css(3 hunks)web/components/Activation/ActivationSteps.vue(1 hunks)web/components/Activation/WelcomeModal.ce.vue(1 hunks)web/components/ApiKey/ApiKeyManager.vue(1 hunks)web/components/Brand/Avatar.vue(1 hunks)web/components/Modals.ce.vue(1 hunks)web/components/Notifications/Sidebar.vue(1 hunks)web/components/Registration/ReplaceCheck.vue(1 hunks)web/components/Registration/UpdateExpirationAction.vue(2 hunks)web/components/UpdateOs/CallbackButton.vue(1 hunks)web/components/UpdateOs/CheckUpdateResponseModal.vue(1 hunks)web/components/UpdateOs/Downgrade.vue(1 hunks)web/components/UpdateOs/Status.vue(1 hunks)web/components/UpdateOs/Update.vue(2 hunks)web/components/UpdateOs/UpdateIneligible.vue(1 hunks)web/components/UserProfile.ce.vue(1 hunks)web/components/UserProfile/DropdownItem.vue(1 hunks)web/components/UserProfile/DropdownTrigger.vue(1 hunks)web/components/UserProfile/Keyline.vue(1 hunks)web/helpers/globals.d.ts(1 hunks)web/package.json(3 hunks)web/tailwind.config.ts(1 hunks)
💤 Files with no reviewable changes (2)
- unraid-ui/postcss.config.js
- unraid-ui/scripts/build-style.mjs
✅ Files skipped from review due to trivial changes (11)
- web/components/UserProfile.ce.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioItem.vue
- web/components/UpdateOs/CheckUpdateResponseModal.vue
- unraid-ui/stories/components/common/Badge.stories.ts
- web/components/Activation/ActivationSteps.vue
- unraid-ui/src/components/brand/BrandButton.vue
- unraid-ui/src/forms/ComboBoxField.vue
- unraid-ui/stories/components/layout/PageContainer.stories.ts
- unraid-ui/stories/components/form/Label.stories.ts
- unraid-ui/stories/components/form/Lightswitch.stories.ts
- web/components/UpdateOs/UpdateIneligible.vue
🚧 Files skipped from review as they are similar to previous changes (63)
- unraid-ui/stories/components/common/Popover.stories.ts
- unraid-ui/src/forms/ControlWrapper.vue
- unraid-ui/stories/components/common/Sheet.stories.ts
- unraid-ui/src/components/common/stepper/StepperIndicator.vue
- web/components/UserProfile/DropdownTrigger.vue
- web/helpers/globals.d.ts
- unraid-ui/src/components/common/badge/Badge.vue
- web/components/Brand/Avatar.vue
- unraid-ui/src/styles/index.css
- web/components/UserProfile/Keyline.vue
- unraid-ui/src/components/common/stepper/StepperItem.vue
- unraid-ui/stories/components/common/DropdownMenu.stories.ts
- unraid-ui/src/components/form/select/SelectTrigger.vue
- unraid-ui/stories/components/common/Stepper.stories.ts
- unraid-ui/stories/components/form/Select.stories.ts
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue
- unraid-ui/stories/components/form/Switch.stories.ts
- unraid-ui/src/forms/InputField.vue
- web/components/UpdateOs/Downgrade.vue
- web/components/Modals.ce.vue
- unraid-ui/stories/components/common/Tooltip.stories.ts
- unraid-ui/src/components/common/stepper/StepperSeparator.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue
- unraid-ui/vite.web-component.ts
- web/components/Registration/UpdateExpirationAction.vue
- unraid-ui/src/components/form/combobox/ComboboxItem.vue
- unraid-ui/src/components/brand/brand-loading.variants.ts
- unraid-ui/src/components/form/select/SelectContent.vue
- web/components/UpdateOs/Status.vue
- unraid-ui/src/components/form/combobox/ComboboxList.vue
- unraid-ui/stories/components/common/Tabs.stories.ts
- unraid-ui/.storybook/preview.ts
- unraid-ui/stories/components/brand/BrandLogo.stories.ts
- web/components/Notifications/Sidebar.vue
- web/components/Registration/ReplaceCheck.vue
- unraid-ui/stories/components/form/Input.stories.ts
- unraid-ui/src/forms/LabelRenderer.vue
- web/components/Activation/WelcomeModal.ce.vue
- unraid-ui/src/components/form/lightswitch/Lightswitch.vue
- unraid-ui/.storybook/tailwind.config.ts
- unraid-ui/stories/components/common/Button.stories.ts
- unraid-ui/src/components/form/number/NumberFieldContent.vue
- unraid-ui/stories/components/brand/BrandLogoConnect.stories.ts
- web/components/ApiKey/ApiKeyManager.vue
- web/components/UserProfile/DropdownItem.vue
- unraid-ui/tailwind.config.ts
- web/tailwind.config.ts
- unraid-ui/eslint.config.ts
- unraid-ui/stories/components/layout/CardWrapper.stories.ts
- unraid-ui/stories/components/common/ScrollArea.stories.ts
- web/components/UpdateOs/Update.vue
- unraid-ui/src/theme/preset.ts
- unraid-ui/src/styles/globals.css
- unraid-ui/.storybook/main.ts
- unraid-ui/stories/components/brand/BrandLoading.stories.ts
- web/assets/main.css
- unraid-ui/src/components/form/select/SelectItem.vue
- unraid-ui/stories/components/brand/BrandButton.stories.ts
- unraid-ui/stories/components/form/Combobox.stories.ts
- web/components/UpdateOs/CallbackButton.vue
- unraid-ui/vite.config.ts
- web/package.json
- unraid-ui/package.json
🧰 Additional context used
🪛 Biome (1.9.4)
unraid-ui/stories/components/common/Loading.stories.ts
[error] 3-3: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Test API
- GitHub Check: Build API
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
unraid-ui/stories/components/common/Loading.stories.ts (2)
1-1: LGTM! Storybook import updated for Vite integration.The import change from
@storybook/vue3to@storybook/vue3-vitealigns with the Tailwind v4 migration and Storybook configuration updates mentioned in the PR summary.
7-7: Quote consistency updates look good.The standardization from double quotes to single quotes maintains consistency across the codebase.
Also applies to: 38-38
| import Spinner from "../../../src/components/common/loading/Spinner.vue"; | ||
| import type { Meta, StoryObj } from '@storybook/vue3-vite'; | ||
| import Bar from '../../../src/components/common/loading/Bar.vue'; | ||
| import Error from '../../../src/components/common/loading/Error.vue'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Address variable shadowing of global Error.
The import name Error shadows the global Error constructor, which could lead to confusion when debugging or when needing to use the native Error object.
Consider renaming the import to avoid shadowing:
-import Error from '../../../src/components/common/loading/Error.vue';
+import LoadingError from '../../../src/components/common/loading/Error.vue';And update the references throughout the file:
- subcomponents: { Bar, Spinner, Error },
+ subcomponents: { Bar, Spinner, LoadingError },-type ErrorStory = StoryObj<typeof Error>;
+type ErrorStory = StoryObj<typeof LoadingError>;- components: { Error },
+ components: { LoadingError },- <Error v-bind="args">
+ <LoadingError v-bind="args">- </Error>
+ </LoadingError>🧰 Tools
🪛 Biome (1.9.4)
[error] 3-3: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🤖 Prompt for AI Agents
In unraid-ui/stories/components/common/Loading.stories.ts at line 3, the import
named `Error` shadows the global JavaScript `Error` constructor. Rename this
import to a different identifier, such as `LoadingError`, and update all
references to this component throughout the file accordingly to avoid confusion
and preserve access to the native Error object.
elibosley
force-pushed
the
feat/tailwind-v4
branch
from
66b5d60 to
cca2514
Compare
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
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.
Summary by CodeRabbit
New Features
Bug Fixes
flex-shrink-0toshrink-0,bg-gradient-to-rtobg-linear-to-r, bracketed attribute selectors to hyphenated forms).Chores
Style
Documentation