feat(preset-mini, preset-wind4): add stretch keyword for width/height
#5048
Conversation
✅ Deploy Preview for unocss ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR adds support for the CSS stretch keyword for width and height utilities in preset-mini and preset-wind4. The stretch value allows elements to fill the available space in the containing block, which is particularly useful for modern layout scenarios.
Key Changes:
- Added
stretchcase handling in thegetSizeValuefunction for both presets - Added test cases for
w-stretchandmax-w-stretchutilities - Updated expected CSS output snapshots
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages-presets/preset-mini/src/_rules/size.ts | Added stretch case to return 'stretch' value in getSizeValue function |
| packages-presets/preset-wind4/src/rules/size.ts | Added stretch case to set 'stretch' value in getSizeValue function |
| test/assets/preset-mini-targets.ts | Added test cases for w-stretch and max-w-stretch utilities |
| test/assets/output/preset-mini-targets.css | Updated expected CSS output for preset-mini with stretch utilities |
| test/assets/output/preset-wind4-targets.css | Updated expected CSS output for preset-wind4 with stretch utilities |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 'w-none', | ||
| 'w-auto', | ||
| 'w-unset', | ||
| 'w-stretch', |
There was a problem hiding this comment.
The test coverage is incomplete. While w-stretch is added here, the implementation in the size.ts files also supports h-stretch, min-h-stretch, and max-h-stretch utilities since they use the same getSizeValue function. These test cases should be added for consistency and completeness.
| 'max-w-20', | ||
| 'max-w-lg', | ||
| 'max-w-full', | ||
| 'max-w-stretch', |
There was a problem hiding this comment.
The test coverage is incomplete. The max-h-stretch and min-h-stretch test cases are missing, even though the implementation supports them. For completeness, these should be added alongside max-w-stretch.
|
commit: |
close #5044
I added the keyword
stretch, but I can't find a more elegant way to handle compatibility prefixes across different browsers.I recommend using it in pair with https://github.com/unocss-community/unocss-preset-autoprefixer for better compatibility.
Refer to Lightingcss Playground
/cc @jods4