feat: add css gap, row-gap, column-gap support (#235)

* feat: add css gap, rowGap, columnGap support * Update utilityClass.test.js
palmetto · Dec 28, 2023 · 6b52d2e · 6b52d2e
1 parent eaef434
commit 6b52d2e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/formats/utilityClass/utilitiesConfig.js b/formats/utilityClass/utilitiesConfig.js
@@ -72,6 +72,39 @@ const utilities = [
     hover: false,
     focus: false,
   },
+  {
+    name: 'gap',
+    abbreviation: 'g',
+    tokenCategory: 'size',
+    tokenType: 'spacing',
+    cssProp: 'gap',
+    variations: [''],
+    responsive: true,
+    hover: false,
+    focus: false,
+  },
+  {
+    name: 'row-gap',
+    abbreviation: 'rg',
+    tokenCategory: 'size',
+    tokenType: 'spacing',
+    cssProp: 'row-gap',
+    variations: [''],
+    responsive: true,
+    hover: false,
+    focus: false,
+  },
+  {
+    name: 'column-gap',
+    abbreviation: 'cg',
+    tokenCategory: 'size',
+    tokenType: 'spacing',
+    cssProp: 'column-gap',
+    variations: [''],
+    responsive: true,
+    hover: false,
+    focus: false,
+  },
   {
     name: 'width',
     abbreviation: 'w',

diff --git a/formats/utilityClass/utilityClass.test.js b/formats/utilityClass/utilityClass.test.js
@@ -101,6 +101,12 @@ const expectedOutput = `/**
 
 .p-v-5xl { padding-top: var(--size-spacing-5xl); padding-bottom: var(--size-spacing-5xl); }
 
+.g-5xl { gap: var(--size-spacing-5xl); }
+
+.rg-5xl { row-gap: var(--size-spacing-5xl); }
+
+.cg-5xl { column-gap: var(--size-spacing-5xl); }
+
 .border-width-xs { border-width: var(--size-border-xs); border-style: solid; }
 
 .border-width-top-xs { border-top-width: var(--size-border-xs); border-top-style: solid; }
@@ -182,6 +188,12 @@ const expectedOutput = `/**
 
   .p-v-5xl-hd { padding-top: var(--size-spacing-5xl); padding-bottom: var(--size-spacing-5xl); }
 
+  .g-5xl-hd { gap: var(--size-spacing-5xl); }
+
+  .rg-5xl-hd { row-gap: var(--size-spacing-5xl); }
+
+  .cg-5xl-hd { column-gap: var(--size-spacing-5xl); }
+
   .border-width-xs-hd { border-width: var(--size-border-xs); border-style: solid; }
 
   .border-width-top-xs-hd { border-top-width: var(--size-border-xs); border-top-style: solid; }