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

feat(preset-mini): support size-* shorthand #3425

Merged
merged 4 commits into from
Dec 27, 2023

Conversation

Mini-ghost
Copy link
Contributor

This PR adds the size-* shorthand to support setting both width and height in a class.

Example:

/* <div class="size-[calc(1000px-4rem)]></div>  */
.size-\[calc\(1000px-4rem\)\] {
  width: calc(1000px - 4rem);
  height: calc(1000px - 4rem);
}

/* <div class="size-[var(--something)]></div> */
.size-\[var\(--something\)\] {
  width: var(--something);
  height: var(--something);
}

/* <div class="size-10></div>  */
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

/* <div class="size-max-10></div>  */
.size-max-10 {
  max-width: 2.5rem;
  max-height: 2.5rem;
}

/* <div class="size-min-10></div>  */
.size-min-10 {
  min-width: 2.5rem;
  min-height: 2.5rem;
}

Copy link

netlify bot commented Dec 6, 2023

Deploy Preview for unocss ready!

Name Link
🔨 Latest commit 6fa226c
🔍 Latest deploy log https://app.netlify.com/sites/unocss/deploys/6589a072127d350008eb182f
😎 Deploy Preview https://deploy-preview-3425--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.

Copy link
Collaborator

@chu121su12 chu121su12 left a comment

Choose a reason for hiding this comment

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

How about moving the rule before the size-w/h so size-w-10 can override size-10?

@Mini-ghost
Copy link
Contributor Author

Thank you for the reminder, this is indeed very important.

@antfu antfu added this pull request to the merge queue Dec 27, 2023
Merged via the queue into unocss:main with commit 7623e65 Dec 27, 2023
9 checks passed
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.

None yet

4 participants