@prop-styles/core
Version:
The library provides a static method createPropStyles to create Style objects.
192 lines (191 loc) • 5.33 kB
JavaScript
/*!
* @prop-styles/core version 1.0.3-beta
* Author: Capricorncd<capricorncd@qq.com>
* Homepage: https://github.com/capricorncd/prop-styles#readme
* Released on: 2025-11-09 10:56:17 (GMT+0000)
*/
const m = {
xs: 640,
sm: 768,
md: 1024,
lg: 1280,
xl: 1536,
xxl: 1920
}, b = (t) => {
if (!t) return;
const e = Object.entries(t === !0 ? m : t).sort((n, s) => n[1] - s[1]);
if (!(typeof window > "u" || typeof window.matchMedia != "function"))
for (const [n, s] of e)
try {
if (window.matchMedia(`(min-width: ${s}px)`).matches)
return n;
} catch {
}
};
function l(t) {
return typeof t == "string" ? /^-?\d+(\.\d+)?$/.test(t) : g(t);
}
function g(t) {
return Number.isFinite(t);
}
const h = /^((-?\d+(\.\d+)?)?([a-z]+|%)?\s*)+$/i, y = /(\d+\s|\s-?\d+(\.\d+)?$)/;
function p(t, r = "px") {
if (l(t))
return `${t}${r}`;
if (t && typeof t == "string") {
const e = t.trim().replace(/\s{2,}/g, " ");
return h.test(e) && y.test(e) ? e.trim().split(" ").map((n) => p(n, r)).join(" ") : e;
}
return "";
}
function w(t) {
return t.replace(
/^-?[1-9]\d{0,2}(,\d{3})+/,
(r) => r.replace(/,/g, "")
);
}
function u(t, r = !1, e) {
if (typeof r == "number" && (e = r, r = !1), typeof e != "number" && (e = 0), g(t))
return t;
if (typeof t == "string") {
if (!r && /^(-?\d+(?:\.\d+)?)\D*/.test(w(t)))
return u(RegExp.$1, !0);
const n = Number(t);
return isNaN(n) ? e : n;
}
return e;
}
const x = /^(#[a-f0-9]{3,8}|(rgba?|hsla?|hwb|lab|lch|oklab|oklch|hwb|lch|light-dark)\(.+\))$/i, S = /^--\w+(-\w+)*$/, k = /(\s)*--\w+(-\w+)*/;
function R(t) {
return typeof t != "string" ? !1 : x.test(t);
}
const _ = (t) => t ? k.test(t) ? t.split(/\s+/g).map((r) => S.test(r) ? `var(${r})` : r).join(" ") : t : "", o = (t, r, e) => !r && r !== 0 ? null : { key: t, value: _(e ?? String(r)) }, A = (t, r) => {
const e = {};
let n;
for (const s of Object.keys(t)) {
if (n = r[s], !n) continue;
const d = n(t[s], t);
if (d)
if (Array.isArray(d))
d.forEach((i) => {
i && (e[i.key] = i.value);
});
else {
const { key: i, value: c } = d;
e[i] = c;
}
}
return e;
}, C = /^-?\d+(\.\d+)?[a-z]+$/i, P = (t) => typeof t == "string" && C.test(t), f = (t, r) => {
const e = r ? `border${r}` : "border";
return l(t) || P(t) ? { key: `${e}Width`, value: p(t) } : R(t) ? { key: `${e}Color`, value: t } : o(e, t);
}, $ = {
display: "display",
width: "width",
minWidth: "minWidth",
maxWidth: "maxWidth",
height: "height",
minHeight: "minHeight",
maxHeight: "maxHeight",
gap: "gap",
fd: "flexDirection",
ai: "alignItems",
ac: "alignContent",
ji: "justifyItems",
jc: "justifyContent",
ws: "whiteSpace",
p: "padding",
pt: "paddingTop",
pr: "paddingRight",
pb: "paddingBottom",
pl: "paddingLeft",
px: "paddingInline",
py: "paddingBlock",
m: "margin",
mt: "marginTop",
mr: "marginRight",
mb: "marginBottom",
ml: "marginLeft",
mx: "marginInline",
my: "marginBlock",
radius: "borderRadius",
fs: "fontSize",
lh: "lineHeight",
color: "color",
bg: "background",
bgs: "backgroundSize",
bgo: "backgroundOrigin",
fw: "fontWeight",
border: "border",
borderTop: "borderTop",
borderRight: "borderRight",
borderBottom: "borderBottom",
borderLeft: "borderLeft",
gtc: "gridTemplateColumns",
gtr: "gridTemplateRows",
ta: "textAlign",
position: "position",
top: "top",
right: "right",
bottom: "bottom",
left: "left",
zIndex: "zIndex",
inset: "inset",
transform: "transform",
cursor: "cursor",
whiteSpace: "whiteSpace",
ratio: "aspectRatio"
}, j = {
column: (t) => o("flexDirection", t, "column"),
wrap: (t) => o("flexWrap", t, t === !0 ? "wrap" : String(t)),
breakWord: (t) => o("overflowWrap", t, "break-word"),
// overflow
scroll: (t) => o(
`overflow${typeof t == "string" ? t.toUpperCase() : ""}`,
t,
"auto"
),
shadow: (t) => o(
"boxShadow",
t,
t === !0 ? "0 2px 4px 0 rgba(0, 0, 0, 0.1)" : String(t)
),
flex: (t) => t === !0 ? o("display", "flex") : o("flex", t),
inline: (t) => o("display", t, "inline"),
nowrap: (t) => o("whiteSpace", t, "nowrap")
}, L = {
...Object.entries($).reduce((t, [r, e]) => (t[r] = (n) => o(e, n, p(n)), t), {}),
...j,
border: (t) => f(t),
borderTop: (t) => f(t, "Top"),
borderRight: (t) => f(t, "Right"),
borderBottom: (t) => f(t, "Bottom"),
borderLeft: (t) => f(t, "Left"),
fw: (t) => o("fontWeight", t),
gtc: (t) => o("gridTemplateColumns", t, p(t, "fr")),
gtr: (t) => o("gridTemplateRows", t, p(t, "fr")),
zIndex: (t) => o("zIndex", t),
lh: (t) => o(
"lineHeight",
t,
l(t) && u(t) < 8 ? String(t) : p(t)
)
}, O = (t, r, e = {}) => {
const n = {
...L,
...r
}, s = e.breakpoint ?? b(e.breakpoints), d = (() => {
const i = {};
for (const c of Object.keys(t)) {
const a = t[c];
a !== null && typeof a == "object" && !Array.isArray(a) ? s && Object.prototype.hasOwnProperty.call(a, s) ? i[c] = a[s] : Object.prototype.hasOwnProperty.call(a, "default") ? i[c] = a.default : i[c] = a : i[c] = a;
}
return i;
})();
return A(d, n);
};
export {
O as createPropStyles,
b as getDefaultBreakpoint,
o as transform
};