fix(preset-mini): grow & shrink supports brackets (#1284)

unocss · Jul 17, 2022 · 0abe9a8 · 0abe9a8
1 parent 99748cb
commit 0abe9a8
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/packages/preset-mini/src/rules/flex.ts b/packages/preset-mini/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.rem(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.rem(d) }), { autocomplete: ['flex-basis-$spacing', 'basis-$spacing'] }],
 
   // directions
   ['flex-row', { 'flex-direction': 'row' }],

diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap
@@ -43,6 +43,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "grid-row-end-": "grid-row-end-0 grid-row-end-1 grid-row-end-2 grid-row-end-3 grid-row-end-4 grid-row-end-5 grid-row-end-6 grid-row-end-8 grid-row-end-10 grid-row-end-12",
   "grid-row-start-": "grid-row-start-0 grid-row-start-1 grid-row-start-2 grid-row-start-3 grid-row-start-4 grid-row-start-5 grid-row-start-6 grid-row-start-8 grid-row-start-10 grid-row-start-12",
   "grid-rows-": "grid-rows-0 grid-rows-1 grid-rows-2 grid-rows-3 grid-rows-4 grid-rows-5 grid-rows-6 grid-rows-8 grid-rows-10 grid-rows-12",
+  "grow-": "grow-0 grow-1 grow-2 grow-3 grow-4 grow-5 grow-6 grow-8 grow-10 grow-12",
   "keyframes-": "keyframes-back-in-down keyframes-back-in-left keyframes-back-in-right keyframes-back-in-up keyframes-back-out-down keyframes-back-out-left keyframes-back-out-right keyframes-back-out-up keyframes-bounce keyframes-bounce-alt",
   "leading-": "leading-loose leading-none leading-normal leading-relaxed leading-snug leading-tight",
   "line-clamp-": "line-clamp-0 line-clamp-1 line-clamp-2 line-clamp-3 line-clamp-4 line-clamp-5 line-clamp-6 line-clamp-8 line-clamp-10 line-clamp-12",

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:0rem;}

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',

diff --git a/test/autocomplete.test.ts b/test/autocomplete.test.ts
@@ -71,6 +71,7 @@ describe('autocomplete', () => {
         'fle',
         'font-',
         'font-',
+        'grow-',
         'keyframes-',
         'leading-',
         'line-clamp-',