add zoom-* utilities#20020
Conversation
Confidence Score: 5/5The change is isolated, additive, and follows existing patterns precisely — safe to merge. The new zoom utility is a self-contained addition that mirrors established patterns (bare integer → percentage, arbitrary pass-through, no theme key by design). The property ordering placement is logical, tests cover the happy path and key rejection cases, and no existing utilities are modified. No files require special attention. Reviews (4): Last reviewed commit: "Merge branch 'main' into feat/add-zoom" | 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.
|
Caution Review failedThe pull request is closed. ℹ️ 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)
WalkthroughThis 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
| functionalUtility('zoom', { | ||
| handleBareValue: ({ value }) => { | ||
| if (!isPositiveInteger(value)) return null | ||
| return `${value}%` | ||
| }, | ||
| handle: (value) => [decl('zoom', value)], | ||
| }) | ||
|
|
||
| suggest('zoom', () => [ | ||
| { values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'] }, | ||
| ]) |
There was a problem hiding this comment.
zoom utility is missing themeKeys: ['--zoom'], so user-defined @theme values like --zoom-compact: 80% cannot be resolved via the zoom-compact shorthand. Every comparable functional utility that mixes bare-value handling with optional theme tokens (opacity, z, scale-x/y/z) passes a themeKeys array. Without it, theme.resolve('compact', []) always returns null, falling through to handleBareValue, which then rejects any non-integer string — meaning zoom-compact produces no output even when --zoom-compact is defined in @theme. The PR description explicitly shows this path as a supported feature.
| functionalUtility('zoom', { | |
| handleBareValue: ({ value }) => { | |
| if (!isPositiveInteger(value)) return null | |
| return `${value}%` | |
| }, | |
| handle: (value) => [decl('zoom', value)], | |
| }) | |
| suggest('zoom', () => [ | |
| { values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'] }, | |
| ]) | |
| functionalUtility('zoom', { | |
| themeKeys: ['--zoom'], | |
| handleBareValue: ({ value }) => { | |
| if (!isPositiveInteger(value)) return null | |
| return `${value}%` | |
| }, | |
| handle: (value) => [decl('zoom', value)], | |
| }) | |
| suggest('zoom', () => [ | |
| { | |
| values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'], | |
| valueThemeKeys: ['--zoom'], | |
| }, | |
| ]) |
There was a problem hiding this comment.
Removed reading from --zoom on purpose. They only exist in other utilities for backwards compatibility reasons with Tailwind CSS v3.
1 participant
This PR adds new
zoom-*utilities.The
zoom-*utilities accept bare values that are transformed into%based values, and arbitrary values:zoom-50zoom: 50%;zoom-[1.1]zoom: 1.1;zoom-(--value)zoom: var(--value);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