cssclasscrafter/scripts/modules/responsiveStyleGeneration.mjs

CSSClassCrafter is an npm library that enables developers to dynamically generate CSS classes based on user-defined configuration files. With a simple JSON format for specifying styles, it streamlines the styling process, allowing for easy customization a

import { generateBackgroundColorClasses } from "./backGroundColorGeneration.mjs";
import { generateBorderClasses } from "./borderGeneration.mjs";
import { generateColorClasses } from "./colorGeneration.mjs";
import { generateFlexboxCSS } from "./flexboxGeneration.mjs";
import { generateHeightWidthClasses } from "./height-widthGeneration.mjs";
import { generateMarginClasses } from "./marginGeneration.mjs";
import { generatePaddingClasses } from "./paddingGeneration.mjs";
import { generatePositionClasses } from "./positionStyleGeneration.mjs";

// Function to generate the CSS based on the breakpoints and configuration
export async function generateResponsiveStyleCSS(finalConfig) {
  let css = "";

  for (const size in finalConfig.breakpoints) {
    const widthPrefixName = `${size}-${finalConfig.widthPrefixName}`;
    const heightPrefixName = `${size}-${finalConfig.heightPrefixName}`;
    const bgPrefixName = `${size}-${finalConfig.backgroundColorPrefix}`;
    const textPrefixName = `${size}-${finalConfig.colorPrefixName}`;
    const defaultPrefixName = `${size}`;

    css += `@media (min-width: ${finalConfig.breakpoints[size]}) {\n`;

    css += await generateHeightWidthClasses(
      widthPrefixName,
      heightPrefixName,
      finalConfig.sizes
    );
    css += await generateBackgroundColorClasses(
      bgPrefixName,
      finalConfig.colors
    );
    css += await generateColorClasses(textPrefixName, finalConfig.colors);
    css += await generateBorderClasses(finalConfig, defaultPrefixName);
    css += await generateFlexboxCSS(defaultPrefixName);
    css += await generatePositionClasses(
      finalConfig.sizes.position,
      defaultPrefixName
    );
    css += await generateMarginClasses(
      finalConfig.sizes.margin,
      defaultPrefixName
    );
    css += await generatePaddingClasses(
      finalConfig.sizes.padding,
      defaultPrefixName
    );

    css += `}\n`;
  }

  return css;
}