feat: support gap property in flex attribute (#582) (#652)

windicss · Jan 17, 2022 · a755743 · a755743
1 parent d612389
commit a755743
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -756,6 +756,8 @@ export class Processor {
           case 'flex-inline':
             utility = 'inline-flex';
             break;
+          default:
+            if (/^flex-gap-/.test(utility)) utility = utility.slice(5);
           }
           break;
         case 'grid':

diff --git a/test/processor/__snapshots__/attributify.test.ts.yml b/test/processor/__snapshots__/attributify.test.ts.yml
@@ -1242,6 +1242,22 @@ Tools / with flex utility / css / 0: |-
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
   }
+  [flex~="gap-2"] {
+    grid-gap: 0.5rem;
+    gap: 0.5rem;
+  }
+  [flex~="gap-x-4"] {
+    -webkit-column-gap: 1rem;
+    -moz-column-gap: 1rem;
+    grid-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+  [flex~="gap-y-2"] {
+    -webkit-row-gap: 0.5rem;
+    -moz-row-gap: 0.5rem;
+    grid-row-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
 Tools / with font utility / css / 0: |-
   [font~="sans"] {
     font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

diff --git a/test/processor/attributify.test.ts b/test/processor/attributify.test.ts
@@ -268,6 +268,7 @@ describe('Attributify Mode', () => {
         '1', 'auto', 'initial', 'none', // flex
         'grow', 'grow-0', // flex-grow
         'shrink', 'shrink-0', // flex-shrink
+        'gap-2', 'gap-x-4', 'gap-y-2', // gap/column-gap/row-gap
       ],
     });
     expect(result.ignored.length).toEqual(0);