feat: generate all backgrounds-related types

src/classes/all.ts

@@ -14,7 +14,7 @@ import { Transforms } from './Transforms';
 import { Transitions } from './Transitions';
 import { Typography } from './Typography';
 
-export const AllClasses: {
+export const AllClassesFlat: {
   [key: string]: string[];
 } = {
   ...Accessibility,
@@ -33,3 +33,21 @@ export const AllClasses: {
   ...Transitions,
   ...Typography,
 };
+
+export const AllClasses = {
+  Accessibility,
+  Backgrounds,
+  Borders,
+  Effects,
+  FlexBox,
+  Grid,
+  Interactivity,
+  Layout,
+  Sizing,
+  Spacing,
+  SVG,
+  Tables,
+  Transforms,
+  Transitions,
+  Typography,
+};

src/generation/ClassesGenerator.ts

@@ -1,15 +1,55 @@
 import { ConfigScanner } from './ConfigScanner';
-import { generateOpacities, PseudoclassVariantKey } from './utils/utils';
-import { AllClasses } from '../classes/all';
-import { Transforms, allTransformClasses } from '../classes/Transforms';
+import { generateOpacities, PseudoclassVariantKey, generateTypes } from './utils/utils';
+import { AllClasses, AllClassesFlat } from '../classes/all';
+import { allTransformClasses, Transforms } from '../classes/Transforms';
+import { IGenerator } from './IGenerator';
+import { Backgrounds } from '../classes/Backgrounds';
 
-export class ClassesGenerator {
+export class ClassesGenerator implements IGenerator {
   private readonly configScanner: ConfigScanner;
+  private allGeneratedClasses: Partial<typeof AllClasses> = {};
 
   constructor(tailwindConfig: TailwindConfig) {
     this.configScanner = new ConfigScanner(tailwindConfig);
   }
 
+  // TODO: add theme.extend
+  public backgrounds = (): string => {
+    const generatedBackgrounds = {
+      ...Backgrounds,
+      backgroundOpacity: this.getGeneratedClassesWithOpacities().backgroundOpacities,
+      backgroundColor: this.getGeneratedClassesWithColors('bg'),
+      backgroundPosition: Object.keys(this.configScanner.themeConfig.backgroundPosition),
+      backgroundSize: Object.keys(this.configScanner.themeConfig.backgroundSize),
+    };
+
+    this.allGeneratedClasses.Backgrounds = generatedBackgrounds;
+
+    return `
+export type TBackgroundAttachment = ${generateTypes(
+      generatedBackgrounds.backgroundAttachment,
+      this.configScanner.prefix,
+    )};
+
+export type TBackgroundColor =${generateTypes(generatedBackgrounds.backgroundColor, this.configScanner.prefix)};
+
+export type TBackgroundPosition =${generateTypes(generatedBackgrounds.backgroundPosition, this.configScanner.prefix)};
+
+export type TBackgroundRepeat =${generateTypes(generatedBackgrounds.backgroundRepeat, this.configScanner.prefix)};
+
+export type TBackgroundSize = ${generateTypes(generatedBackgrounds.backgroundSize, this.configScanner.prefix)};
+
+export type TBackgroundOpacity =${generateTypes(generatedBackgrounds.backgroundOpacity, this.configScanner.prefix)};
+
+export type TBackgrounds =
+  | TBackgroundAttachment
+  | TBackgroundColor
+  | TBackgroundPosition
+  | TBackgroundRepeat
+  | TBackgroundSize
+  | TBackgroundOpacity;`;
+  };
+
   public getGeneratedClassesWithColors = (
     classPayload: 'bg' | 'placeholder' | 'border' | 'text' | 'divide',
   ): string[] => {
@@ -113,13 +153,13 @@ export class ClassesGenerator {
 
       switch (key) {
         case 'gap':
-          classesOfCategoryKey = AllClasses.gridGap;
+          classesOfCategoryKey = AllClassesFlat.gridGap;
           break;
         case 'inset':
-          classesOfCategoryKey = AllClasses.topRightBottomLeft;
+          classesOfCategoryKey = AllClassesFlat.topRightBottomLeft;
           break;
         case 'accessibility':
-          classesOfCategoryKey = AllClasses.screenReaders;
+          classesOfCategoryKey = AllClassesFlat.screenReaders;
           break;
         case 'transform':
           classesOfCategoryKey = [];
@@ -196,7 +236,7 @@ export class ClassesGenerator {
           classesOfCategoryKey = classesWithSpacing.spaceBetweens;
           break;
         default:
-          classesOfCategoryKey = AllClasses[key];
+          classesOfCategoryKey = AllClassesFlat[key];
           break;
       }
 

src/generation/IGenerator.ts

@@ -0,0 +1,18 @@
+export interface IGenerator {
+  // accessibility: () => void;
+  backgrounds: () => void;
+  // borders: () => void;
+  // effects: () => void;
+  // flexBox: () => void;
+  // grid: () => void;
+  // interactivity: () => void;
+  // layout: () => void;
+  // sizing: () => void;
+  // spacing: () => void;
+  // SVG: () => void;
+  // tables: () => void;
+  // transforms: () => void;
+  // transitions: () => void;
+  // typography: () => void;
+  // getAll: () => any;
+}

src/generation/_definitions.d.ts

@@ -46,10 +46,10 @@ interface IThemeProps {
   spacing?: {
     [key: string]: string;
   };
-  backgroundPosition?: {
+  backgroundPosition: {
     [key: string]: string;
   };
-  backgroundSize?: {
+  backgroundSize: {
     [key: string]: string;
   };
 

src/generation/createFile.ts

@@ -62,18 +62,17 @@ export function createFileWithGeneratedTypes(options: Options): void {
       .replace(/_PREFIX_/g, prefix)
       .replace(/_SEPARATOR_/g, separator)
       .replace(/CUSTOM_FORMS_PLUGIN_TYPE/g, customFormsPluginClassesType)
+      .replace(/___BACKGROUNDS___/g, classesGenerator.backgrounds())
       .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(/BACKGROUND_COLORS/g, generateTypes(classesGenerator.getGeneratedClassesWithColors('bg'), 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(/BACKGROUND_OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().backgroundOpacities, 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))

src/generation/utils/baseTemplateString.ts

@@ -200,40 +200,7 @@ export type TTypography =
   | TWordBreak
   | TTextOpacity;
 
-export type TBackgroundAttachment = '_PREFIX_bg-fixed' | '_PREFIX_bg-local' | '_PREFIX_bg-scroll';
-
-export type TBackgroundColor =BACKGROUND_COLORS;
-
-export type TBackgroundPosition =
-  | '_PREFIX_bg-bottom'
-  | '_PREFIX_bg-center'
-  | '_PREFIX_bg-left'
-  | '_PREFIX_bg-left-bottom'
-  | '_PREFIX_bg-left-top'
-  | '_PREFIX_bg-right'
-  | '_PREFIX_bg-right-bottom'
-  | '_PREFIX_bg-right-top'
-  | '_PREFIX_bg-top';
-
-export type TBackgroundRepeat =
-  | '_PREFIX_bg-repeat'
-  | '_PREFIX_bg-no-repeat'
-  | '_PREFIX_bg-repeat-x'
-  | '_PREFIX_bg-repeat-y'
-  | '_PREFIX_bg-repeat-round'
-  | '_PREFIX_bg-repeat-space';
-
-export type TBackgroundSize = '_PREFIX_bg-auto' | '_PREFIX_bg-cover' | '_PREFIX_bg-contain';
-
-export type TBackgroundOpacity =BACKGROUND_OPACITIES;
-
-export type TBackgrounds =
-  | TBackgroundAttachment
-  | TBackgroundColor
-  | TBackgroundPosition
-  | TBackgroundRepeat
-  | TBackgroundSize
-  | TBackgroundOpacity;
+___BACKGROUNDS___
 
 export type TBorderColor =BORDER_COLORS;