fix(color)!: keep hsla and rgba consistent with tailwindcss #3221
Conversation
✅ Deploy Preview for unocss ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Theres more to update. Please see https://github.com/chu121su12/unocss/tree/space-color-syntax |
antfu
changed the title
Thanks for the reminder, I've made some updates |
packages/rule-utils/src/colors.ts
Outdated
| if (['hsla', 'hsl', 'rgba', 'rgb'].includes(type)) | ||
| return `${type.replace('a', '')}a(${components.join(',')}${alpha == null ? '' : `,${alpha}`})` | ||
| if (['hsla', 'rgba'].includes(type)) | ||
| return `${type}(${components.join(' ')}${alpha == null ? '' : ` / ${alpha}`})` |
There was a problem hiding this comment.
Since we clearly agreed that we are going to align with Tailwind, I think this should use COMMA-SEPARATED syntax instead of SPACE-SEPARATED syntax.
Tailwind uses SPACE for rgb and hsl, but COMMA for rgba and hsla.
I can see that through out the MR we are changing everything to SPACE syntax, as well as rgba and hsla. This will work in the browser but that's not aligned with Tailwind.
There was a problem hiding this comment.
This will break for those who uses COMMA syntax with rgba and hsla (It makes sense to use legacy color function with legacy syntax? 🤣)
There was a problem hiding this comment.
I misunderstood it at first. I used tailwind play to check the output results and made adjustments.
antfu
changed the title
UnoCSS used to differ from Tailwind which required us to have a different format for our color variables. This is no longer the case, so we can use the regular Tailwind color variables. See: unocss/unocss#3221
|
@antfu @Simon-He95 Gmail explicitly doesn't support space separated color function values, so when using uno tomgenerate cas for HTML used in email, we get undesirable rendering. What's the solution (if any) tomrevert to comma separated? |
close: #3218
https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/color.js#L83