Add flex-basis utilities (#5671)

Author: adamwathan

src/corePlugins.js

@@ -636,6 +636,7 @@ export let corePlugins = {
   flex: createUtilityPlugin('flex'),
   flexShrink: createUtilityPlugin('flexShrink', [['flex-shrink', ['flex-shrink']]]),
   flexGrow: createUtilityPlugin('flexGrow', [['flex-grow', ['flex-grow']]]),
+  flexBasis: createUtilityPlugin('flexBasis', [['basis', ['flex-basis']]]),
 
   tableLayout: ({ addUtilities }) => {
     addUtilities({

stubs/defaultConfig.stub.js

@@ -279,6 +279,37 @@ module.exports = {
       initial: '0 1 auto',
       none: 'none',
     },
+    flexBasis: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+    }),
     flexGrow: {
       0: '0',
       DEFAULT: '1',

tests/arbitrary-values.test.css

@@ -215,6 +215,9 @@
 .flex-grow-\[var\(--grow\)\] {
   flex-grow: var(--grow);
 }
+.basis-\[var\(--basis\)\] {
+  flex-basis: var(--basis);
+}
 .origin-\[50px_50px\] {
   transform-origin: 50px 50px;
 }

tests/arbitrary-values.test.html

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

tests/basic-usage.test.css

@@ -233,6 +233,12 @@
 .flex-grow-0 {
   flex-grow: 0;
 }
+.basis-auto {
+  flex-basis: auto;
+}
+.basis-7 {
+  flex-basis: 1.75rem;
+}
 .table-fixed {
   table-layout: fixed;
 }

tests/basic-usage.test.html

@@ -52,6 +52,7 @@
     <div class="flex-grow-0"></div>
     <div class="flex-shrink"></div>
     <div class="flex-shrink-0"></div>
+    <div class="basis-auto basis-7"></div>
     <div class="flex-wrap"></div>
     <div class="float-right"></div>
     <div class="font-sans"></div>