feat: generate divide width types from theme

muhammadsammy · Jun 22, 2020 · 9f7df54 · 9f7df54
1 parent 0d56d53
commit 9f7df54
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/generation/ClassesGenerator.ts b/src/generation/ClassesGenerator.ts
@@ -6,6 +6,7 @@ import { IClassesGenerator } from './IGenerator';
 import { Backgrounds as defaultBackgrounds } from '../classes/Backgrounds';
 import { ClassesGroupTemplateGenerator } from './ClassesGroupTemplateGenerator';
 import { Borders as defaultBorders } from '../classes/Borders';
+import isEmpty from 'lodash.isempty';
 
 export class ClassesGenerator implements IClassesGenerator {
   private readonly configScanner: ConfigScanner;
@@ -16,6 +17,7 @@ export class ClassesGenerator implements IClassesGenerator {
   }
 
   // TODO: add theme.extend
+
   public backgrounds = (): string => {
     const Backgrounds = {
       ...defaultBackgrounds,
@@ -47,6 +49,16 @@ export class ClassesGenerator implements IClassesGenerator {
       }),
       divideColor: this.getGeneratedClassesWithColors('divide'),
       divideOpacity: this.getGeneratedClassesWithOpacities().divideOpacities,
+      // NOTE: divide width inherits its values from theme.borderWidth by default, but theme.divideWidth overrides it.
+      divideWidth: Object.keys(
+        isEmpty(this.configScanner.themeConfig.divideWidth)
+          ? this.configScanner.themeConfig.borderWidth
+          : (this.configScanner.themeConfig.divideWidth as { [key: string]: string }),
+      )
+        .concat('reverse')
+        .flatMap(width => {
+          return ['x', 'y'].map(axis => `divide-${axis}` + (width === 'default' ? '' : `-${width}`));
+        }),
     };
 
     this.allGeneratedClasses.Borders = Borders;

diff --git a/src/generation/_definitions.d.ts b/src/generation/_definitions.d.ts
@@ -68,6 +68,9 @@ interface IThemeProps {
   cursor?: {
     [key: string]: string;
   };
+  divideWidth?: {
+    [key: string]: string;
+  };
   fill?: {
     [key: string]: string;
   };

diff --git a/src/generation/createFile.ts b/src/generation/createFile.ts
@@ -63,20 +63,16 @@ export function createFileWithGeneratedTypes(options: Options): void {
       .replace(/_SEPARATOR_/g, separator)
       .replace(/CUSTOM_FORMS_PLUGIN_TYPE/g, customFormsPluginClassesType)
       .replace(/___BACKGROUNDS___/g, classesGenerator.backgrounds())
-        .replace(/___BORDERS___/g, classesGenerator.borders)
+      .replace(/___BORDERS___/g, classesGenerator.borders())
       .replace(/MAX_WIDTH_BY_BREAKPOINTS/g, generateTypes(classesGenerator.getGeneratedMaxWidthClasses()))
       .replace(/PADDINGS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().paddings, prefix))
       .replace(/MARGINS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().margins, prefix))
       .replace(/WIDTH_SPACINGS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().widths, prefix))
       .replace(/HEIGHT_SPACINGS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().heights, prefix))
       .replace(/SPACE_BETWEEN/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().spaceBetweens, prefix))
       .replace(/PLACEHOLDER_COLORS/g, generateTypes(classesGenerator.getGeneratedClassesWithColors('placeholder'), prefix))
-      // .replace(/BORDER_COLORS/g, generateTypes(classesGenerator.getGeneratedClassesWithColors('border'), prefix))
       .replace(/TEXT_COLORS/g, generateTypes(classesGenerator.getGeneratedClassesWithColors('text'), prefix))
-      // .replace(/DIVIDE_COLORS/g, generateTypes(classesGenerator.getGeneratedClassesWithColors('divide'), prefix))
       .replace(/TEXT_OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().textOpacities, prefix))
-      // .replace(/BORDER_OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().borderOpacities, prefix))
-      // .replace(/DIVIDE_OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().divideOpacities, prefix))
       .replace(/PLACERHOLDER_OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().placeholderOpacities, prefix))
       .replace(/OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().opacities, prefix))
       .replace(/BREAKPOINT_EXPORT_STATEMENTS/g, breakpointsExportStatements.join('\n\n'))