feat: add compatibility with TailwindCSS v1.7 (#32)

* feat(cli): add the new grid gap types with/without deprecated

based on the config's `future.removeDeprecatedGapUtilities` property
for more info see https://github.com/tailwindlabs/tailwindcss/releases/tag/v1.7.0#deprecations

* feat: add animation support introduced in tailwindcss v1.6

* feat: add overscroll-behavior classes types

* feat: add background image, gradient, clip

* feat: add divide style and display contents

* feat: update main package with types from the cli

src/generation/ClassesGenerator.ts

@@ -10,23 +10,26 @@ export class ClassesGenerator implements IGenerator {
   private readonly separator: string;
   private readonly theme: IThemeConfig;
   private readonly configScanner: ConfigScanner;
+  private readonly deprecations: TFuture;
   private generatedRegularClasses: typeof defaultClasses;
   private generatedPseudoClasses: string[];
 
   constructor(tailwindConfig: TailwindConfig) {
     const configScanner = new ConfigScanner(tailwindConfig);
+
     this.prefix = configScanner.getPrefix();
     this.separator = configScanner.getSeparator();
     this.theme = configScanner.getTheme();
     this.configScanner = configScanner;
+    this.deprecations = configScanner.getDeprecations();
 
     this.generatedRegularClasses = {
       Accessibility: this.accessibility(),
       Backgrounds: this.backgrounds(),
       Borders: this.borders(),
       Tables: this.tables(),
       Effects: this.effects(),
-      Transitions: this.transitions(),
+      TransitionsAndAnimations: this.transitionsAndAnimations(),
       FlexBox: this.flexBox(),
       Grid: this.grid(),
       Spacing: this.spacing(),
@@ -41,10 +44,6 @@ export class ClassesGenerator implements IGenerator {
     this.generatedPseudoClasses = this.pseudoClasses();
   }
 
-  // TODO: check if values are nested objects e.g., colors
-  // this checking is only implemented on colors property
-  // but better to be done on all other properties
-
   public generate = (): string => {
     const allClassesTemplates = Object.keys(this.generatedRegularClasses)
       .map(classGroup => {
@@ -88,6 +87,10 @@ export class ClassesGenerator implements IGenerator {
       backgroundColor: this.generateClassesWithColors('backgroundColor'),
       backgroundPosition: Object.keys(this.theme.backgroundPosition).map(x => 'bg-' + x),
       backgroundSize: Object.keys(this.theme.backgroundSize).map(x => 'bg-' + x),
+      backgroundImage: Object.keys(this.theme.backgroundImage).map(x => 'bg-' + x),
+      gradientColorStops: this.generateClassesWithColors('gradientColorStops').flatMap(val =>
+        ['from', 'via', 'to'].map(x => x + val.replace('gradient', '')),
+      ),
     };
   };
 
@@ -140,9 +143,9 @@ export class ClassesGenerator implements IGenerator {
     };
   };
 
-  private transitions = (): typeof defaultClasses.Transitions => {
+  private transitionsAndAnimations = (): typeof defaultClasses.TransitionsAndAnimations => {
     return {
-      ...defaultClasses.Transitions,
+      ...defaultClasses.TransitionsAndAnimations,
       transitionProperty: Object.keys(this.theme.transitionProperty).map(
         property => 'transition-' + property,
       ),
@@ -153,6 +156,7 @@ export class ClassesGenerator implements IGenerator {
         value => 'ease-' + value,
       ),
       transitionDelay: Object.keys(this.theme.transitionDelay).map(value => 'delay-' + value),
+      animation: Object.keys(this.theme.animation).map(val => 'animate-' + val),
     };
   };
 
@@ -229,12 +233,14 @@ export class ClassesGenerator implements IGenerator {
       gridRow: Object.keys(this.theme.gridRow).map(value => `row-${value}`),
       gridRowStart: Object.keys(this.theme.gridRowStart).map(value => `row-start-${value}`),
       gridRowEnd: Object.keys(this.theme.gridRowEnd).map(value => `row-end-${value}`),
-      gridGap: ['gap-', 'row-gap-', 'col-gap-'].flatMap(x => {
-        // grid gap inherits its values from theme.spacing by default, but theme.gap overrides it.
-        return Object.keys(_.isEmpty(this.theme.gap) ? this.theme.spacing : this.theme.gap).map(
-          gapValue => x + gapValue,
-        );
-      }),
+      gridGap: ['gap-', 'gap-y-', 'gap-x-']
+        .concat(this.deprecations.removeDeprecatedGapUtilities ? [] : ['row-gap-', 'col-gap-'])
+        .flatMap(x => {
+          // grid gap inherits its values from theme.spacing by default, but theme.gap overrides it.
+          return Object.keys(_.isEmpty(this.theme.gap) ? this.theme.spacing : this.theme.gap).map(
+            gapValue => x + gapValue,
+          );
+        }),
     };
   };
 
@@ -349,7 +355,10 @@ export class ClassesGenerator implements IGenerator {
     return propertyNames.flatMap((propertyValue, i) => {
       const variant = propertyVariants[i];
 
-      const propertyResult = property.replace('Color', '').replace('background', 'bg');
+      const propertyResult = property
+        .replace('Color', '')
+        .replace('Stops', '')
+        .replace('background', 'bg');
 
       if (typeof variant === 'object' && variant !== null) {
         return Object.keys(variant).map(

src/generation/ConfigScanner.ts

@@ -2,12 +2,14 @@ import {defaultThemeConfig, defaultVariants} from './utils/defaultTailwindConfig
 import _ from 'lodash';
 
 export class ConfigScanner {
+  private future: TFuture;
   private readonly prefix: string;
   private readonly separator: string;
   private themeConfig: IThemeConfig;
   private readonly variantsConfig: IVariantsConfig;
 
   constructor(tailwindConfig: TailwindConfig) {
+    this.future = tailwindConfig?.future ?? {};
     this.prefix = _.isEmpty(tailwindConfig?.prefix) ? '' : (tailwindConfig.prefix as string);
     this.separator = _.isEmpty(tailwindConfig.separator)
       ? ':'
@@ -25,39 +27,43 @@ export class ConfigScanner {
 
   public getSeparator = (): string => this.separator;
 
+  public getDeprecations = (): TFuture => this.future;
+
   public getTheme = (): IThemeConfig => {
     for (const [key, value] of Object.entries(this.themeConfig)) {
       if (_.isFunction(value)) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         this.themeConfig[key as keyof IThemeConfig] = value(
-          (path: string): Record<string, unknown> => {
-            return _.get(this.themeConfig, _.trim(path, `'"`)) as Record<
+          (path: string): Record<string, unknown> =>
+            _.get(this.themeConfig, _.trim(path, `'"`)) as Record<
               string,
               Record<string, string> | string
-            >;
-          },
+            >,
           {
-            negative(item: {[key: string]: string}) {
-              const itemCopy = {...item};
-              for (const [key] of Object.entries(itemCopy)) {
-                itemCopy['-' + key] = itemCopy[key];
-                delete itemCopy[key];
-              }
-              return itemCopy;
-            },
-            breakpoints(item: {[key: string]: string}) {
-              const itemCopy = {...item};
-              for (const [key] of Object.entries(itemCopy)) {
-                itemCopy['screen-' + key] = itemCopy[key];
-                delete itemCopy[key];
-              }
-              return itemCopy;
-            },
+            negative,
+            breakpoints,
           },
         );
       }
     }
 
+    function negative(item: Record<string, string>): Record<string, string> {
+      const itemCopy = {...item};
+      for (const [key] of Object.entries(itemCopy)) {
+        itemCopy['-' + key] = itemCopy[key];
+        delete itemCopy[key];
+      }
+      return itemCopy;
+    }
+    function breakpoints(item: Record<string, string>): Record<string, string> {
+      const itemCopy = {...item};
+      for (const [key] of Object.entries(itemCopy)) {
+        itemCopy['screen-' + key] = itemCopy[key];
+        delete itemCopy[key];
+      }
+      return itemCopy;
+    }
+
     return this.themeConfig;
   };