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