fix(preset-wind3, preset-wind4): update column generate value from container
#5030
Conversation
…`container` close #5029
✅ 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 PR fixes the columns utility in preset-wind3 and preset-wind4 to generate values from container theme configuration instead of only accepting generic values. The change allows using responsive container breakpoint names (like sm, md) with the columns utility.
- Updated
columnsrule to check container theme values first before falling back to standard handlers - Added support for CSS variable syntax with the
$variablepattern - Modified test targets to include
columns-smandcolumns-$variableexamples
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages-presets/preset-wind4/src/rules/columns.ts | Added theme.container lookup before handler chain; updated handler to remove .global and .auto; added explicit columns-auto rule |
| packages-presets/preset-wind3/src/rules/columns.ts | Added theme.containers lookup before handler chain; updated handler to remove .global and .auto; added explicit columns-auto rule |
| test/assets/preset-wind4-targets.ts | Replaced columns-unset with columns-sm and columns-$variable test cases |
| test/assets/preset-wind3-targets.ts | Replaced columns-unset with columns-sm and columns-$variable test cases |
| test/assets/output/preset-wind4-targets.css | Updated CSS output showing columns-sm using CSS variable, columns-$variable support, and removed columns-unset |
| test/assets/output/preset-wind3-targets.css | Updated CSS output showing columns-sm with direct value (24rem), columns-$variable support, and removed columns-unset |
| test/snapshots/postcss.test.ts.snap | Updated snapshot reflecting the new columns behavior with container values |
| packages-engine/autocomplete/test/snapshots/autocomplete.test.ts.snap | Updated autocomplete suggestions to show columns-auto first in the list |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| return { columns: h.bracket.numberWithUnit.number.cssvar(v) } | ||
| }, { autocomplete: 'columns-<num>' }], | ||
| ['columns-auto', { columns: 'auto' }], |
There was a problem hiding this comment.
The new implementation removes support for CSS global keywords like 'inherit', 'initial', 'revert', 'revert-layer', and 'unset'. The test files show 'columns-unset' was removed. To preserve this functionality, add ...makeGlobalStaticRules('columns') after line 14 (the columns-auto rule), similar to how break-before, break-inside, and break-after handle global keywords.
| ['columns-auto', { columns: 'auto' }], | |
| ['columns-auto', { columns: 'auto' }], | |
| ...makeGlobalStaticRules('columns'), |
|
|
||
| return { columns: h.bracket.numberWithUnit.number.cssvar(v) } | ||
| }, { autocomplete: 'columns-<num>' }], | ||
| ['columns-auto', { columns: 'auto' }], |
There was a problem hiding this comment.
The new implementation removes support for CSS global keywords like 'inherit', 'initial', 'revert', 'revert-layer', and 'unset'. The test files show 'columns-unset' was removed. To preserve this functionality, add ...makeGlobalStaticRules('columns') after line 13 (the columns-auto rule), similar to how break-before, break-inside, and break-after handle global keywords in other presets.
| ['columns-auto', { columns: 'auto' }], | |
| ['columns-auto', { columns: 'auto' }], | |
| ...makeGlobalStaticRules('columns'), |
| } | ||
|
|
||
| return { columns: h.bracket.numberWithUnit.number.cssvar(v) } | ||
| }, { autocomplete: 'columns-<num>' }], |
There was a problem hiding this comment.
The autocomplete configuration should include container theme values. Consider updating the autocomplete to include 'columns-$container' similar to how other theme-aware rules like perspective-$perspective are configured. This would help users discover that container values like 'sm', 'md', etc. can be used with the columns utility.
| }, { autocomplete: 'columns-<num>' }], | |
| }, { autocomplete: 'columns-<num> columns-$container' }], |
| } | ||
|
|
||
| return { columns: h.bracket.numberWithUnit.number.cssvar(v) } | ||
| }, { autocomplete: 'columns-<num>' }], |
There was a problem hiding this comment.
The autocomplete configuration should include container theme values. Consider updating the autocomplete to include 'columns-$containers' similar to how other theme-aware rules are configured. This would help users discover that container values like 'sm', 'md', etc. can be used with the columns utility.
| }, { autocomplete: 'columns-<num>' }], | |
| }, { autocomplete: 'columns-<num> columns-$containers' }], |
close #5029