feat: add per-side border color utilities for JIT mode enabled configs

muhammadsammy · Jun 20, 2021 · 6ec97b9 · 6ec97b9
1 parent 75902d9
commit 6ec97b9
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts
@@ -513,12 +513,26 @@ export class ClassnamesGenerator {
         // If the value is a nested object of color shades...
         if (typeof colorValue === 'object' && colorValue !== null) {
           // Loop over the deep objects and return the result for each key of the object.
-          return Object.keys(colorValue).map(shade => `${utilName}-${colorName}-${shade}`);
+          return Object.keys(colorValue).flatMap(shade => {
+            if (utilName === 'border' && this.isJitModeEnabled()) {
+              return ['', 't', 'r', 'b', 'l'].map(
+                side => `${utilName}-${side}-${colorName}-${shade}`,
+              );
+            } else {
+              return `${utilName}-${colorName}-${shade}`;
+            }
+          });
         }
         // Otherwise...
         else {
           // Return the result of merging the utility name with color value
-          return `${utilName}-${colorName}`;
+          if (utilName === 'border' && this.isJitModeEnabled()) {
+            return ['', 't', 'r', 'b', 'l'].map(
+              side => `${utilName}-${side.length > 0 ? side + '-' : ''}${colorName}`,
+            );
+          } else {
+            return `${utilName}-${colorName}`;
+          }
         }
       });