fix(preset-mini, preset-wind4): update transform perspective generated css#5114
fix(preset-mini, preset-wind4): update transform perspective generated css#5114
Conversation
✅ Deploy Preview for unocss ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
commit: |
There was a problem hiding this comment.
Pull request overview
This pull request addresses issue #5097 by distinguishing between the CSS perspective property and the CSS perspective() transform function in both preset-mini and preset-wind4. The changes ensure that:
perspective-*utilities generate the CSSperspectivepropertytransform-perspective-*utilities generate theperspective()transform function within thetransformproperty
Changes:
- Modified regex patterns to capture the optional
transform-prefix for perspective utilities - Added
perspective(var(--un-perspective))to the beginning of the transform string in preset-mini - Updated transform generation logic to handle
transform-perspective-*as a transform function - Updated autocomplete suggestions to reflect the new behavior
- Updated all test snapshots to match the new CSS output
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages-presets/preset-mini/src/_rules/transform.ts | Added perspective() to transform string; updated regex to distinguish transform-perspective from perspective |
| packages-presets/preset-wind4/src/rules/transform.ts | Updated regex and logic to handle transform-perspective separately; removed autocomplete for transform-perspective |
| test/assets/preset-mini-targets.ts | Added test case for transform-perspective-9cm |
| test/assets/output/*.css | Updated all test snapshots to include perspective(var(--un-perspective)) in transform rules |
| test/snapshots/postcss.test.ts.snap | Updated postcss test snapshot |
| packages-integrations/svelte-scoped/src/_preprocess/transformClasses/test-outputs/*.svelte | Updated Svelte integration test outputs |
| packages-engine/core/test/*.ts | Updated core engine test outputs |
| packages-integrations/runtime/test/assets/output/*.css | Updated runtime integration test outputs |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (v != null) { | ||
| if (t) { | ||
| return { | ||
| '--un-perspective': `perspective(${v})`, |
There was a problem hiding this comment.
There is a critical bug in how --un-perspective is set and used. On line 86, the variable is set to include the perspective() function wrapper (e.g., perspective(9cm)), but on line 27, it's used inside another perspective() function call, resulting in double nesting: perspective(perspective(9cm)), which is invalid CSS.
You can verify this in the test output at test/assets/output/preset-mini-targets.css:336 where it generates:
.transform-perspective-9cm{--un-perspective:perspective(9cm);transform:perspective(var(--un-perspective)) ...}The fix is to change line 86 to set --un-perspective to just the value without the function wrapper:
- Change
'--un-perspective': \perspective(${v})`to'--un-perspective': v`
Additionally, add '--un-perspective': 0 to transformBase (lines 55-69) as the default initial value. Note that perspective(0) has a special meaning in CSS (disables perspective), which may be the desired default behavior when no perspective is explicitly set.
Note: preset-wind4 handles this correctly by storing the full perspective() function in the variable and directly using var(--un-perspective) without double wrapping (see preset-wind4/src/rules/transform.ts:61-62).
| const transform = [ | ||
| 'perspective(var(--un-perspective))', | ||
| 'translateX(var(--un-translate-x))', | ||
| 'translateY(var(--un-translate-y))', | ||
| 'translateZ(var(--un-translate-z))', |
There was a problem hiding this comment.
The transformGpu constant doesn't include perspective(var(--un-perspective)) at the beginning like the regular transform constant does. This inconsistency means that if a user uses transform-gpu along with transform-perspective-*, the perspective transformation won't be applied.
For consistency, consider adding perspective(var(--un-perspective)) at the beginning of the transformGpu array, or document why GPU transforms intentionally exclude perspective.
| } | ||
| } | ||
| }, { autocomplete: [`transform-perspective-<num>`, `perspective-<num>`, `perspective-$perspective`] }], | ||
| }, { autocomplete: [`perspective-<num>`, `perspective-$perspective`] }], |
There was a problem hiding this comment.
The autocomplete array removed transform-perspective-<num> from the suggestions. However, based on the regex pattern on line 48 which still matches transform-perspective-*, this autocomplete option should be retained for better developer experience.
Consider keeping transform-perspective-<num> in the autocomplete array alongside the existing entries.
| }, { autocomplete: [`perspective-<num>`, `perspective-$perspective`] }], | |
| }, { autocomplete: [ | |
| `perspective-<num>`, | |
| `perspective-$perspective`, | |
| `transform-perspective-<num>`, | |
| `transform-perspective-$perspective`, | |
| ] }], |
|
What is the purpose of This PR breaks our website styling with The old one in 
The new one from 
After manually removing the We have to revert to |
|
@sep2 I apologize for the inconvenience caused. This will be fixed in version 66.6.2. |
|
Thanks for the quick revert fix. |
close #5097
This PR changes the following:
mdn: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Values/transform-function/perspective
preset-wind4, considering that tailwind doesn't support transform perspective, we decided to align its behavior. However, you can still use this rule to support perspective transform. If you have many transform elements, to avoid perspective not working, please optimize the use oftransform-perspective-xxxto increase its weight, as other transforms don't inherently support perspective.example