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

Add size-* shorthand #12287

Merged
merged 2 commits into from
Oct 25, 2023
Merged

Add size-* shorthand #12287

merged 2 commits into from
Oct 25, 2023

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Oct 25, 2023

This PR adds a size-* utility that sets both width and height.

The supported values are the same as the w-* and h-* utilities with the exception of screen units (screen, svh, lvh, dvh, svw, lvw, and dvw).

Now you can write this:

<div class="size-12"></div>

And it will generate the following css:

.size-12 {
  width: 3rem;
  height: 3rem;
}

@thecrypticace thecrypticace merged commit e4b32a7 into master Oct 25, 2023
10 checks passed
@thecrypticace thecrypticace deleted the feat/size-shorthand branch October 25, 2023 15:54
thecrypticace added a commit that referenced this pull request Dec 4, 2023
* Add `size-*` shorthand

Add plugin tests

Adjust options

wip

* Update changelog
thecrypticace added a commit that referenced this pull request Dec 5, 2023
* Add `size-*` shorthand

Add plugin tests

Adjust options

wip

* Update changelog
thecrypticace added a commit that referenced this pull request Dec 18, 2023
* Add `size-*` shorthand

Add plugin tests

Adjust options

wip

* Update changelog
@@ -968,6 +968,40 @@ module.exports = {
'3/4': '75%',
full: '100%',
}),
size: ({ theme }) => ({

Choose a reason for hiding this comment

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

NIT: seems like the alphabetical order was not respected

@yassernasc
Copy link

Cool! But why not a shorthand for size-screen?

@DamianGlowala
Copy link
Contributor

@thecrypticace why were the aforementioned exceptions excluded?

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

5 participants