feat: add scroll-margin and scroll-padding utilities

muhammadsammy · Dec 17, 2021 · e3503e9 · e3503e9
1 parent e7d5070
commit e3503e9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts
@@ -210,12 +210,20 @@ export class ClassnamesGenerator {
   };
 
   private interactivity = (): Interactivity => {
+    const sides = ['', 'y', 'x', 't', 'r', 'b', 'l'];
+
     return {
       ...nonConfigurableClassNames.interactivity,
       cursor: Object.keys(this._theme.cursor).map(x => 'cursor-' + x),
       caretColor: this.generateClassesWithColors('caretColor'),
       willChange: Object.keys(this._theme.willChange).map(x => 'will-change-' + x),
       accentColor: this.generateClassesWithColors('accentColor'),
+      scrollPadding: sides.flatMap(side => {
+        return Object.keys(this._theme.scrollPadding).map(value => `scroll-p${side}-${value}`);
+      }),
+      scrollMargin: sides.flatMap(side => {
+        return Object.keys(this._theme.scrollMargin).map(value => `scroll-m${side}-${value}`);
+      }),
     };
   };
 

diff --git a/src/cli/types/classes.ts b/src/cli/types/classes.ts
@@ -140,7 +140,9 @@ type TInteractivityCategoryItem =
   | 'caretColor'
   | 'willChange'
   | 'accentColor'
-  | 'scrollSnap';
+  | 'scrollSnap'
+  | 'scrollMargin'
+  | 'scrollPadding';
 
 type TLayoutCategoryItem =
   | 'display'