@teamsparta/stack-flex
Version:
stack flex
34 lines (32 loc) • 1.23 kB
JavaScript
// src/v2/utils.ts
import { css } from "@emotion/react";
import { coerceCssPixelValue } from "@teamsparta/stack-utils";
var createResponsiveCssFunction = (cssProperty, transformer) => {
return (values) => {
if (!values || values.length === 0)
return [];
return values.map(({ breakpoint, value }) => {
if (value === void 0)
return css();
const transformedValue = transformer ? transformer(value) : value;
if (transformedValue === void 0)
return css();
return css({
[`@media screen and (min-width: ${breakpoint}px)`]: {
[cssProperty]: transformedValue
}
});
});
};
};
var booleanToCssValue = (value, trueValue, falseValue) => value ? trueValue : falseValue;
var pixelValueTransformer = (value) => typeof value === "string" || typeof value === "number" ? coerceCssPixelValue(value) : void 0;
var stringValueTransformer = (value) => value;
var booleanToPixelTransformer = (trueValue, falseValue) => (value) => typeof value === "boolean" ? booleanToCssValue(value, trueValue, falseValue) : void 0;
export {
createResponsiveCssFunction,
booleanToCssValue,
pixelValueTransformer,
stringValueTransformer,
booleanToPixelTransformer
};