cssclasscrafter/scripts/modules/height-widthGeneration.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 { isValidCSSLength } from "../helper/isValidCSSLength.mjs";
import { warnConsolelog } from "../LodingAnimation.mjs";

export function generateHeightWidthClasses(
  widthPrefixName,
  heightPrefixName,
  sizes
) {
  let css = "";
  const defaultUnit = "px";

  for (const [key, value] of Object.entries(sizes.width)) {
    if (isValidCSSLength(value)) {
      if (typeof value === "string") {
        css += `.${widthPrefixName}-${key} { width: ${value}; }\n`;
      } else if (typeof value === "number") {
        css += `.${widthPrefixName}-${key} { width: ${value}${defaultUnit}; }\n`;
      } else {
        warnConsolelog(
          `Invalid width entry for ${key}: ${JSON.stringify(value)}. Expected a string or number.`
        );
      }
    } else {
      warnConsolelog(
        `Invalid width entry for ${key}: ${JSON.stringify(value)}. Use valid name like px, rem, em, etc.`
      );
    }
  }

  for (const [key, value] of Object.entries(sizes.height)) {
    if (isValidCSSLength(value)) {
      if (typeof value === "string") {
        css += `.${heightPrefixName}-${key} { height: ${value}; }\n`;
      } else if (typeof value === "number") {
        css += `.${heightPrefixName}-${key} { height: ${value}${defaultUnit}; }\n`;
      } else {
        warnConsolelog(
          `Invalid height entry for ${key}: ${JSON.stringify(value)}. Expected a string or number.`
        );
      }
    } else {
      warnConsolelog(
        `Invalid height entry for ${key}: ${JSON.stringify(value)}. Use valid name like px, rem, em, etc.`
      );
    }
  }

  return css;
}