add zoom-* utilities#20020
Conversation
Confidence Score: 5/5Safe to merge — the change is a self-contained additive utility with no modifications to existing behaviour. The new zoom utility is a straightforward additive feature. It follows the exact same implementation pattern as the many existing percentage-based utilities (scale, brightness, contrast, etc.), uses the same isPositiveInteger guard, and does not touch any shared logic. Tests cover themed, bare, and arbitrary values as well as negative/invalid rejection. No existing utilities or their outputs are altered. No files require special attention. Reviews (2): Last reviewed commit: "update changelog" | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| } | ||
|
|
||
| .zoom-compact { | ||
| zoom: var(--zoom-compact); | ||
| } | ||
| " | ||
| `) |
There was a problem hiding this comment.
The PR description explicitly shows zoom-[1.1] → zoom: 1.1 as a supported form, but the test only exercises zoom-[var(--zoom)] for arbitrary values. A <number> arbitrary value (e.g. zoom-[1.1], zoom-[0.8]) is the natural way to express sub-100% zoom without percent syntax and should be covered to confirm the arbitrary path passes the value through unchanged.
There was a problem hiding this comment.
Sure, but any value in […] is emitted as-is, so the result would be the same.
|
ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (1)
Hidden review stack artifactWalkthroughThis PR adds a new zoom CSS utility that maps 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
packages/tailwindcss/src/utilities.ts (2)
1721-1726: ⚡ Quick win
'0'is absent from thezoomsuggest values.
scale'ssuggestblock includes'0'(which maps toscale: 0/scale-0). Sincezoom: 0%is valid CSS (renders the element invisible, useful for enter/exit animations), andisPositiveIntegertreats'0'as a valid input elsewhere in this file (e.g.,zindex),zoom-0should be a supported value. Omitting it from the completions list means IDEs and tooling won't surface it as a suggestion.💡 Proposed fix
suggest('zoom', () => [ { - values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'], + values: ['0', '50', '75', '90', '95', '100', '105', '110', '125', '150', '200'], valueThemeKeys: ['--zoom'], }, ])🤖 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 `@packages/tailwindcss/src/utilities.ts` around lines 1721 - 1726, The suggest list for zoom is missing the '0' option; update the suggest('zoom', ...) block (the values array in that call) to include '0' alongside the existing percentages so IDEs surface zoom-0; modify the values array in the suggest('zoom', () => [...]) entry (and ensure valueThemeKeys ['--zoom'] remains unchanged) to add '0' as a valid completion.
1709-1727: Consider addingzoomto the defaulttransition-propertylist.The default
transitionvalue (Line 4712) coverstransform, translate, scale, rotatebut notzoom. Sincezoomis now a first-class utility, users applyingtransition zoom-50 hover:zoom-100will be surprised thattransitionalone doesn't include it. This is analogous to howscaleis included.This is an architectural decision for the PR author to evaluate — it's a separate change from the utility registration, but worth deciding before shipping so the API is complete from day one.
🤖 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 `@packages/tailwindcss/src/utilities.ts` around lines 1709 - 1727, The default transition-property list currently omits "zoom", so add "zoom" to the default transition property set (the same place the existing defaults for "transform, translate, scale, rotate" are defined) so that utilities like transition and classes like hover:zoom-100 animate as expected; update the default transition property constant/array (where the default transition value is assembled) to include "zoom" and run/update any related tests/docs that assert the default transition-property list.packages/tailwindcss/src/utilities.test.ts (1)
6902-6939: ⚡ Quick winAdd coverage for documented
zoom-[1.1]andzoom-(--value)syntaxesLine 6902 introduces good coverage, but the two syntaxes called out in the PR description are not asserted here. Adding them would better lock behavior to the documented contract.
Proposed test extension
test('zoom', async () => { expect( await compileCss( css` `@theme` { --zoom-compact: 80%; } `@tailwind` utilities; `, - ['zoom-50', 'zoom-100', 'zoom-[var(--zoom)]', 'zoom-compact'], + [ + 'zoom-50', + 'zoom-100', + 'zoom-[1.1]', + 'zoom-[var(--zoom)]', + 'zoom-(--value)', + 'zoom-compact', + ], ), ).toMatchInlineSnapshot(` " @@ .zoom-100 { zoom: 100%; } + .zoom-\\[1\\.1\\] { + zoom: 1.1; + } + .zoom-\\[var\\(--zoom\\)\\] { zoom: var(--zoom); } + .zoom-\\(--value\\) { + zoom: var(--value); + } + .zoom-compact { zoom: var(--zoom-compact); }🤖 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 `@packages/tailwindcss/src/utilities.test.ts` around lines 6902 - 6939, The "zoom" test lacks assertions for the documented syntaxes `zoom-[1.1]` and `zoom-(--value)`; update the test named "zoom" to include those classnames when calling compileCss and run so the compiled output and runtime filter are verified: add 'zoom-[1.1]' and 'zoom-(--value)' to the compileCss class list and to the run([...]) input, and assert the compiled CSS contains the corresponding rules (an escaped selector for the bracket form mapping to zoom:1.1 and an escaped selector for the parenthesis/variable form mapping to zoom:var(--value)) so the test locks the documented behavior for compileCss and run.
🤖 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.
Nitpick comments:
In `@packages/tailwindcss/src/utilities.test.ts`:
- Around line 6902-6939: The "zoom" test lacks assertions for the documented
syntaxes `zoom-[1.1]` and `zoom-(--value)`; update the test named "zoom" to
include those classnames when calling compileCss and run so the compiled output
and runtime filter are verified: add 'zoom-[1.1]' and 'zoom-(--value)' to the
compileCss class list and to the run([...]) input, and assert the compiled CSS
contains the corresponding rules (an escaped selector for the bracket form
mapping to zoom:1.1 and an escaped selector for the parenthesis/variable form
mapping to zoom:var(--value)) so the test locks the documented behavior for
compileCss and run.
In `@packages/tailwindcss/src/utilities.ts`:
- Around line 1721-1726: The suggest list for zoom is missing the '0' option;
update the suggest('zoom', ...) block (the values array in that call) to include
'0' alongside the existing percentages so IDEs surface zoom-0; modify the values
array in the suggest('zoom', () => [...]) entry (and ensure valueThemeKeys
['--zoom'] remains unchanged) to add '0' as a valid completion.
- Around line 1709-1727: The default transition-property list currently omits
"zoom", so add "zoom" to the default transition property set (the same place the
existing defaults for "transform, translate, scale, rotate" are defined) so that
utilities like transition and classes like hover:zoom-100 animate as expected;
update the default transition property constant/array (where the default
transition value is assembled) to include "zoom" and run/update any related
tests/docs that assert the default transition-property list.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 13235977-428f-40e3-8a43-e670c55a3b32
⛔ Files ignored due to path filters (1)
packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (4)
CHANGELOG.mdpackages/tailwindcss/src/property-order.tspackages/tailwindcss/src/utilities.test.tspackages/tailwindcss/src/utilities.ts
RobinMalfait
force-pushed
the
feat/add-zoom
branch
from
0c1893c to
289765c
Compare
1 participant
This PR adds new
zoom-*utilities.The
zoom-*utilities accept bare values that are transformed into%based values. They support arbitrary values, and support theme values coming from--zoom-*:zoom-50zoom: 50%;zoom-[1.1]zoom: 1.1;zoom-(--value)zoom: var(--value);zoom-compact:This doesn't ship with any
--zoom-*theme keys out of the box.This also adds the
zoomproperty after thetransformrelated properties. Initially I added it right afterscale, because logically they are close together. But thenzoom-*would sit betweenscaleand other tranfsorm related properties which is a bit weird. Instead, I moved it aftertransform.Test plan