fix(preset-wind4): keep the [color:...] type hint intact when parsing colors - #5299
Conversation
✅ Deploy Preview for unocss ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
commit: |
| await expect(css).toMatchFileSnapshot('./assets/output/preset-wind4-reset.css') | ||
| }) | ||
|
|
||
| it('color type hint in arbitrary values', async () => { |
There was a problem hiding this comment.
There is no need to write a separate test case for this.
cdd9f3b to
829b62e
Compare
|
Dropped the separate test case. The coverage now lives in the shared targets list: Also rebased onto main. The only conflict was in Counterfactual after the rebase, rebuilt each time because the tests resolve the built preset: reverting only |
Description
In
preset-wind4, an arbitrary value carrying acolor:data-type hint produces no CSS at all for most color utilities:border-[color:*]works, because #5206 made the border rules strip the hint withh.bracketOfColorbefore reachingparseColor. Every other color utility goes straight toparseColorand silently yields nothing.Cause
parseColorsplits the body on/and:withgetStringComponents:https://github.com/unocss/unocss/blob/main/packages-presets/preset-wind4/src/utils/utilities.ts#L103
getStringComponentsdefaults its grouping characters to(and), so square brackets do not protect their content. For[color:red]the colon is seen at depth 0 and the body is split into["[color", "red]"].frontis then[color, which cannot matchbracketTypeRe, so the type-hint branch immediately below it is unreachable for every bracketed value, and the utility resolves to a color named[colorwith an opacity ofred].preset-minidoes the same split throughsplitShorthand, which passes'['/']'explicitly and is unaffected:https://github.com/unocss/unocss/blob/main/packages-presets/preset-mini/src/_utils/utilities.ts#L76
preset-wind4has its own copy of that helper with the same correct arguments atutilities.ts:76, so the two splitters in the same file disagree.Fix
Pass
'['/']'togetStringComponentsinparseColor, matchingsplitShorthandright above it. One line.Opacity and interpolation modifiers still compose:
text-[color:red]/50andtext-[color:red]:50/display-p3resolve as expected, andborder-[color:*]is unchanged.Tests
No separate test case. The coverage lives in the shared targets list:
bg-[color:#000],ring-[color:red],outline-[color:red],decoration-[color:red]andfill-[color:red]added totest/assets/preset-wind4-targets.ts, next to theborder-[color:*]entries already there.text-[color:*]is already covered bypresetMiniTargets.targetstest, sincetext-[color:--variable],text-[color:var(--color)]andtext-[color:var(--color-x)]:[trick]now generate CSS.test/assets/output/preset-wind4-targets.csspicks up the new selectors. The threetext-ones merge into the existing rule groups for their untyped equivalents, i.e. they produce byte-identical declarations totext-[--variable]andtext-[var(--color)].Verified by reverting only the source change, rebuilding, and re-running:
text-,bg-,outline-andfill-lose their rules entirely,ring-[color:red]falls through to the ring-width rule ascalc(red + var(--un-ring-offset-width)), anddecoration-[color:red]becomestext-decoration-thickness:red.