Add grow and shrink aliases (#5733)

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"> ```
tailwindlabs · Oct 9, 2021 · d2b53cd · d2b53cd
1 parent 6d04c2d
commit d2b53cd
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 6 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -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 }) => {

diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
@@ -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);
 }

diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
@@ -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>

diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
@@ -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;
 }

diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
@@ -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>