feat: ✨ grow & shrink supports brackets unocss/unocss#1284

MellowCo · Jul 17, 2022 · aaf0038 · aaf0038
1 parent 66e9069
commit aaf0038
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/rules/flex.ts b/src/rules/flex.ts
@@ -16,11 +16,9 @@ export const flex: Rule<Theme>[] = [
   ['flex-none', { flex: 'none' }],
 
   // shrink/grow/basis
-  [/^(?:flex-)?shrink$/, () => ({ 'flex-shrink': 1 })],
-  [/^(?:flex-)?shrink-0$/, () => ({ 'flex-shrink': 0 })],
-  [/^(?:flex-)?grow$/, () => ({ 'flex-grow': 1 })],
-  [/^(?:flex-)?grow-0$/, () => ({ 'flex-grow': 0 })],
-  [/^(?:flex-)?basis-(.+)$/, ([, d], { theme }) => ({ 'flex-basis': theme.spacing?.[d] ?? h.bracket.cssvar.auto.fraction.remToRpx(d) })],
+  [/^(?:flex-)?shrink(?:-(.*))?$/, ([, d = '']) => ({ 'flex-shrink': h.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ['flex-shrink-<num>', 'shrink-<num>'] }],
+  [/^(?:flex-)?grow(?:-(.*))?$/, ([, d = '']) => ({ 'flex-grow': h.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ['flex-grow-<num>', 'grow-<num>'] }],
+  [/^(?:flex-)?basis-(.+)$/, ([, d], { theme }) => ({ 'flex-basis': theme.spacing?.[d] ?? h.bracket.cssvar.auto.fraction.remToRpx(d) }), { autocomplete: ['flex-basis-$spacing', 'basis-$spacing'] }],
 
   // directions
   ['flex-row', { 'flex-direction': 'row' }],

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -504,10 +504,14 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .shrink{flex-shrink:1;}
 .flex-shrink-0,
 .shrink-0{flex-shrink:0;}
+.shrink-\\\\$variable{flex-shrink:var(--variable);}
+.shrink-10{flex-shrink:10;}
 .flex-grow,
 .grow{flex-grow:1;}
 .flex-grow-0,
 .grow-0{flex-grow:0;}
+.grow-\\\\$variable{flex-grow:var(--variable);}
+.grow-10{flex-grow:10;}
 .basis-auto{flex-basis:auto;}
 .basis-none{flex-basis:0;}
 .flex-basis-\\\\$variable{flex-basis:var(--variable);}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -272,8 +272,12 @@ export const presetMiniTargets: string[] = [
   'flex-[$variable1_$variable2_$variable3]',
   'shrink',
   'shrink-0',
+  'shrink-10',
+  'shrink-$variable',
   'grow',
   'grow-0',
+  'grow-10',
+  'grow-$variable',
   'basis-auto',
   'basis-none',
   'gap-none',