build: Tailwind CSS v3 → v4 마이그레이션#104
Merged
Merged
Conversation
6-keem
added
chore
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughTailwind CSS를 v3에서 v4로 업그레이드한다. PostCSS 파이프라인을 재구성하고 Shadow DOM ChangesTailwind CSS v3 → v4 마이그레이션
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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
🧹 Nitpick comments (1)
src/popover/dashboard/components/VodList.tsx (1)
79-82: CardHeader 컴포넌트가 v4 호환으로 업데이트되지 않았습니다.
src/components/ui/card.tsx의 CardHeader는 여전히 기본값으로space-y-1.5 p-6을 적용하고 있습니다. 따라서 VodList에서space-y-0과 명시적 패딩(px-5 pt-5 pb-3)을 추가하여 이를 오버라이드하는 것이 필수적입니다.CardHeader 컴포넌트 자체를 v4에 맞게 재설계하거나 더 유연하게 만드는 것을 검토하세요. 여러 곳에서 동일한 오버라이드가 필요한 경우라면 더욱 그렇습니다.
🤖 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/popover/dashboard/components/VodList.tsx` around lines 79 - 82, The CardHeader component in src/components/ui/card.tsx applies hardcoded default classes space-y-1.5 and p-6 which are causing VodList to need explicit overrides (space-y-0 and custom padding px-5 pt-5 pb-3). Refactor the CardHeader component to make the spacing and padding properties more flexible by either removing the hardcoded defaults, accepting className props that properly override defaults, or updating the defaults to be v4-compatible. This will eliminate the need for consumers like VodList to override the same values repeatedly.
🤖 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/styles/shadow.css`:
- Line 3: The `@config` directive in src/styles/shadow.css is valid Tailwind v4
syntax but stylelint's scss/at-rule-no-unknown rule from the extended
stylelint-config-standard-scss does not recognize it, causing lint errors. Open
.stylelintrc.json and locate the rules section, then add an exception for the
scss/at-rule-no-unknown rule that ignores the config at-rule by specifying
ignoreAtRules with config as an exempted at-rule. This will allow the `@config`
directive to pass linting without errors.
- Around line 22-23: The selector [role='button']:not(:disabled) fails to
properly exclude disabled state for custom elements because the :disabled
pseudo-class only applies to native form elements. Since the codebase uses the
data-disabled attribute on UI components (dropdown-menu, select, context-menu),
modify the [role='button']:not(:disabled) selector to use
[role='button']:not([data-disabled]) instead to correctly exclude elements with
the data-disabled attribute from receiving the pointer cursor style.
---
Nitpick comments:
In `@src/popover/dashboard/components/VodList.tsx`:
- Around line 79-82: The CardHeader component in src/components/ui/card.tsx
applies hardcoded default classes space-y-1.5 and p-6 which are causing VodList
to need explicit overrides (space-y-0 and custom padding px-5 pt-5 pb-3).
Refactor the CardHeader component to make the spacing and padding properties
more flexible by either removing the hardcoded defaults, accepting className
props that properly override defaults, or updating the defaults to be
v4-compatible. This will eliminate the need for consumers like VodList to
override the same values repeatedly.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 7010a488-4ba4-4ba0-8de5-d04839742e6e
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json,!package-lock.json
📒 Files selected for processing (26)
components.jsonpackage.jsonpostcss.config.jspostcss/tw-property-fallback.jssrc/components/ui/border-trail.tsxsrc/components/ui/button.tsxsrc/components/ui/card.tsxsrc/components/ui/context-menu.tsxsrc/components/ui/dropdown-menu.tsxsrc/components/ui/popover.tsxsrc/components/ui/select.tsxsrc/i18n/LanguageSwitcher.tsxsrc/popover/dashboard/components/DashboardHeader.tsxsrc/popover/dashboard/components/FilterItem.tsxsrc/popover/dashboard/components/InfoBubble.tsxsrc/popover/dashboard/components/NotificationBubble.tsxsrc/popover/dashboard/components/Setting.tsxsrc/popover/dashboard/components/VodList.tsxsrc/popover/player/components/PlayerIframe.tsxsrc/popover/player/components/PlayerPopoverContent.tsxsrc/popover/player/components/PlayerPopoverTrigger.tsxsrc/popover/player/components/SortableItem.tsxsrc/styles/index.csssrc/styles/option.csssrc/styles/shadow.csstailwind.config.js
💤 Files with no reviewable changes (2)
- src/styles/option.css
- src/styles/index.css
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
관련 이슈
Closes #103
변경 내용
Tailwind CSS v3 → v4 마이그레이션. 안 쓰는 HeroUI 의존성도 함께 제거.
@tailwindcss/upgrade적용: 디렉티브(@import 'tailwindcss'), 17개 컴포넌트의 유틸리티 클래스 rename(shadow→shadow-sm,rounded→rounded-sm,outline-none→outline-hidden등), v4 기본 border-color 변경 호환 shim@config레거시 모드로 기존tailwind.config.js(HSL 색상 토큰·tailwindcss-animate) 유지 — 마이그레이션 리스크 최소화tailwindcss+autoprefixer→@tailwindcss/postcss(v4가 prefix 내장)tailwind-mergev2 → v3: v2가shadow-xs등 v4 신규 클래스를 못 합쳐cn()머지가 깨지던 문제 해결src에서 import되지 않는@heroui/{theme,system,switch}+ config 참조 정리index.css/option.css제거, shadcncomponents.jsoncss 경로를 live 파일(shadow.css)로 갱신Shadow DOM 호환 (핵심)
이 확장의 UI는
adoptedStyleSheets로 Shadow DOM에 주입되는데, 이 환경에서는@property가 등록되지 않습니다. v4는 box-shadow·border·transform 등의 기본값과inherits:false를@property에 의존하므로, 그대로면 컨테이너 유틸리티(border-none·shadow-zinc)가 모든 카드로 상속 누수되어 인디케이터가 사라지고 그림자가 짙어지는 등 디자인이 깨집니다.→ Tailwind가 이미 생성하는
*변수 리셋 폴백(@Property 미지원 브라우저용,@supports로 비활성)을 무조건 적용시키는 PostCSS 플러그인(postcss/tw-property-fallback.js)을 추가해 해결. 동작 기반 매칭 + 미발견 시 경고로 견고성 확보. (참고: tailwindlabs/tailwindcss#16772)변경 유형
chore,ci)체크리스트
npm run lint와npm run build가 통과합니다.후속 (별도 이슈)
@property워크어라운드는 TW/브라우저가 지원하면 제거Summary by CodeRabbit
릴리스 노트
스타일
Refactor