@beamwind/preset-play
Version:
rapid prototyping for beamwind using auto-conversion of values
154 lines (148 loc) • 4.44 kB
JavaScript
var __defProp = Object.defineProperty;
var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
var __export = (target, all) => {
__markAsModule(target);
for (var name in all)
__defProp(target, name, {get: all[name], enumerable: true});
};
// src/index.ts
__export(exports, {
default: () => src_default
});
// src/is.ts
var numberLike = (value) => /^[-+]?(?:\d*\.)?\d+$/.test(value);
// src/play.ts
var join = (parts, separator = "-") => parts.join(separator);
var isColor = (color) => {
if (typeof Option === "function") {
const s = new Option().style;
s.color = color;
return s.color !== "";
}
return /^#[\da-f]{3,8}$/i.test(color);
};
var asSize = (value) => /[-+]?(?:\d*\.)?\d+(?:ch|r?em|ex|ic|r?lh|v(?:[hwib]|min|max)|px|cm|mm|in|p[ct]|%)/.test(value) ? value : void 0;
var asAngle = (value) => /[-+]?(?:\d*\.)?\d+(?:deg|g?rad|turn)/.test(value) ? value : void 0;
var asTime = (value) => /[-+]?(?:\d*\.)?\d+m?s/.test(value) ? value : void 0;
var asNumber = (value) => numberLike(value) ? value : void 0;
var match;
var withUnit = (value, unit) => unit ? value + unit : value;
var divide = (dividend, divisor, unit, factor) => withUnit(String(Number((Number(dividend) / Number(divisor) * (factor || 1)).toFixed(6))), unit);
var convert = (value, unit, screenUnit) => {
if (value === "px")
return "1px";
if (screenUnit && value === "screen") {
return `100v${screenUnit}`;
}
if (numberLike(value)) {
return unit === "rem" ? divide(value, 4, "rem") : withUnit(value, unit);
}
if (unit === "rem" && (match = /^(-?\d+)\/(-?\d+)$/.exec(value))) {
return divide(match[1], match[2], "%", 100);
}
};
var play = (parent) => ({
unknown(section, parts, optional, theme3) {
let value;
switch (section) {
case "borderWidth":
case "divideWidth":
case "ringWidth":
case "ringOffsetWidth":
case "borderRadius":
if (parts.length === 1) {
value = convert(parts[0], "px") || asSize(parts[0]);
}
break;
case "spacing":
case "letterSpacing":
case "lineHeight":
case "gap":
case "inset":
case "translate":
case "fontSize":
if (parts.length === 1) {
value = convert(parts[0], "rem") || asSize(parts[0]);
}
break;
case "durations":
case "transitionDuration":
case "transitionDelay":
if (parts.length === 1) {
value = convert(parts[0], "ms") || asTime(parts[0]);
}
break;
case "opacity":
case "backgroundOpacity":
case "borderOpacity":
case "scale":
if (parts.length === 1) {
value = asNumber(parts[0]) && divide(parts[0], 100);
}
break;
case "rotate":
case "skew":
if (parts.length === 1) {
value = convert(parts[0], "deg") || asAngle(parts[0]);
}
break;
case "width":
case "maxWidth":
if (parts.length === 1) {
value = convert(parts[0], "rem", "w") || asSize(parts[0]);
}
break;
case "height":
case "maxHeight":
if (parts.length === 1) {
value = convert(parts[0], "rem", "h") || asSize(parts[0]);
}
break;
case "gradientColorStops":
case "borderColor":
case "backgroundColor":
case "colors":
case "divideColor":
case "fill":
case "placeholderColor":
case "ringColor":
case "ringOffsetColor":
case "stroke":
case "textColor":
if (parts.length === 1) {
if (parts[0] === "current") {
return "currentColor";
}
if (isColor(parts[0])) {
return parts[0];
}
}
break;
case "order":
case "strokeWidth":
case "fontWeight":
case "zIndex":
if (parts.length === 1) {
value = asNumber(parts[0]);
}
break;
case "transitionProperty":
case "transitionTimingFunction":
if (parts.length > 0) {
return join(parts);
}
break;
}
return value == null ? parent.unknown(section, parts, optional, theme3) : value;
},
warn: parent.warn
});
// src/theme.ts
var theme = (base) => ({
stroke: (theme3) => ({
...base("stroke"),
...theme3("colors")
})
});
// src/index.ts
var src_default = ({mode}) => ({theme, mode: play(mode)});