Skip to content

feat(preset-wind4): enhance color systax & support color-interpolation-method parsed#4729

Merged
zyyv merged 3 commits intomainfrom
pref-wind4-parse-color
Jun 11, 2025
Merged

feat(preset-wind4): enhance color systax & support color-interpolation-method parsed#4729
zyyv merged 3 commits intomainfrom
pref-wind4-parse-color

Conversation

@zyyv
Copy link
Member

@zyyv zyyv commented Jun 11, 2025

close #4669, close #4673

This PR changes are as follows:

  • Support custom color interpolation space method
  • Align tailwind4 about color output
    • Use the interpolation method of in srgb by default for theme colors, add support judgment for oklab, and output them together
    • Use the interpolation method of oklab by default for non-theme colors
   'text-red-500',
   'text-[red]/50', // Not theme color
+  'text-[red]:50/display-p3',
+  'text-red/display-p3',
+  'text-red/$op-variable', // When the color components length = 2, the second variable is used as opacity
+  'text-red/$op-variable/$method-variable',

@zyyv zyyv requested a review from antfu as a code owner June 11, 2025 12:35
@netlify
Copy link

netlify bot commented Jun 11, 2025

Deploy Preview for unocss ready!

Name Link
🔨 Latest commit 917f826
🔍 Latest deploy log https://app.netlify.com/projects/unocss/deploys/6849789a240cdc000860bf3d
😎 Deploy Preview https://deploy-preview-4729--unocss.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Jun 11, 2025

Open in StackBlitz

commit: 917f826

Comment on lines +47 to +49
"text-[color:--variable]",
"text-[color:var(--color)]",
"text-[color:var(--color-x)]:[trick]",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Due to the use of getStringComponents to parse the separator, it is difficult to support the format of color:xxx.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"text-[color:--variable]",
"text-[color:var(--color)]",
"text-[color:var(--color-x)]:[trick]",
"c-[--variable]",
"c-[var(--color)]",
"c-[var(--color-x)]:[trick]",

I suggest you make the following changes before it is compatible.

Comment on lines -136 to +146
const split = splitShorthand(body, 'color')
let split
const [front, ...rest] = getStringComponents(body, ['/', ':'], 3) ?? []

if (front != null) {
const match = (front.match(bracketTypeRe) ?? [])[1]

if (match == null || match === 'color') {
split = [front, ...rest]
}
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Due to stricter parsing of delimiters using getStringComponents

@zyyv zyyv merged commit ce4332c into main Jun 11, 2025
12 checks passed
@zyyv zyyv deleted the pref-wind4-parse-color branch June 11, 2025 13:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant