cssclasscrafter
Version:
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
41 lines (38 loc) • 2.56 kB
JavaScript
import { paddingDirections } from "../helper/directionPrefixes.mjs";
import { isValidCSSLength } from "../helper/isValidCSSLength.mjs";
import { warnConsolelog } from "../LodingAnimation.mjs";
export function generatePaddingClasses(paddings, paddingPrefixName = null) {
let css = "";
const defaultUnit = "px";
const paddingPrefix = paddingPrefixName ? `${paddingPrefixName}-` : "";
for (const [key, value] of Object.entries(paddings)) {
if (isValidCSSLength(value)) {
if (typeof value === "string") {
css += `.${paddingPrefix}${paddingDirections.all}-${key} { padding: ${value}; }\n`;
css += `.${paddingPrefix}${paddingDirections.top}-${key} { padding-top: ${value}; }\n`;
css += `.${paddingPrefix}${paddingDirections.bottom}-${key} { padding-bottom: ${value}; }\n`;
css += `.${paddingPrefix}${paddingDirections.left}-${key} { padding-left: ${value}; }\n`;
css += `.${paddingPrefix}${paddingDirections.right}-${key} { padding-right: ${value}; }\n`;
css += `.${paddingPrefix}${paddingDirections.vertical}-${key} { padding-top: ${value}; padding-bottom: ${value}; }\n`;
css += `.${paddingPrefix}${paddingDirections.horizontal}-${key} { padding-left: ${value}; padding-right: ${value}; }\n`;
} else if (typeof value === "number") {
css += `.${paddingPrefix}${paddingDirections.all}-${key} { padding: ${value}${defaultUnit}; }\n`;
css += `.${paddingPrefix}${paddingDirections.top}-${key} { padding-top: ${value}${defaultUnit}; }\n`;
css += `.${paddingPrefix}${paddingDirections.bottom}-${key} { padding-bottom: ${value}${defaultUnit}; }\n`;
css += `.${paddingPrefix}${paddingDirections.left}-${key} { padding-left: ${value}${defaultUnit}; }\n`;
css += `.${paddingPrefix}${paddingDirections.right}-${key} { padding-right: ${value}${defaultUnit}; }\n`;
css += `.${paddingPrefix}${paddingDirections.vertical}-${key} { padding-top: ${value}${defaultUnit}; padding-bottom: ${value}${defaultUnit}; }\n`;
css += `.${paddingPrefix}${paddingDirections.horizontal}-${key} { padding-left: ${value}${defaultUnit}; padding-right: ${value}${defaultUnit}; }\n`;
} else {
warnConsolelog(
`Invalid padding entry for ${key}: ${JSON.stringify(value)}. Expected a string or number.`
);
}
} else {
warnConsolelog(
`Invalid padding entry value for ${key}: ${JSON.stringify(value)}. Use valid name like px, rem, em, etc.`
);
}
}
return css;
}