fix: made tailwind classes compatible with all versions of consumers …#34
fix: made tailwind classes compatible with all versions of consumers …#34rahul-vyas-dev wants to merge 4 commits into
Conversation
…and some UI fixes with new features. - Added `className` and `border` props to SupportUsButton for better customization. - Updated the rendering of border lines to use values from the `border` prop. - Refactored the component to improve readability and maintainability. - Removed postcss plugin from Rollup config as Tailwind CSS is now built separately. - Introduced new build scripts for CSS and JS in package.json. - Updated package.json to include @tailwindcss/cli as a dependency. - Cleaned up style.css by removing unnecessary imports and added source references.
github-actions
Bot
added
no-issue-linked
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review limit reached
Next review available in: 53 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
WalkthroughSupportUsButton now accepts ChangesSupportUsButton customization and build pipeline
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Consumer
participant SupportUsButton
participant PageBorderSVG
Consumer->>SupportUsButton: Pass className and border coordinates
SupportUsButton->>PageBorderSVG: Render lines using border fields
PageBorderSVG-->>Consumer: Display customized page border
Possibly related PRs
Suggested labels: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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: 6
🤖 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 `@package.json`:
- Around line 57-59: Update the package.json dev script to watch both Tailwind
CSS through build:css and JavaScript through the existing Rollup watcher, using
the project's available parallel execution approach or adding the necessary
concurrently setup. Preserve the existing build:css and build:js scripts while
ensuring a single dev command runs both watchers.
In `@README.md`:
- Around line 338-345: Correct the README documentation for the border props:
replace the inaccurate call-to-action description with the proper border-related
description, and change the duplicated BottomX1 table entry to BottomX2 while
preserving its type, required status, and description.
In `@src/components/SupportUsButton.tsx`:
- Line 351: Fix the invalid Tailwind responsive class by replacing
md-justify-between with md:justify-between at src/components/SupportUsButton.tsx
lines 351-351 and 372-374.
- Around line 259-261: Update the className expression in the SupportUsButton
component to use the valid `md:container` class and replace the logical-and
interpolation with a ternary that returns the responsive classes when
`projectInformation?.name` exists and an empty string otherwise, preventing
`"undefined"` from entering the class string.
- Around line 373-374: The sponsors list in the sponsors?.map rendering should
use sponsor.name as the React key instead of the array index. Update the key on
the mapped sponsor element, preserving the existing layout and rendering
behavior.
- Around line 35-51: Mark the SupportUsButton component as a client component by
adding the Next.js client directive at the top of the file before imports,
preserving its existing onClick and window.open behavior.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: c10a8cfb-aed1-4561-ac29-b004e61413d9
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (7)
README.mdpackage.jsonrollup.config.jssrc/components/SupportUsButton.tsxsrc/index.tssrc/styles/style.csssrc/types/index.ts
💤 Files with no reviewable changes (1)
- rollup.config.js
1 participant
Screenshots/Recordings:
Before: -
After: -
Summary
This PR simplifies the package build process by removing the Tailwind CSS PostCSS/Rollup integration and introduces compatibility for both Tailwind CSS v3 and Tailwind CSS v4+ consumers.
Changes
Build System
{ "scripts": { "build:css": "npx @tailwindcss/cli -i ./src/styles/style.css -o ./dist/style.css --minify", "build:js": "rollup -c", "build": "npm run build:css && npm run build:js", "dev": "rollup -c -w", "prepublishOnly": "npm run build" } }@tailwindcss/clias a development dependency.Tailwind CSS Compatibility
This package now supports both Tailwind CSS v3 and Tailwind CSS v4+, accounting for the breaking changes introduced in Tailwind v4.
Tailwind CSS v4+
Consumers should import the precompiled stylesheet:
Since Tailwind v4 supports importing compiled CSS directly, the package's generated stylesheet from
dist/style.cssis used without requiring consumers to compile the package's Tailwind classes.Tailwind CSS v3 (and earlier)
Consumers should not import the compiled stylesheet.
Instead, they should include the package in their
tailwind.config.jscontentarray:In this case, the consumer's own Tailwind v3 compiler detects and compiles the utility classes from the package, ensuring full compatibility with Tailwind v3.
Why?
Tailwind CSS v4 introduced breaking changes that make a single distribution strategy incompatible with both versions.
This PR provides the appropriate integration path for each version:
dist/style.css).This approach allows the package to work seamlessly across both Tailwind versions while keeping the build process simpler and eliminating the previous Rollup/PostCSS dependency for Tailwind CSS.
classNameandborderprops to SupportUsButton for better customization.borderprop.Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.
Summary by CodeRabbit
New Features
classNamesupport for custom styling.Documentation
Logo,className, andborderproperties.Build Improvements