feat: generate grid gap types

muhammadsammy · Jun 24, 2020 · cb70a1a · cb70a1a
1 parent 9a173a7
commit cb70a1a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/generation/ClassesGenerator.ts b/src/generation/ClassesGenerator.ts
@@ -113,6 +113,14 @@ export class ClassesGenerator implements IClassesGenerator {
       gridRow: Object.keys(this.configScanner.themeConfig.gridRow).map(value => `row-${value}`),
       gridRowStart: Object.keys(this.configScanner.themeConfig.gridRowStart).map(value => `row-start-${value}`),
       gridRowEnd: Object.keys(this.configScanner.themeConfig.gridRowEnd).map(value => `row-end-${value}`),
+      gridGap: ['gap-', 'row-gap-', 'col-gap-'].flatMap(x => {
+        return Object.keys(
+          // NOTE: grid gap inherits its values from theme.spacing by default, but theme.gap overrides it.
+          isEmpty(this.configScanner.themeConfig.gap)
+            ? this.configScanner.themeConfig.spacing
+            : (this.configScanner.themeConfig.gap as { [key: string]: string }),
+        ).map(gapValue => x + gapValue);
+      }),
     };
 
     this.allGeneratedClasses.Grid = Grid;

diff --git a/src/generation/_definitions.d.ts b/src/generation/_definitions.d.ts
@@ -43,7 +43,7 @@ interface IThemeProps {
   colors?: {
     [key: string]: string | { [key: string]: string };
   };
-  spacing?: {
+  spacing: {
     [key: string]: string;
   };
   backgroundPosition: {