fix: made tailwind classes compatible with all versions of consumers …#34
Merged
Zahnentferner merged 6 commits intoJul 20, 2026
Merged
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.
|
WalkthroughSupportUsButton now accepts ChangesSupportUsButton customization and build pipeline
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 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
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
package.json (1)
60-60: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winUpdate the
devscript to watch CSS changes.Since CSS compilation was moved to a separate
build:cssstep, the existingdevscript (rollup -c -w) will no longer rebuild Tailwind styles automatically when classes are added or modified during local development. Consider updating thedevscript to concurrently watch both CSS and JS.🤖 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 `@package.json` at line 60, Update the package.json dev script to concurrently run the existing Rollup watch process and the build:css watch process, ensuring both JavaScript and Tailwind CSS changes rebuild during development. Reuse the repository’s existing concurrency tooling or add the required command consistently with available scripts.
♻️ Duplicate comments (4)
src/components/SupportUsButton.tsx (4)
353-353: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winFix the responsive class name typo.
The
md-justify-betweenclass is invalid; Tailwind CSS responsive modifiers require a colon (md:).
src/components/SupportUsButton.tsx#L353-L353: Replacemd-justify-betweenwithmd:justify-between.src/components/SupportUsButton.tsx#L374-L374: Replacemd-justify-betweenwithmd:justify-between.🤖 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/components/SupportUsButton.tsx` at line 353, Fix the invalid responsive Tailwind class by replacing md-justify-between with md:justify-between at both affected sites in src/components/SupportUsButton.tsx: lines 353-353 and 374-374.
375-376: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winUse a unique identifier for the list key.
Using the array index as a React
keycan lead to rendering issues if the list ever reorders or filters.
src/components/SupportUsButton.tsx#L375-L376: Usesponsor.nameinstead ofindex.src/components/SupportUsButton.tsx#L245-L247: Uselink.nameinstead ofindex.🤖 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/components/SupportUsButton.tsx` around lines 375 - 376, Replace the index-based React keys in both sponsor and link list mappings in src/components/SupportUsButton.tsx: use sponsor.name at lines 375-376 and link.name at lines 245-247, preserving the existing rendering logic.
28-35: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winAdd
"use client"to the top of the file.This component uses client-side APIs like
onClickandwindow.open, so it must be a client component in Next.js. As per path instructions, ensure that"use client"is being used. Please verify if it is defined at the very top of the file (before the imports) and add it if it is missing.🤖 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/components/SupportUsButton.tsx` around lines 28 - 35, Add the Next.js "use client" directive at the very top of the file, before all imports, so SupportUsButton can use its onClick handler and window.open client-side APIs.Source: Path instructions
261-263: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winFix the responsive class name typo and avoid
"undefined"in the class string.There are two issues in this expression:
md-containeris a typo for the valid Tailwind classmd:container.- Using the
&&logical operator inside a template literal stringifies a falsy value (likeundefined) into the literal string"undefined". Use a ternary operator to safely output an empty string when the condition is not met.💻 Proposed fix
- className={`mt-28 flex flex-col gap-12 ${projectInformation?.name && "md-container md:flex-row"} md:gap-4`} + className={`mt-28 flex flex-col gap-12 ${projectInformation?.name ? "md:container md:flex-row" : ""} md:gap-4`}🤖 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/components/SupportUsButton.tsx` around lines 261 - 263, Update the className expression in SupportUsButton 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.
🤖 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/components/SupportUsButton.tsx`:
- Around line 218-225: Update the anchor in the SupportUsButton component to use
the existing validatedUrl variable for href instead of interpolating
organizationInformation.link. Preserve the validation behavior and avoid
rendering an undefined URL when no link is provided.
In `@VERSION`:
- Line 1: Update the version value in VERSION from 2.1.0 to match the
package.json version, 2.1.1.
---
Outside diff comments:
In `@package.json`:
- Line 60: Update the package.json dev script to concurrently run the existing
Rollup watch process and the build:css watch process, ensuring both JavaScript
and Tailwind CSS changes rebuild during development. Reuse the repository’s
existing concurrency tooling or add the required command consistently with
available scripts.
---
Duplicate comments:
In `@src/components/SupportUsButton.tsx`:
- Line 353: Fix the invalid responsive Tailwind class by replacing
md-justify-between with md:justify-between at both affected sites in
src/components/SupportUsButton.tsx: lines 353-353 and 374-374.
- Around line 375-376: Replace the index-based React keys in both sponsor and
link list mappings in src/components/SupportUsButton.tsx: use sponsor.name at
lines 375-376 and link.name at lines 245-247, preserving the existing rendering
logic.
- Around line 28-35: Add the Next.js "use client" directive at the very top of
the file, before all imports, so SupportUsButton can use its onClick handler and
window.open client-side APIs.
- Around line 261-263: Update the className expression in SupportUsButton 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.
🪄 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: e9ff0fba-00dc-42bd-9faf-1fe4a83a63e2
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
VERSIONpackage.jsonsrc/components/SupportUsButton.tsx
Zahnentferner
approved these changes
Jul 20, 2026
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
2 participants
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.
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
SupportUsButtonwithclassNamefor custom styling.bordersupport for rendering customizable page-border coordinates.Documentation
Logo,className,border, and detailed border prop usage.Build Improvements