Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(preset-mini): support composite props #3810

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Conversation

zyyv
Copy link
Member

@zyyv zyyv commented May 16, 2024

close #3807.

@zyyv zyyv requested a review from antfu as a code owner May 16, 2024 02:33
Copy link

netlify bot commented May 16, 2024

Deploy Preview for unocss ready!

Name Link
🔨 Latest commit 62803ea
🔍 Latest deploy log https://app.netlify.com/sites/unocss/deploys/6651c3606fa64c0008f88787
😎 Deploy Preview https://deploy-preview-3810--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 site configuration.

@@ -840,6 +840,9 @@ export const presetMiniTargets: string[] = [
'transition-property-[border]',
'transition-200',
'transition-opacity-200',
'transition-colors',
'transition-colors,opacity',
'transition-colors,opacity-200',
'transition-color,background-color-200',
Copy link
Member Author

Choose a reason for hiding this comment

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

I don't know why vitest not update those snap.

@Curstantine
Copy link

Curstantine commented May 16, 2024

Wouldn't this break anything that depended on h.properties?
For an example, transition-height and etc would completely break.

This is why the `targets' test is failing.

image
image

@Curstantine
Copy link

Curstantine commented May 16, 2024

Since this PR adds a composite prop to the CSS props array in handler utils, it more or less breaks the whole prop resolving mechanism.

I think the better approach is to remove the composite prop from that handler array, and guard the h.properties value like the codebase has done before. Moreover, since h.properties only returns valid CSS values, we don't have to transform it further.

So an approach like this passes the test cases. Though for some odd reason the snapshot matching fails.

  1. Early return when properties are valid CSS properties.
  2. Transform the "custom" properties, filter undefined ones, and only return a valid string when the array itself is populated.
function transitionProperty(prop: string): string | undefined {
  const cssProps = h.properties(prop)
  if (cssProps !== undefined)
    return cssProps

  const transformed = prop.split(',').flatMap(x => transitionPropertyGroup[x]).filter(x => x !== undefined)
  return transformed.length > 0 ? transformed.join(',') : undefined
}

image

Curstantine added a commit to Curstantine/rxrcd that referenced this pull request May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Properties with multiple values are not matched against shortcuts.
3 participants