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
42 lines (38 loc) • 1.72 kB
JavaScript
import { isValidCSSLength } from "../helper/isValidCSSLength.mjs";
import { warnConsolelog } from "../LodingAnimation.mjs";
export function generatePositionClasses(
positionSizes,
positionPrefixName = null
) {
let css = "";
const defaultUnit = "px";
const positionTypes = ["relative", "absolute", "fixed", "static"];
const positionPrefix = positionPrefixName ? `${positionPrefixName}-` : "";
positionTypes.forEach((posType) => {
css += `.${positionPrefix}${posType} { position: ${posType}; }\n`;
});
for (const [key, value] of Object.entries(positionSizes)) {
if (isValidCSSLength(value)) {
if (typeof value === "string") {
css += `.${positionPrefix}top-${key} { top: ${value}; }\n`;
css += `.${positionPrefix}bottom-${key} { bottom: ${value}; }\n`;
css += `.${positionPrefix}left-${key} { left: ${value}; }\n`;
css += `.${positionPrefix}right-${key} { right: ${value}; }\n`;
} else if (typeof value === "number") {
css += `.${positionPrefix}top-${key} { top: ${value}${defaultUnit}; }\n`;
css += `.${positionPrefix}bottom-${key} { bottom: ${value}${defaultUnit}; }\n`;
css += `.${positionPrefix}left-${key} { left: ${value}${defaultUnit}; }\n`;
css += `.${positionPrefix}right-${key} { right: ${value}${defaultUnit}; }\n`;
} else {
warnConsolelog(
`Invalid position entry for ${key}: ${JSON.stringify(value)}. Expected a string or number.`
);
}
} else {
warnConsolelog(
`Invalid position entry value for ${key}: ${JSON.stringify(value)}. Use valid name like px, rem, em, etc.`
);
}
}
return css;
}