Add core swirl option - #5
Conversation
|
Warning Review limit reached
Your plan currently allows 1 review/hour. Refill in 53 minutes and 52 seconds. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more review capacity refills, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR introduces a ChangesSwirl feature implementation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 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)
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: 1
🧹 Nitpick comments (1)
tests/library.test.mjs (1)
57-63: ⚡ Quick winAdd lower-bound clamp coverage for
swirl(< 0).Current tests validate clamping above 100, but not below 0, even though the contract is 0–100. Add one negative-value case to lock that behavior.
Proposed test addition
test("clamps swirl above 100", () => { const css = createGrainGradientCSS({ swirl: 999 }); assert.ok(css.includes("background-size: 155.0% 140.0%")); assert.ok(css.includes("background-position: 62.0% 40.0%")); assert.ok(css.includes("scale(1.400)")); assert.ok(css.includes("rotate(12.00deg)")); }); + +test("clamps swirl below 0", () => { + const css = createGrainGradientCSS({ swirl: -20 }); + assert.ok(!css.includes("background-position:")); + assert.ok(!css.includes("rotate(")); + assert.ok(!css.includes("scale(1.12) translate3d")); +});🤖 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 `@tests/library.test.mjs` around lines 57 - 63, Add a test case in tests/library.test.mjs to verify swirl values below 0 are clamped to 0: create a new test (e.g., "clamps swirl below 0") that calls createGrainGradientCSS({ swirl: -1 }) and asserts the generated CSS matches the expected output for swirl 0 (same background-size, background-position, scale and rotate strings used in the existing "clamps swirl above 100" test); this ensures createGrainGradientCSS enforces the 0–100 contract for negative inputs.
🤖 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/react.tsx`:
- Around line 21-35: normalizeSwirl currently returns full-precision derived
numbers; update it to match the rounding/formatting used in src/core.ts so React
output matches API CSS. Keep clamp(swirl) and enabled logic, but round the
derived fields (scale, rotate, offsetX, offsetY, backgroundSizeX,
backgroundSizeY, backgroundPositionX, backgroundPositionY and any intermediate
shift if used for calculations) to the same precision/formatting as core.ts
before returning; reference the normalizeSwirl function and ensure the returned
object properties use the rounded values.
---
Nitpick comments:
In `@tests/library.test.mjs`:
- Around line 57-63: Add a test case in tests/library.test.mjs to verify swirl
values below 0 are clamped to 0: create a new test (e.g., "clamps swirl below
0") that calls createGrainGradientCSS({ swirl: -1 }) and asserts the generated
CSS matches the expected output for swirl 0 (same background-size,
background-position, scale and rotate strings used in the existing "clamps swirl
above 100" test); this ensures createGrainGradientCSS enforces the 0–100
contract for negative inputs.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 64152de8-61a9-4873-9861-f553274fa606
📒 Files selected for processing (6)
README.mddocs/API.mdplayground/index.htmlsrc/core.tssrc/react.tsxtests/library.test.mjs
1 participant
Summary
swirlmesh option and carry it through generated CSS and React helpersTests
Summary by CodeRabbit
New Features
swirlparameter support to mesh gradients for enhanced customization.swirl: 0–100) and React (swirl={value}) implementations.Documentation
swirloption details and configuration guidance.