archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add grow and shrink aliases (#5733)

Browse Source 
This adds `grow-*` and `shrink-*` utilities as aliases for `flex-grow-*` and `flex-shrink-*` since those names are unnecessarily verbose. We will stop documenting the long form ones and consider them deprecated.

```diff
- <div class="flex-grow-0 flex-shrink">
+ <div class="grow-0 shrink">
```
This commit is contained in:
Adam Wathan 2021-10-09 09:48:12 -04:00 committed by GitHub
parent 6d04c2dcc7
commit d2b53cd3af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/corePlugins.js
View File

@ -645,8 +645,14 @@ export let corePlugins = {
maxWidth: createUtilityPlugin('maxWidth', [['max-w', ['maxWidth']]]),
flex: createUtilityPlugin('flex'),
flexShrink: createUtilityPlugin('flexShrink', [['flex-shrink', ['flex-shrink']]]),
flexGrow: createUtilityPlugin('flexGrow', [['flex-grow', ['flex-grow']]]),
flexShrink: createUtilityPlugin('flexShrink', [
['flex-shrink', ['flex-shrink']], // Deprecated
['shrink', ['flex-shrink']],
]),
flexGrow: createUtilityPlugin('flexGrow', [
['flex-grow', ['flex-grow']], // Deprecated
['grow', ['flex-grow']],
]),
flexBasis: createUtilityPlugin('flexBasis', [['basis', ['flex-basis']]]),
tableLayout: ({ addUtilities }) => {

6
tests/arbitrary-values.test.css
View File

@ -212,9 +212,15 @@
.flex-shrink-\[var\(--shrink\)\] {
flex-shrink: var(--shrink);
}
.shrink-\[var\(--shrink\)\] {
flex-shrink: var(--shrink);
}
.flex-grow-\[var\(--grow\)\] {
flex-grow: var(--grow);
}
.grow-\[var\(--grow\)\] {
flex-grow: var(--grow);
}
.basis-\[var\(--basis\)\] {
flex-basis: var(--basis);
}

2
tests/arbitrary-values.test.html
View File

@ -77,7 +77,9 @@
<div class="flex-[var(--flex)]"></div>
<div class="flex-shrink-[var(--shrink)]"></div>
<div class="shrink-[var(--shrink)]"></div>
<div class="flex-grow-[var(--grow)]"></div>
<div class="grow-[var(--grow)]"></div>
<div class="basis-[var(--basis)]"></div>
<div class="origin-[50px_50px]"></div>

12
tests/basic-usage.test.css
View File

@ -281,12 +281,24 @@
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.flex-grow-0 {
flex-grow: 0;
}
.grow {
flex-grow: 1;
}
.grow-0 {
flex-grow: 0;
}
.basis-auto {
flex-basis: auto;
}

8
tests/basic-usage.test.html
View File

@ -48,10 +48,10 @@
<div class="fill-current"></div>
<div class="flex-1"></div>
<div class="flex-row-reverse"></div>
<div class="flex-grow"></div>
<div class="flex-grow-0"></div>
<div class="flex-shrink"></div>
<div class="flex-shrink-0"></div>
<div class="flex-grow flex-grow-0"></div>
<div class="grow grow-0"></div>
<div class="flex-shrink flex-shrink-0"></div>
<div class="shrink shrink-0"></div>
<div class="basis-auto basis-7"></div>
<div class="flex-wrap"></div>
<div class="float-right"></div>