cssclasscrafter/scripts/generateUtility.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 prettier from "prettier";
import CleanCSS from "clean-css";
import path from "path";
import fs from "fs";

import { defaultConfig } from "../default.config.mjs";
import {
  startLoading,
  stopLoading,
  successConsoleLog,
} from "./LodingAnimation.mjs";
import { generateFlexboxCSS } from "./modules/flexboxGeneration.mjs";
import { generateBackgroundColorClasses } from "./modules/backGroundColorGeneration.mjs";
import { generateColorClasses } from "./modules/colorGeneration.mjs";
import { generateHeightWidthClasses } from "./modules/height-widthGeneration.mjs";
import { generateMarginClasses } from "./modules/marginGeneration.mjs";
import { generatePaddingClasses } from "./modules/paddingGeneration.mjs";
import { generatePositionClasses } from "./modules/positionStyleGeneration.mjs";
import { generateBorderClasses } from "./modules/borderGeneration.mjs";
import { generateResponsiveStyleCSS } from "./modules/responsiveStyleGeneration.mjs";

function formatCSS(css) {
  return prettier.format(css, { parser: "css" });
}

function minifyCSS(css) {
  return new CleanCSS().minify(css).styles;
}

export async function generateUtilityClasses(config = {}) {
  const finalConfig = { ...defaultConfig, ...config };
  let css = "";

  // Generate Padding Css Classes
  if (finalConfig.MarginGeneration) {
    css += await generatePaddingClasses(finalConfig.sizes.padding);
    successConsoleLog("Padding CSS generation");
  }

  // Generate Margin Css Classes
  if (finalConfig.MarginGeneration) {
    css += await generateMarginClasses(finalConfig.sizes.margin);
    successConsoleLog("Margin CSS generation");
  }

  // Generate Height Width Css Classes
  if (finalConfig.heightWidthGeneration) {
    css += await generateHeightWidthClasses(
      finalConfig.widthPrefixName,
      finalConfig.heightPrefixName,
      finalConfig.sizes
    );
    successConsoleLog("Height-Width CSS generation");
  }

  // Generate Position Css Classes
  if (finalConfig.positionStyleGeneration) {
    css += await generatePositionClasses(finalConfig.sizes.position);
    successConsoleLog("Position CSS generation");
  }

  // Generate border Css Classes
  if (finalConfig.borderGeneration) {
    css += await generateBorderClasses(finalConfig);
    successConsoleLog("Border CSS generation");
  }

  // Generate Background Color Css Classes
  if (finalConfig.BackgroundGeneration) {
    css += await generateBackgroundColorClasses(
      finalConfig.backgroundColorPrefix,
      finalConfig.colors
    );
    successConsoleLog("Background-Colors CSS generation");
  }

  // Generate Color Css Classes
  if (finalConfig.ColorGeneration) {
    css += await generateColorClasses(
      finalConfig.colorPrefixName,
      finalConfig.colors
    );
    successConsoleLog("Colors CSS generation");
  }

  // Generate Flexbox css classes
  if (finalConfig.FlexboxGeneration) {
    css += await generateFlexboxCSS();
    successConsoleLog("Flexbox CSS generation");
  }

  // Generate Responsive css Classes
  if (finalConfig.breakpointsGeneration) {
    css += await generateResponsiveStyleCSS(finalConfig);
    successConsoleLog("Responsive CSS generation");
  }

  const formattingSpinner = startLoading("Formatting and minifying CSS...\n");
  if (css) {
    const minifiedCSS = minifyCSS(css); // Minify the generated CSS
    const formattedCSS = await formatCSS(minifiedCSS); // Format the minified CSS
    stopLoading(
      formattingSpinner,
      "success",
      "CSS Formatting and minifying complete."
    );

    const savingSpinner = startLoading("Saving CSS file...");
    const outputDir = path.join(process.cwd(), finalConfig.styleDirname);
    const outputPath = path.join(outputDir, finalConfig.styleFilename);

    if (!fs.existsSync(path.dirname(outputPath))) {
      fs.mkdirSync(path.dirname(outputPath), { recursive: true });
    }

    fs.writeFileSync(outputPath, formattedCSS, "utf8");
    stopLoading(
      savingSpinner,
      "success",
      `CSS file generated at ${outputPath}`
    );
  } else {
    stopLoading(formattingSpinner, "fail", "No CSS generated.");
    console.log("No CSS generated. Please check your configuration.");
  }
}