cssclasscrafter/scripts/modules/borderGeneration.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 generateBorderClasses(config, borderPrefixName = null) {
  let css = "";
  const defaultUnit = "px";

  if (config.borderGeneration) {
    const borderSizes = config.sizes.border || {};
    const borderRadiusSizes = config.sizes.borderRadius || {};
    const colors = config.colors || [];
    const borderStyles = config.borderStyles || ["solid", "dashed", "dotted"];
    const borderPrefix = borderPrefixName ? `${borderPrefixName}-` : "";

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

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

    // Generate border color classes
    colors.forEach((color) => {
      const colorName = Object.keys(color)[0];
      const colorValue = color[colorName];

      // Check for gradients
      if (colorValue.startsWith("linear-gradient")) {
        css += `.${borderPrefix}border-${colorName} { border: 1px solid transparent; background: ${colorValue}; -webkit-mask-image: linear-gradient(${colorValue}); mask-image: linear-gradient(${colorValue}); }\n`;
      } else {
        css += `.${borderPrefix}border-${colorName} { border-color: ${colorValue}; }\n`;
      }
    });
    // Generate border style classes
    borderStyles.forEach((style) => {
      css += `.${borderPrefix}border-${style} { border-style: ${style}; }\n`;
    });
  }

  return css;
}