twind
Version:
compiles tailwind like shorthand syntax into css at runtime
1,939 lines • 64.8 kB
JavaScript
// src/internal/util.ts
var includes = (value, search) => !!~value.indexOf(search);
var join = (parts, separator = "-") => parts.join(separator);
var joinTruthy = (parts, separator) => join(parts.filter(Boolean), separator);
var tail = (array, startIndex = 1) => array.slice(startIndex);
var identity = (value) => value;
var noop = () => {
};
var capitalize = (value) => value[0].toUpperCase() + tail(value);
var hyphenate = (value) => value.replace(/[A-Z]/g, "-$&").toLowerCase();
var evalThunk = (value, context) => {
while (typeof value == "function") {
value = value(context);
}
return value;
};
var ensureMaxSize = (map, max) => {
if (map.size > max) {
map.delete(map.keys().next().value);
}
};
var isCSSProperty = (key, value) => !includes("@:&", key[0]) && (includes("rg", (typeof value)[5]) || Array.isArray(value));
var merge = (target, source, context) => source ? Object.keys(source).reduce((target2, key) => {
const value = evalThunk(source[key], context);
if (isCSSProperty(key, value)) {
target2[hyphenate(key)] = value;
} else {
target2[key] = key[0] == "@" && includes("figa", key[1]) ? (target2[key] || []).concat(value) : merge(target2[key] || {}, value, context);
}
return target2;
}, target) : target;
var escape = typeof CSS !== "undefined" && CSS.escape || ((className) => className.replace(/[!"'`*+.,;:\\/<=>?@#$%&^|~()[\]{}]/g, "\\$&").replace(/^\d/, "\\3$& "));
var buildMediaQuery = (screen) => {
if (!Array.isArray(screen)) {
screen = [screen];
}
return "@media " + join(screen.map((screen2) => {
if (typeof screen2 == "string") {
screen2 = {min: screen2};
}
return screen2.raw || join(Object.keys(screen2).map((feature) => `(${feature}-width:${screen2[feature]})`), " and ");
}), ",");
};
var cyrb32 = (value) => {
for (var h = 9, index = value.length; index--; ) {
h = Math.imul(h ^ value.charCodeAt(index), 1597334677);
}
return "tw-" + ((h ^ h >>> 9) >>> 0).toString(36);
};
var sortedInsertionIndex = (array, element) => {
for (var low = 0, high = array.length; low < high; ) {
const pivot = high + low >> 1;
if (array[pivot] <= element) {
low = pivot + 1;
} else {
high = pivot;
}
}
return high;
};
// src/twind/parse.ts
var groupings;
var rules;
var startGrouping = (value = "") => {
groupings.push(value);
return "";
};
var endGrouping = (isWhitespace) => {
groupings.length = Math.max(groupings.lastIndexOf("") + ~~isWhitespace, 0);
};
var onlyPrefixes = (s) => s && !includes("!:", s[0]);
var onlyVariants = (s) => s[0] == ":";
var addRule = (directive2, negate) => {
rules.push({
v: groupings.filter(onlyVariants),
d: directive2,
n: negate,
i: includes(groupings, "!"),
$: ""
});
};
var saveRule = (buffer) => {
const negate = buffer[0] == "-";
if (negate) {
buffer = tail(buffer);
}
const prefix = join(groupings.filter(onlyPrefixes));
addRule(buffer == "&" ? prefix : (prefix && prefix + "-") + buffer, negate);
return "";
};
var parseString = (token, isVariant) => {
let buffer = "";
for (let char, dynamic = false, position2 = 0; char = token[position2++]; ) {
if (dynamic || char == "[") {
buffer += char;
dynamic = char != "]";
continue;
}
switch (char) {
case ":":
buffer = buffer && startGrouping(":" + (token[position2] == char ? token[position2++] : "") + buffer);
break;
case "(":
buffer = buffer && startGrouping(buffer);
startGrouping();
break;
case "!":
startGrouping(char);
break;
case ")":
case " ":
case " ":
case "\n":
case "\r":
buffer = buffer && saveRule(buffer);
endGrouping(char !== ")");
break;
default:
buffer += char;
}
}
if (buffer) {
if (isVariant) {
startGrouping(":" + buffer);
} else if (buffer.slice(-1) == "-") {
startGrouping(buffer.slice(0, -1));
} else {
saveRule(buffer);
}
}
};
var parseGroupedToken = (token) => {
startGrouping();
parseToken(token);
endGrouping();
};
var parseGroup = (key, token) => {
if (token) {
startGrouping();
const isVariant = includes("tbu", (typeof token)[1]);
parseString(key, isVariant);
if (isVariant) {
parseGroupedToken(token);
}
endGrouping();
}
};
var parseToken = (token) => {
switch (typeof token) {
case "string":
parseString(token);
break;
case "function":
addRule(token);
break;
case "object":
if (Array.isArray(token)) {
token.forEach(parseGroupedToken);
} else if (token) {
Object.keys(token).forEach((key) => {
parseGroup(key, token[key]);
});
}
}
};
var staticsCaches = new WeakMap();
var buildStatics = (strings) => {
let statics = staticsCaches.get(strings);
if (!statics) {
let slowModeIndex = NaN;
let buffer = "";
statics = strings.map((token, index) => {
if (slowModeIndex !== slowModeIndex && (token.slice(-1) == "[" || includes(":-(", (strings[index + 1] || "")[0]))) {
slowModeIndex = index;
}
if (index >= slowModeIndex) {
return (interpolation) => {
if (index == slowModeIndex) {
buffer = "";
}
buffer += token;
if (includes("rg", (typeof interpolation)[5])) {
buffer += interpolation;
} else if (interpolation) {
parseString(buffer);
buffer = "";
parseToken(interpolation);
}
if (index == strings.length - 1) {
parseString(buffer);
}
};
}
const staticRules = rules = [];
parseString(token);
const activeGroupings = [...groupings];
rules = [];
return (interpolation) => {
rules.push(...staticRules);
groupings = [...activeGroupings];
if (interpolation) {
parseToken(interpolation);
}
};
});
staticsCaches.set(strings, statics);
}
return statics;
};
var parse = (tokens) => {
groupings = [];
rules = [];
if (Array.isArray(tokens[0]) && Array.isArray(tokens[0].raw)) {
buildStatics(tokens[0]).forEach((apply2, index) => apply2(tokens[index + 1]));
} else {
parseToken(tokens);
}
return rules;
};
// src/twind/directive.ts
var isFunctionFree;
var detectFunction = (key, value) => {
if (typeof value == "function") {
isFunctionFree = false;
}
return value;
};
var stringify = (data) => {
isFunctionFree = true;
const key = JSON.stringify(data, detectFunction);
return isFunctionFree && key;
};
var cacheByFactory = new WeakMap();
var directive = (factory, data) => {
const key = stringify(data);
let directive2;
if (key) {
var cache = cacheByFactory.get(factory);
if (!cache) {
cacheByFactory.set(factory, cache = new Map());
}
directive2 = cache.get(key);
}
if (!directive2) {
directive2 = Object.defineProperty((params, context) => {
context = Array.isArray(params) ? context : params;
return evalThunk(factory(data, context), context);
}, "toJSON", {
value: () => key || data
});
if (cache) {
cache.set(key, directive2);
ensureMaxSize(cache, 1e4);
}
}
return directive2;
};
// src/twind/apply.ts
var applyFactory = (tokens, {css}) => css(parse(tokens));
var apply = (...tokens) => directive(applyFactory, tokens);
// src/twind/helpers.ts
var positions = (resolve) => (value, position2, prefix, suffix) => {
if (value) {
const properties = position2 && resolve(position2);
if (properties && properties.length > 0) {
return properties.reduce((declarations, property2) => {
declarations[joinTruthy([prefix, property2, suffix])] = value;
return declarations;
}, {});
}
}
};
var corners = /* @__PURE__ */ positions((key) => ({
t: ["top-left", "top-right"],
r: ["top-right", "bottom-right"],
b: ["bottom-left", "bottom-right"],
l: ["bottom-left", "top-left"],
tl: ["top-left"],
tr: ["top-right"],
bl: ["bottom-left"],
br: ["bottom-right"]
})[key]);
var expandEdges = (key) => {
const parts = ({x: "lr", y: "tb"}[key] || key || "").split("").sort();
for (let index = parts.length; index--; ) {
if (!(parts[index] = {
t: "top",
r: "right",
b: "bottom",
l: "left"
}[parts[index]]))
return;
}
if (parts.length)
return parts;
};
var edges = /* @__PURE__ */ positions(expandEdges);
var stringifyVariant = (selector, variant) => selector + (variant[1] == ":" ? tail(variant, 2) + ":" : tail(variant)) + ":";
var stringifyRule = (rule, directive2 = rule.d) => typeof directive2 == "function" ? "" : rule.v.reduce(stringifyVariant, "") + (rule.i ? "!" : "") + (rule.n ? "-" : "") + directive2;
// src/twind/plugins.ts
var _;
var __;
var $;
var toColumnsOrRows = (x) => x == "cols" ? "columns" : "rows";
var property = (property2) => (params, context, id) => ({
[property2]: id + ((_ = join(params)) && "-" + _)
});
var propertyValue = (property2, separator) => (params, context, id) => (_ = join(params, separator)) && {
[property2 || id]: _
};
var themeProperty = (section) => (params, {theme: theme2}, id) => (_ = theme2(section || id, params)) && {
[section || id]: _
};
var themePropertyFallback = (section, separator) => (params, {theme: theme2}, id) => (_ = theme2(section || id, params, join(params, separator))) && {
[section || id]: _
};
var alias = (handler, name) => (params, context) => handler(params, context, name);
var display = property("display");
var position = property("position");
var textTransform = property("textTransform");
var textDecoration = property("textDecoration");
var fontStyle = property("fontStyle");
var fontVariantNumeric = (key) => (params, context, id) => ({
["--tw-" + key]: id,
fontVariantNumeric: "var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)"
});
var inset = (params, {theme: theme2}, id) => (_ = theme2("inset", params)) && {[id]: _};
var opacityProperty = (params, theme2, id, section = id) => (_ = theme2(section + "Opacity", tail(params))) && {
[`--tw-${id}-opacity`]: _
};
var parseColorComponent = (chars, factor) => Math.round(parseInt(chars, 16) * factor);
var asRGBA = (color, opacityProperty2, opacityDefault) => {
if (color && color[0] == "#" && (_ = (color.length - 1) / 3) && ($ = [17, 1, 0.062272][_ - 1])) {
return `rgba(${parseColorComponent(color.substr(1, _), $)},${parseColorComponent(color.substr(1 + _, _), $)},${parseColorComponent(color.substr(1 + 2 * _, _), $)},${opacityProperty2 ? `var(--tw-${opacityProperty2}${opacityDefault ? "," + opacityDefault : ""})` : opacityDefault || 1})`;
}
return color;
};
var withOpacityFallback = (property2, kind, color) => color && typeof color == "string" ? (_ = asRGBA(color, kind + "-opacity")) && _ !== color ? {
[`--tw-${kind}-opacity`]: "1",
[property2]: [color, _]
} : {[property2]: color} : void 0;
var transparentTo = (color) => ($ = asRGBA(color, "", "0")) == _ ? "transparent" : $;
var reversableEdge = (params, {theme: theme2}, id, section, prefix, suffix) => (_ = {x: ["right", "left"], y: ["bottom", "top"]}[params[0]]) && ($ = `--tw-${id}-${params[0]}-reverse`) ? params[1] == "reverse" ? {
[$]: "1"
} : {
[$]: "0",
[joinTruthy([prefix, _[0], suffix])]: (__ = theme2(section, tail(params))) && `calc(${__} * var(${$}))`,
[joinTruthy([prefix, _[1], suffix])]: __ && [__, `calc(${__} * calc(1 - var(${$})))`]
} : void 0;
var placeHelper = (property2, params) => params[0] && {
[property2]: (includes("wun", (params[0] || "")[3]) ? "space-" : "") + params[0]
};
var contentPluginFor = (property2) => (params) => includes(["start", "end"], params[0]) ? {[property2]: "flex-" + params[0]} : placeHelper(property2, params);
var gridPlugin = (kind) => (params, {theme: theme2}) => {
if (_ = theme2("grid" + capitalize(kind), params, "")) {
return {["grid-" + kind]: _};
}
switch (params[0]) {
case "span":
return params[1] && {
["grid-" + kind]: `span ${params[1]} / span ${params[1]}`
};
case "start":
case "end":
return (_ = theme2("grid" + capitalize(kind) + capitalize(params[0]), tail(params), join(tail(params)))) && {
[`grid-${kind}-${params[0]}`]: _
};
}
};
var border = (params, {theme: theme2}, id) => {
switch (params[0]) {
case "solid":
case "dashed":
case "dotted":
case "double":
case "none":
return propertyValue("borderStyle")(params);
case "collapse":
case "separate":
return propertyValue("borderCollapse")(params);
case "opacity":
return opacityProperty(params, theme2, id);
}
return (_ = theme2(id + "Width", params, "")) ? {borderWidth: _} : withOpacityFallback("borderColor", id, theme2(id + "Color", params));
};
var borderEdges = (params, context, id) => {
var _a;
const edges2 = (_a = expandEdges(params[0])) == null ? void 0 : _a.map(capitalize);
if (edges2) {
params = tail(params);
}
let rules2 = border(params, context, id);
if (edges2 && rules2 && typeof rules2 === "object") {
rules2 = Object.entries(rules2).reduce((newRules, [key, value]) => {
if (key.startsWith("border")) {
for (const edge of edges2) {
newRules[key.slice(0, 6) + edge + key.slice(6)] = value;
}
} else {
newRules[key] = value;
}
return newRules;
}, {});
}
return rules2;
};
var transform = (gpu) => (gpu ? "translate3d(var(--tw-translate-x,0),var(--tw-translate-y,0),0)" : "translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0))") + " rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))";
var transformXYFunction = (params, context, id) => params[0] && (_ = context.theme(id, params[1] || params[0])) && {
[`--tw-${id}-x`]: params[0] !== "y" && _,
[`--tw-${id}-y`]: params[0] !== "x" && _,
transform: [`${id}${params[1] ? params[0].toUpperCase() : ""}(${_})`, transform()]
};
var edgesPluginFor = (key) => (params, context, id) => id[1] ? edges(context.theme(key, params), id[1], key) : themeProperty(key)(params, context, id);
var padding = edgesPluginFor("padding");
var margin = edgesPluginFor("margin");
var minMax = (params, {theme: theme2}, id) => (_ = {w: "width", h: "height"}[params[0]]) && {
[_ = `${id}${capitalize(_)}`]: theme2(_, tail(params))
};
var filter = (params, {theme: theme2}, id) => {
const parts = id.split("-");
const prefix = parts[0] == "backdrop" ? parts[0] + "-" : "";
if (!prefix) {
params.unshift(...parts);
}
if (params[0] == "filter") {
const filters = [
"blur",
"brightness",
"contrast",
"grayscale",
"hue-rotate",
"invert",
prefix && "opacity",
"saturate",
"sepia",
!prefix && "drop-shadow"
].filter(Boolean);
return params[1] == "none" ? {[prefix + "filter"]: "none"} : filters.reduce((css, key) => {
css["--tw-" + prefix + key] = "var(--tw-empty,/*!*/ /*!*/)";
return css;
}, {
[prefix + "filter"]: filters.map((key) => `var(--tw-${prefix}${key})`).join(" ")
});
}
$ = params.shift();
if (includes(["hue", "drop"], $))
$ += capitalize(params.shift());
return (_ = theme2(prefix ? "backdrop" + capitalize($) : $, params)) && {
["--tw-" + prefix + $]: (Array.isArray(_) ? _ : [_]).map((_4) => `${hyphenate($)}(${_4})`).join(" ")
};
};
var corePlugins = {
group: (params, {tag}, id) => tag(join([id, ...params])),
hidden: alias(display, "none"),
inline: display,
block: display,
contents: display,
flow: display,
table: (params, context, id) => includes(["auto", "fixed"], params[0]) ? {tableLayout: params[0]} : display(params, context, id),
flex(params, context, id) {
switch (params[0]) {
case "row":
case "col":
return {
flexDirection: join(params[0] == "col" ? ["column", ...tail(params)] : params)
};
case "nowrap":
case "wrap":
return {flexWrap: join(params)};
case "grow":
case "shrink":
_ = context.theme("flex" + capitalize(params[0]), tail(params), params[1] || 1);
return _ != null && {
["flex-" + params[0]]: "" + _
};
}
return (_ = context.theme("flex", params, "")) ? {flex: _} : display(params, context, id);
},
grid(params, context, id) {
switch (params[0]) {
case "cols":
case "rows":
return (_ = context.theme("gridTemplate" + capitalize(toColumnsOrRows(params[0])), tail(params), params.length == 2 && Number(params[1]) ? `repeat(${params[1]},minmax(0,1fr))` : join(tail(params)))) && {
["gridTemplate-" + toColumnsOrRows(params[0])]: _
};
case "flow":
return params.length > 1 && {
gridAutoFlow: join(params[1] == "col" ? ["column", ...tail(params, 2)] : tail(params), " ")
};
}
return display(params, context, id);
},
auto: (params, {theme: theme2}) => includes(["cols", "rows"], params[0]) && (_ = theme2("gridAuto" + capitalize(toColumnsOrRows(params[0])), tail(params), join(tail(params)))) && {
["gridAuto-" + toColumnsOrRows(params[0])]: _
},
static: position,
fixed: position,
absolute: position,
relative: position,
sticky: position,
visible: {visibility: "visible"},
invisible: {visibility: "hidden"},
antialiased: {
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale"
},
"subpixel-antialiased": {
WebkitFontSmoothing: "auto",
MozOsxFontSmoothing: "auto"
},
truncate: {
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis"
},
"sr-only": {
position: "absolute",
width: "1px",
height: "1px",
padding: "0",
margin: "-1px",
overflow: "hidden",
whiteSpace: "nowrap",
clip: "rect(0,0,0,0)",
borderWidth: "0"
},
"not-sr-only": {
position: "static",
width: "auto",
height: "auto",
padding: "0",
margin: "0",
overflow: "visible",
whiteSpace: "normal",
clip: "auto"
},
resize: (params) => ({
resize: {x: "horizontal", y: "vertical"}[params[0]] || params[0] || "both"
}),
box: (params) => params[0] && {boxSizing: params[0] + "-box"},
appearance: propertyValue(),
cursor: themePropertyFallback(),
float: propertyValue(),
clear: propertyValue(),
decoration: propertyValue("boxDecorationBreak"),
isolate: {isolation: "isolate"},
isolation: propertyValue(),
"mix-blend": propertyValue("mixBlendMode"),
top: inset,
right: inset,
bottom: inset,
left: inset,
inset: (params, {theme: theme2}) => (_ = expandEdges(params[0])) ? edges(theme2("inset", tail(params)), params[0]) : (_ = theme2("inset", params)) && {
top: _,
right: _,
bottom: _,
left: _
},
underline: textDecoration,
"line-through": textDecoration,
"no-underline": alias(textDecoration, "none"),
"text-underline": alias(textDecoration, "underline"),
"text-no-underline": alias(textDecoration, "none"),
"text-line-through": alias(textDecoration, "line-through"),
uppercase: textTransform,
lowercase: textTransform,
capitalize: textTransform,
"normal-case": alias(textTransform, "none"),
"text-normal-case": alias(textTransform, "none"),
italic: fontStyle,
"not-italic": alias(fontStyle, "normal"),
"font-italic": alias(fontStyle, "italic"),
"font-not-italic": alias(fontStyle, "normal"),
font: (params, context, id) => (_ = context.theme("fontFamily", params, "")) ? {fontFamily: _} : themeProperty("fontWeight")(params, context, id),
items: (params) => params[0] && {
alignItems: includes(["start", "end"], params[0]) ? "flex-" + params[0] : join(params)
},
"justify-self": propertyValue(),
"justify-items": propertyValue(),
justify: contentPluginFor("justifyContent"),
content: contentPluginFor("alignContent"),
self: contentPluginFor("alignSelf"),
place: (params) => params[0] && placeHelper("place-" + params[0], tail(params)),
overscroll: (params) => params[0] && {
["overscrollBehavior" + (params[1] ? "-" + params[0] : "")]: params[1] || params[0]
},
col: gridPlugin("column"),
row: gridPlugin("row"),
duration: themeProperty("transitionDuration"),
delay: themeProperty("transitionDelay"),
tracking: themeProperty("letterSpacing"),
leading: themeProperty("lineHeight"),
z: themeProperty("zIndex"),
opacity: themeProperty(),
ease: themeProperty("transitionTimingFunction"),
p: padding,
py: padding,
px: padding,
pt: padding,
pr: padding,
pb: padding,
pl: padding,
m: margin,
my: margin,
mx: margin,
mt: margin,
mr: margin,
mb: margin,
ml: margin,
w: themeProperty("width"),
h: themeProperty("height"),
min: minMax,
max: minMax,
fill: themeProperty(),
order: themeProperty(),
origin: themePropertyFallback("transformOrigin", " "),
select: propertyValue("userSelect"),
"pointer-events": propertyValue(),
align: propertyValue("verticalAlign"),
whitespace: propertyValue("whiteSpace"),
"normal-nums": {fontVariantNumeric: "normal"},
ordinal: fontVariantNumeric("ordinal"),
"slashed-zero": fontVariantNumeric("slashed-zero"),
"lining-nums": fontVariantNumeric("numeric-figure"),
"oldstyle-nums": fontVariantNumeric("numeric-figure"),
"proportional-nums": fontVariantNumeric("numeric-spacing"),
"tabular-nums": fontVariantNumeric("numeric-spacing"),
"diagonal-fractions": fontVariantNumeric("numeric-fraction"),
"stacked-fractions": fontVariantNumeric("numeric-fraction"),
overflow: (params, context, id) => includes(["ellipsis", "clip"], params[0]) ? propertyValue("textOverflow")(params) : params[1] ? {["overflow-" + params[0]]: params[1]} : propertyValue()(params, context, id),
transform: (params) => params[0] == "none" ? {transform: "none"} : {
"--tw-translate-x": "0",
"--tw-translate-y": "0",
"--tw-rotate": "0",
"--tw-skew-x": "0",
"--tw-skew-y": "0",
"--tw-scale-x": "1",
"--tw-scale-y": "1",
transform: transform(params[0] == "gpu")
},
rotate: (params, {theme: theme2}) => (_ = theme2("rotate", params)) && {
"--tw-rotate": _,
transform: [`rotate(${_})`, transform()]
},
scale: transformXYFunction,
translate: transformXYFunction,
skew: transformXYFunction,
gap: (params, context, id) => (_ = {x: "column", y: "row"}[params[0]]) ? {[_ + "Gap"]: context.theme("gap", tail(params))} : themeProperty("gap")(params, context, id),
stroke: (params, context, id) => (_ = context.theme("stroke", params, "")) ? {stroke: _} : themeProperty("strokeWidth")(params, context, id),
outline: (params, {theme: theme2}) => (_ = theme2("outline", params)) && {
outline: _[0],
outlineOffset: _[1]
},
"break-normal": {
wordBreak: "normal",
overflowWrap: "normal"
},
"break-words": {overflowWrap: "break-word"},
"break-all": {wordBreak: "break-all"},
text(params, {theme: theme2}, id) {
switch (params[0]) {
case "left":
case "center":
case "right":
case "justify":
return {textAlign: params[0]};
case "uppercase":
case "lowercase":
case "capitalize":
return textTransform([], _, params[0]);
case "opacity":
return opacityProperty(params, theme2, id);
}
const fontSize = theme2("fontSize", params, "");
if (fontSize) {
return typeof fontSize == "string" ? {fontSize} : {
fontSize: fontSize[0],
...typeof fontSize[1] == "string" ? {lineHeight: fontSize[1]} : fontSize[1]
};
}
return withOpacityFallback("color", "text", theme2("textColor", params));
},
bg(params, {theme: theme2}, id) {
switch (params[0]) {
case "fixed":
case "local":
case "scroll":
return propertyValue("backgroundAttachment", ",")(params);
case "bottom":
case "center":
case "left":
case "right":
case "top":
return propertyValue("backgroundPosition", " ")(params);
case "no":
return params[1] == "repeat" && propertyValue("backgroundRepeat")(params);
case "repeat":
return includes("xy", params[1]) ? propertyValue("backgroundRepeat")(params) : {backgroundRepeat: params[1] || params[0]};
case "opacity":
return opacityProperty(params, theme2, id, "background");
case "clip":
case "origin":
return params[1] && {
["background-" + params[0]]: params[1] + (params[1] == "text" ? "" : "-box")
};
case "blend":
return propertyValue("background-blend-mode")(tail(params));
case "gradient":
if (params[1] == "to" && (_ = expandEdges(params[2]))) {
return {
backgroundImage: `linear-gradient(to ${join(_, " ")},var(--tw-gradient-stops))`
};
}
}
return (_ = theme2("backgroundPosition", params, "")) ? {backgroundPosition: _} : (_ = theme2("backgroundSize", params, "")) ? {backgroundSize: _} : (_ = theme2("backgroundImage", params, "")) ? {backgroundImage: _} : withOpacityFallback("backgroundColor", "bg", theme2("backgroundColor", params));
},
from: (params, {theme: theme2}) => (_ = theme2("gradientColorStops", params)) && {
"--tw-gradient-from": _,
"--tw-gradient-stops": `var(--tw-gradient-from),var(--tw-gradient-to,${transparentTo(_)})`
},
via: (params, {theme: theme2}) => (_ = theme2("gradientColorStops", params)) && {
"--tw-gradient-stops": `var(--tw-gradient-from),${_},var(--tw-gradient-to,${transparentTo(_)})`
},
to: (params, {theme: theme2}) => (_ = theme2("gradientColorStops", params)) && {
"--tw-gradient-to": _
},
border: borderEdges,
divide: (params, context, id) => (_ = reversableEdge(params, context, id, "divideWidth", "border", "width") || border(params, context, id)) && {
"&>:not([hidden])~:not([hidden])": _
},
space: (params, context, id) => (_ = reversableEdge(params, context, id, "space", "margin")) && {
"&>:not([hidden])~:not([hidden])": _
},
placeholder: (params, {theme: theme2}, id) => (_ = params[0] == "opacity" ? opacityProperty(params, theme2, id) : withOpacityFallback("color", "placeholder", theme2("placeholderColor", params))) && {
"&::placeholder": _
},
shadow: (params, {theme: theme2}) => (_ = theme2("boxShadow", params)) && {
":global": {
"*": {
"--tw-shadow": "0 0 transparent"
}
},
"--tw-shadow": _ == "none" ? "0 0 transparent" : _,
boxShadow: [
_,
`var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)`
]
},
animate: (params, {theme: theme2, tag}) => {
if ($ = theme2("animation", params)) {
const parts = $.split(" ");
if ((_ = theme2("keyframes", parts[0], __ = {})) !== __) {
return ($ = tag(parts[0])) && {
animation: $ + " " + join(tail(parts), " "),
["@keyframes " + $]: _
};
}
return {animation: $};
}
},
ring(params, {theme: theme2}, id) {
switch (params[0]) {
case "inset":
return {"--tw-ring-inset": "inset"};
case "opacity":
return opacityProperty(params, theme2, id);
case "offset":
return (_ = theme2("ringOffsetWidth", tail(params), "")) ? {
"--tw-ring-offset-width": _
} : {
"--tw-ring-offset-color": theme2("ringOffsetColor", tail(params))
};
}
return (_ = theme2("ringWidth", params, "")) ? {
"--tw-ring-offset-shadow": `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
"--tw-ring-shadow": `var(--tw-ring-inset) 0 0 0 calc(${_} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
boxShadow: `var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)`,
":global": {
"*": {
"--tw-ring-inset": "var(--tw-empty,/*!*/ /*!*/)",
"--tw-ring-offset-width": theme2("ringOffsetWidth", "", "0px"),
"--tw-ring-offset-color": theme2("ringOffsetColor", "", "#fff"),
"--tw-ring-color": asRGBA(theme2("ringColor", "", "#93c5fd"), "ring-opacity", theme2("ringOpacity", "", "0.5")),
"--tw-ring-offset-shadow": "0 0 transparent",
"--tw-ring-shadow": "0 0 transparent"
}
}
} : {
"--tw-ring-opacity": "1",
"--tw-ring-color": asRGBA(theme2("ringColor", params), "ring-opacity")
};
},
object: (params, context, id) => includes(["contain", "cover", "fill", "none", "scale-down"], join(params)) ? {objectFit: join(params)} : themePropertyFallback("objectPosition", " ")(params, context, id),
list: (params, context, id) => join(params) == "item" ? display(params, context, id) : includes(["inside", "outside"], join(params)) ? {listStylePosition: params[0]} : themePropertyFallback("listStyleType")(params, context, id),
rounded: (params, context, id) => corners(context.theme("borderRadius", tail(params), ""), params[0], "border", "radius") || themeProperty("borderRadius")(params, context, id),
"transition-none": {transitionProperty: "none"},
transition: (params, {theme: theme2}) => ({
transitionProperty: theme2("transitionProperty", params),
transitionTimingFunction: theme2("transitionTimingFunction", ""),
transitionDuration: theme2("transitionDuration", "")
}),
container: (params, {theme: theme2}) => {
const {screens = theme2("screens"), center, padding: padding2} = theme2("container");
const paddingFor = (screen) => (_ = padding2 && (typeof padding2 == "string" ? padding2 : padding2[screen] || padding2.DEFAULT)) ? {
paddingRight: _,
paddingLeft: _
} : {};
return Object.keys(screens).reduce((rules2, screen) => {
if (($ = screens[screen]) && typeof $ == "string") {
rules2[buildMediaQuery($)] = {
"&": {
"max-width": $,
...paddingFor(screen)
}
};
}
return rules2;
}, {
width: "100%",
...center ? {marginRight: "auto", marginLeft: "auto"} : {},
...paddingFor("xs")
});
},
filter,
blur: filter,
brightness: filter,
contrast: filter,
grayscale: filter,
"hue-rotate": filter,
invert: filter,
saturate: filter,
sepia: filter,
"drop-shadow": filter,
backdrop: filter
};
// src/twind/preflight.ts
var createPreflight = (theme2) => ({
":root": {tabSize: 4},
"body,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre,fieldset,ol,ul": {margin: "0"},
button: {backgroundColor: "transparent", backgroundImage: "none"},
'button,[type="button"],[type="reset"],[type="submit"]': {WebkitAppearance: "button"},
"button:focus": {outline: ["1px dotted", "5px auto -webkit-focus-ring-color"]},
"fieldset,ol,ul,legend": {padding: "0"},
"ol,ul": {listStyle: "none"},
html: {
lineHeight: "1.5",
WebkitTextSizeAdjust: "100%",
fontFamily: theme2("fontFamily.sans", "ui-sans-serif,system-ui,sans-serif")
},
body: {fontFamily: "inherit", lineHeight: "inherit"},
"*,::before,::after": {
boxSizing: "border-box",
border: `0 solid ${theme2("borderColor.DEFAULT", "currentColor")}`
},
hr: {height: "0", color: "inherit", borderTopWidth: "1px"},
img: {borderStyle: "solid"},
textarea: {resize: "vertical"},
"input::placeholder,textarea::placeholder": {
opacity: "1",
color: theme2("placeholderColor.DEFAULT", theme2("colors.gray.400", "#a1a1aa"))
},
'button,[role="button"]': {cursor: "pointer"},
table: {textIndent: "0", borderColor: "inherit", borderCollapse: "collapse"},
"h1,h2,h3,h4,h5,h6": {fontSize: "inherit", fontWeight: "inherit"},
a: {color: "inherit", textDecoration: "inherit"},
"button,input,optgroup,select,textarea": {
fontFamily: "inherit",
fontSize: "100%",
margin: "0",
padding: "0",
lineHeight: "inherit",
color: "inherit"
},
"button,select": {textTransform: "none"},
"::-moz-focus-inner": {borderStyle: "none", padding: "0"},
":-moz-focusring": {outline: "1px dotted ButtonText"},
":-moz-ui-invalid": {boxShadow: "none"},
progress: {verticalAlign: "baseline"},
"::-webkit-inner-spin-button,::-webkit-outer-spin-button": {height: "auto"},
'[type="search"]': {WebkitAppearance: "textfield", outlineOffset: "-2px"},
"::-webkit-search-decoration": {WebkitAppearance: "none"},
"::-webkit-file-upload-button": {WebkitAppearance: "button", font: "inherit"},
summary: {display: "list-item"},
"abbr[title]": {textDecoration: "underline dotted"},
"b,strong": {fontWeight: "bolder"},
"pre,code,kbd,samp": {
fontFamily: theme2("fontFamily", "mono", "ui-monospace,monospace"),
fontSize: "1em"
},
"sub,sup": {fontSize: "75%", lineHeight: "0", position: "relative", verticalAlign: "baseline"},
sub: {bottom: "-0.25em"},
sup: {top: "-0.5em"},
"img,svg,video,canvas,audio,iframe,embed,object": {display: "block", verticalAlign: "middle"},
"img,video": {maxWidth: "100%", height: "auto"}
});
// src/twind/variants.ts
var coreVariants = {
dark: "@media (prefers-color-scheme:dark)",
sticky: "@supports ((position: -webkit-sticky) or (position:sticky))",
"motion-reduce": "@media (prefers-reduced-motion:reduce)",
"motion-safe": "@media (prefers-reduced-motion:no-preference)",
first: "&:first-child",
last: "&:last-child",
even: "&:nth-child(2n)",
odd: "&:nth-child(odd)",
children: "&>*",
siblings: "&~*",
sibling: "&+*",
override: "&&"
};
// src/internal/dom.ts
var STYLE_ELEMENT_ID = "__twind";
var getStyleElement = (nonce) => {
let element = self[STYLE_ELEMENT_ID];
if (!element) {
element = document.head.appendChild(document.createElement("style"));
element.id = STYLE_ELEMENT_ID;
nonce && (element.nonce = nonce);
element.appendChild(document.createTextNode(""));
}
return element;
};
// src/twind/sheets.ts
var cssomSheet = ({
nonce,
target = getStyleElement(nonce).sheet
} = {}) => {
const offset = target.cssRules.length;
return {
target,
insert: (rule, index) => target.insertRule(rule, offset + index)
};
};
var voidSheet = () => ({
target: null,
insert: noop
});
// src/twind/modes.ts
var mode = (report) => ({
unknown(section, key = [], optional, context) {
if (!optional) {
this.report({id: "UNKNOWN_THEME_VALUE", key: section + "." + join(key)}, context);
}
},
report({id, ...info}) {
return report(`[${id}] ${JSON.stringify(info)}`);
}
});
var warn = /* @__PURE__ */ mode((message) => console.warn(message));
var strict = /* @__PURE__ */ mode((message) => {
throw new Error(message);
});
var silent = /* @__PURE__ */ mode(noop);
// src/twind/prefix.ts
import {cssPropertyAlias, cssPropertyPrefixFlags, cssValuePrefixFlags} from "style-vendorizer";
var noprefix = (property2, value, important) => `${property2}:${value}${important ? " !important" : ""}`;
var autoprefix = (property2, value, important) => {
let cssText = "";
const propertyAlias = cssPropertyAlias(property2);
if (propertyAlias)
cssText += `${noprefix(propertyAlias, value, important)};`;
let flags = cssPropertyPrefixFlags(property2);
if (flags & 1)
cssText += `-webkit-${noprefix(property2, value, important)};`;
if (flags & 2)
cssText += `-moz-${noprefix(property2, value, important)};`;
if (flags & 4)
cssText += `-ms-${noprefix(property2, value, important)};`;
flags = cssValuePrefixFlags(property2, value);
if (flags & 1)
cssText += `${noprefix(property2, `-webkit-${value}`, important)};`;
if (flags & 2)
cssText += `${noprefix(property2, `-moz-${value}`, important)};`;
if (flags & 4)
cssText += `${noprefix(property2, `-ms-${value}`, important)};`;
cssText += noprefix(property2, value, important);
return cssText;
};
// src/twind/theme.ts
var ratios = (start, end) => {
const result = {};
do {
for (let dividend = 1; dividend < start; dividend++) {
result[`${dividend}/${start}`] = Number((dividend / start * 100).toFixed(6)) + "%";
}
} while (++start <= end);
return result;
};
var exponential = (stop, unit, start = 0) => {
const result = {};
for (; start <= stop; start = start * 2 || 1) {
result[start] = start + unit;
}
return result;
};
var linear = (stop, unit = "", divideBy = 1, start = 0, step = 1, result = {}) => {
for (; start <= stop; start += step) {
result[start] = start / divideBy + unit;
}
return result;
};
var alias2 = (section) => (theme2) => theme2(section);
var themeFactory = (args, {theme: theme2}) => theme2(...args);
var theme = (...args) => directive(themeFactory, args);
var defaultTheme = {
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px"
},
colors: {
transparent: "transparent",
current: "currentColor",
black: "#000",
white: "#fff",
gray: {
50: "#f9fafb",
100: "#f3f4f6",
200: "#e5e7eb",
300: "#d1d5db",
400: "#9ca3af",
500: "#6b7280",
600: "#4b5563",
700: "#374151",
800: "#1f2937",
900: "#111827"
},
red: {
50: "#fef2f2",
100: "#fee2e2",
200: "#fecaca",
300: "#fca5a5",
400: "#f87171",
500: "#ef4444",
600: "#dc2626",
700: "#b91c1c",
800: "#991b1b",
900: "#7f1d1d"
},
yellow: {
50: "#fffbeb",
100: "#fef3c7",
200: "#fde68a",
300: "#fcd34d",
400: "#fbbf24",
500: "#f59e0b",
600: "#d97706",
700: "#b45309",
800: "#92400e",
900: "#78350f"
},
green: {
50: "#ecfdf5",
100: "#d1fae5",
200: "#a7f3d0",
300: "#6ee7b7",
400: "#34d399",
500: "#10b981",
600: "#059669",
700: "#047857",
800: "#065f46",
900: "#064e3b"
},
blue: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a"
},
indigo: {
50: "#eef2ff",
100: "#e0e7ff",
200: "#c7d2fe",
300: "#a5b4fc",
400: "#818cf8",
500: "#6366f1",
600: "#4f46e5",
700: "#4338ca",
800: "#3730a3",
900: "#312e81"
},
purple: {
50: "#f5f3ff",
100: "#ede9fe",
200: "#ddd6fe",
300: "#c4b5fd",
400: "#a78bfa",
500: "#8b5cf6",
600: "#7c3aed",
700: "#6d28d9",
800: "#5b21b6",
900: "#4c1d95"
},
pink: {
50: "#fdf2f8",
100: "#fce7f3",
200: "#fbcfe8",
300: "#f9a8d4",
400: "#f472b6",
500: "#ec4899",
600: "#db2777",
700: "#be185d",
800: "#9d174d",
900: "#831843"
}
},
spacing: {
px: "1px",
0: "0px",
.../* @__PURE__ */ linear(4, "rem", 4, 0.5, 0.5),
.../* @__PURE__ */ linear(12, "rem", 4, 5),
14: "3.5rem",
.../* @__PURE__ */ linear(64, "rem", 4, 16, 4),
72: "18rem",
80: "20rem",
96: "24rem"
},
durations: {
75: "75ms",
100: "100ms",
150: "150ms",
200: "200ms",
300: "300ms",
500: "500ms",
700: "700ms",
1e3: "1000ms"
},
animation: {
none: "none",
spin: "spin 1s linear infinite",
ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
bounce: "bounce 1s infinite"
},
backdropBlur: /* @__PURE__ */ alias2("blur"),
backdropBrightness: /* @__PURE__ */ alias2("brightness"),
backdropContrast: /* @__PURE__ */ alias2("contrast"),
backdropGrayscale: /* @__PURE__ */ alias2("grayscale"),
backdropHueRotate: /* @__PURE__ */ alias2("hueRotate"),
backdropInvert: /* @__PURE__ */ alias2("invert"),
backdropOpacity: /* @__PURE__ */ alias2("opacity"),
backdropSaturate: /* @__PURE__ */ alias2("saturate"),
backdropSepia: /* @__PURE__ */ alias2("sepia"),
backgroundColor: /* @__PURE__ */ alias2("colors"),
backgroundImage: {
none: "none"
},
backgroundOpacity: /* @__PURE__ */ alias2("opacity"),
backgroundSize: {
auto: "auto",
cover: "cover",
contain: "contain"
},
blur: {
0: "0",
sm: "4px",
DEFAULT: "8px",
md: "12px",
lg: "16px",
xl: "24px",
"2xl": "40px",
"3xl": "64px"
},
brightness: {
.../* @__PURE__ */ linear(200, "", 100, 0, 50),
.../* @__PURE__ */ linear(110, "", 100, 90, 5),
75: "0.75",
125: "1.25"
},
borderColor: (theme2) => ({
...theme2("colors"),
DEFAULT: theme2("colors.gray.200", "currentColor")
}),
borderOpacity: /* @__PURE__ */ alias2("opacity"),
borderRadius: {
none: "0px",
sm: "0.125rem",
DEFAULT: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
"1/2": "50%",
full: "9999px"
},
borderWidth: {
DEFAULT: "1px",
.../* @__PURE__ */ exponential(8, "px")
},
boxShadow: {
sm: "0 1px 2px 0 rgba(0,0,0,0.05)",
DEFAULT: "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06)",
md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)",
lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)",
xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)",
"2xl": "0 25px 50px -12px rgba(0,0,0,0.25)",
inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)",
none: "none"
},
contrast: {
.../* @__PURE__ */ linear(200, "", 100, 0, 50),
75: "0.75",
125: "1.25"
},
divideColor: /* @__PURE__ */ alias2("borderColor"),
divideOpacity: /* @__PURE__ */ alias2("borderOpacity"),
divideWidth: /* @__PURE__ */ alias2("borderWidth"),
dropShadow: {
sm: "0 1px 1px rgba(0,0,0,0.05)",
DEFAULT: ["0 1px 2px rgba(0,0,0,0.1)", "0 1px 1px rgba(0,0,0,0.06)"],
md: ["0 4px 3px rgba(0,0,0,0.07)", "0 2px 2px rgba(0,0,0,0.06)"],
lg: ["0 10px 8px rgba(0,0,0,0.04)", "0 4px 3px rgba(0,0,0,0.1)"],
xl: ["0 20px 13px rgba(0,0,0,0.03)", "0 8px 5px rgba(0,0,0,0.08)"],
"2xl": "0 25px 25px rgba(0,0,0,0.15)",
none: "0 0 #0000"
},
fill: {current: "currentColor"},
grayscale: {
0: "0",
DEFAULT: "100%"
},
hueRotate: {
0: "0deg",
15: "15deg",
30: "30deg",
60: "60deg",
90: "90deg",
180: "180deg"
},
invert: {
0: "0",
DEFAULT: "100%"
},
flex: {
1: "1 1 0%",
auto: "1 1 auto",
initial: "0 1 auto",
none: "none"
},
fontFamily: {
sans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'.split(","),
serif: 'ui-serif,Georgia,Cambria,"Times New Roman",Times,serif'.split(","),
mono: 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'.split(",")
},
fontSize: {
xs: ["0.75rem", "1rem"],
sm: ["0.875rem", "1.25rem"],
base: ["1rem", "1.5rem"],
lg: ["1.125rem", "1.75rem"],
xl: ["1.25rem", "1.75rem"],
"2xl": ["1.5rem", "2rem"],
"3xl": ["1.875rem", "2.25rem"],
"4xl": ["2.25rem", "2.5rem"],
"5xl": ["3rem", "1"],
"6xl": ["3.75rem", "1"],
"7xl": ["4.5rem", "1"],
"8xl": ["6rem", "1"],
"9xl": ["8rem", "1"]
},
fontWeight: {
thin: "100",
extralight: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900"
},
gridTemplateColumns: {},
gridTemplateRows: {},
gridAutoColumns: {
min: "min-content",
max: "max-content",
fr: "minmax(0,1fr)"
},
gridAutoRows: {
min: "min-content",
max: "max-content",
fr: "minmax(0,1fr)"
},
gridColumn: {
auto: "auto",
"span-full": "1 / -1"
},
gridRow: {
auto: "auto",
"span-full": "1 / -1"
},
gap: /* @__PURE__ */ alias2("spacing"),
gradientColorStops: /* @__PURE__ */ alias2("colors"),
height: (theme2) => ({
auto: "auto",
...theme2("spacing"),
...ratios(2, 6),
full: "100%",
screen: "100vh"
}),
inset: (theme2) => ({
auto: "auto",
...theme2("spacing"),
...ratios(2, 4),
full: "100%"
}),
keyframes: {
spin: {
from: {
transform: "rotate(0deg)"
},
to: {
transform: "rotate(360deg)"
}
},
ping: {
"0%": {
transform: "scale(1)",
opacity: "1"
},
"75%,100%": {
transform: "scale(2)",
opacity: "0"
}
},
pulse: {
"0%,100%": {
opacity: "1"
},
"50%": {
opacity: ".5"
}
},
bounce: {
"0%, 100%": {
transform: "translateY(-25%)",
animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
},
"50%": {
transform: "none",
animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
}
}
},
letterSpacing: {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0em",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em"
},
lineHeight: {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2",
.../* @__PURE__ */ linear(10, "rem", 4, 3)
},
margin: (theme2) => ({
auto: "auto",
...theme2("spacing")
}),
maxHeight: (theme2) => ({
...theme2("spacing"),
full: "100%",
screen: "100vh"
}),
maxWidth: (theme2, {breakpoints}) => ({
none: "none",
0: "0rem",
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
full: "100%",
min: "min-content",
max: "max-content",
prose: "65ch",
...breakpoints(theme2("screens"))
}),
minHeight: {
0: "0px",
full: "100%",
screen: "100vh"
},
minWidth: {
0: "0px",
full: "100%",
min: "min-content",
max: "max-content"
},
opacity: {
.../* @__PURE__ */ linear(100, "", 100, 0, 10),
5: "0.05",
25: "0.25",
75: "0.75",
95: "0.95"
},
order: {
first: "-9999",
last: "9999",
none: "0",
.../* @__PURE__ */ linear(12, "", 1, 1)
},
outline: {
none: ["2px solid transparent", "2px"],
white: ["2px dotted white", "2px"],
black: ["2px dotted black", "2px"]
},
padding: /* @__PURE__ */ alias2("spacing"),
placeholderColor: /* @__PURE__ */ alias2("colors"),
placeholderOpacity: /* @__PURE__ */ alias2("opacity"),
ringColor: (theme2) => ({
DEFAULT: theme2("colors.blue.500", "#3b82f6"),
...theme2("colors")
}),
ringOffsetColor: /* @__PURE__ */ alias2("colors"),
ringOffsetWidth: /* @__PURE__ */ exponential(8, "px"),
ringOpacity: (theme2) => ({
DEFAULT: "0.5",
...theme2("opacity")
}),
ringWidth: {
DEFAULT: "3px",
.../* @__PURE__ */ exponential(8, "px")
},
rotate: {
.../* @__PURE__ */ exponential(2, "deg"),
.../* @__PURE__ */ exponential(12, "deg", 3),
.../* @__PURE__ */ exponential(180, "deg", 45)
},
saturate: /* @__PURE__ */ linear(200, "", 100, 0, 50),
scale: {
.../* @__PURE__ */ linear(150, "", 100, 0, 50),
.../* @__PURE__ */ linear(110, "", 100, 90, 5),
75: "0.75",
125: "1.25"
},
sepia: {
0: "0",
DEFAULT: "100%"
},
skew: {
.../* @__PURE__ */ exponential(2, "deg"),
.../* @__PURE__ */ exponential(12, "deg", 3)
},
space: /* @__PURE__ */ alias2("spacing"),
stroke: {
current: "currentColor"
},
strokeWidth: /* @__PURE__ */ linear(2),
textColor: /* @__PURE__ */ alias2("colors"),
textOpacity: /* @__PURE__ */ alias2("opacity"),
transitionDuration: (theme2) => ({
DEFAULT: "150ms",
...theme2("durations")
}),
transitionDelay: /* @__PURE__ */ alias2("durations"),
transitionProperty: {
none: "none",
all: "all",
DEFAULT: "background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter",
colors: "background-color,border-color,color,fill,stroke",
opacity: "opacity",
shadow: "box-shadow",
transform: "transform"
},
transitionTimingFunction: {
DEFAULT: "cubic-bezier(0.4,0,0.2,1)",
linear: "linear",
in: "cubic-bezier(0.4,0,1,1)",
out: "cubic-bezier(0,0,0.2,1)",
"in-out": "cubic-bezier(0.4,0,0.2,1)"
},
translate: (theme2) => ({
...theme2("spacing"),
...ratios(2, 4),
full: "100%"
}),
width: (theme2) => ({
auto: "auto",
...theme2("spacing"),
...ratios(2, 6),
...ratios(12, 12),
screen: "100vw",
full: "100%",
min: "min-content",
max: "max-content"
}),
zIndex: {
auto: "auto",
.../* @__PURE__ */ linear(50, "", 1, 0, 10)
}
};
var flattenColorPalette = (colors, target = {}, prefix = []) => {
Object.keys(colors).forEach((property2) => {
const value = colors[property2];
if (property2 == "DEFAULT") {
target[join(prefix)] = value;
target[join(prefix, ".")] = value;
}
const key = [...prefix, property2];
target[join(key)] = value;
target[join(key, ".")] = value;
if (value && typeof value == "object") {
flattenColorPalette(value, target, key);
}
}, target);
return target;
};
var resolveContext = {
negative: () => ({}),
breakpoints: (screens) => Object.keys(screens).filter((key) => typeof screens[key] == "string").reduce((target, key) => {
target["screen-" + key] = screens[key];
return target;
}, {})
};
var handleArbitraryValues = (section, key) => (key = key[0] == "[" && key.slice(-1) == "]" && key.slice(1, -1)) && includes(section, "olor") == /^(#|(hsl|rgb)a?\(|[a-z]+$)/.test(key) && (includes(key, "calc(") ? key.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ") : key);
var makeThemeResolver = (config) => {
const cache = new Map();
const theme2 = {...defaultTheme, ...config};
const deref = (theme3, section) => {
const base = theme3 && theme3[section];
const value = typeof base == "function" ? base(resolve, resolveContext) : base;
return value && section == "colors" ? flattenColorPalette(value) : value;
};
const resolve = (section, key, defaultValue) => {
const keypath = section.split(".");
section = keypath[0];
if (keypath.length > 1) {
defaultValue = key;
key = join(tail(keypath), ".");
}
let base = cache.get(section);
if (!base) {
cache.set(section, base = {...deref(theme2, section)});
Object.assign(base, deref(theme2.extend, section));
}
if (key != null) {
key = (Array.isArray(key) ? join(key) : key) || "DEFAULT";
const value = handleArbitraryValues(section, key) || base[key];
return value == null ? defaultValue : Array.isArray(value) && !includes(["fontSize", "outline", "dropShadow"], section) ? join(value, ",") : value;
}
return base;
};
return resolve;
};
// src/twind/translate.ts
var translate = (plugins, context) => (rule, isTranslating) => {
if (typeof rule.d == "function") {
return rule.d(context);
}
const parameters = rule.d.split(/-(?![^[]*])/g);
if (!isTranslating && parameters[0] == "tw" && rule.$ == rule.d) {
return rule.$;
}
for (let index = parameters.length; index; index--) {
const id = join(parameters.slice(0, index));
if (Object.prototype.hasOwnProperty.call(plugins, id)) {
const plugin = plugins[id];
return typeof plugin == "function" ? plugin(tail(parameters, index), context, id) : typeof plugin == "string" ? context[isTranslating ? "css" : "tw"](plugin) : plugin;
}
}
};
// src/twind/decorate.ts
var _2;
var GROUP_RE = /^:(group(?:(?!-focus).+?)*)-(.+)$/;
var NOT_PREFIX_RE = /^(:not)-(.+)/;
var prepareVariantSelector = (variant) => variant[1] == "[" ? tail(variant) : variant;
var decorate = (darkMode, variants, {theme: theme2, tag}) => {
const applyVariant = (translation, variant) => {
if (_2 = theme2("screens", tail(variant), "")) {
return {[buildMediaQuery(_2)]: translation};
}
if (variant == ":dark" && darkMode == "class") {
return {".dark &": translation};
}
if (_2 = GROUP_RE.exec(variant)) {
return {[`.${escape(tag(_2[1]))}:${_2[2]} &`]: translation};
}
return {
[variants[tail(variant)] || "&" + variant.replace(NOT_PREFIX_RE, (_4, not, variant2) => not + "(" + prepareVariantSelector(":" + variant2) + ")")]: translation
};
};
return (translation, rule) => rule.v.reduceRight(applyVariant, translation);
};
// src/twind/presedence.ts
var _3;
var responsivePrecedence = (css) => (((_3 = /(?:^|min-width: *)(\d+(?:.\d+)?)(p)?/.exec(css)) ? +_3[1] / (_3[2] ? 15 : 1) / 10 : 0) & 31) << 22;
var seperatorPrecedence = (string) => {
_3 = 0;
for (let index = string.length; index--; ) {
_3 += includes("-:,", string[index]);
}
return _3;
};
var atRulePresedence = (css) => (seperatorPrecedence(css) & 15) << 18;
var PRECEDENCES_BY_PSEUDO_CLASS = [
"rst",
"st",
"en",
"d",
"nk",
"sited",
"pty",
"ecked",
"cus-w",
"ver",
"cus",
"cus-v",
"tive",
"sable",
"ad-on",
"tiona",
"quire"
];
var pseudoPrecedence = (pseudoClass) => 1 << (~(_3 = PRECEDENCES_BY_PSEUDO_CLASS.indexOf(pseudoClass.replace(GROUP_RE, ":$2").slice(3, 8))) ? _3 : 17);
var makeVariantPresedenceCalculator = (theme2, variants) => (presedence, variant) => presedence | ((_3 = theme2("screens", tail(variant), "")) ? 1 << 27 | responsivePrecedence(buildMediaQuery(_3)) : variant == ":dark" ? 1 << 30 : (_3 = variants[variant] || variant.replace(NOT_PREFIX_RE, ":$2"))[0] == "@" ? atRulePresedence(_3) : pseudoPrecedence(variant));
var declarationPropertyPrecedence = (property2) => property2[0] == "-" ? 0 : seperatorPrecedence(property2) + ((_3 = /^(?:(border-(?!w|c|sty)|[tlbr].{2,4}m?$|c.{7}$)|([fl].{5}l|g.{8}$|pl))/.exec(property2)) ? +!!_3[1] || -!!_3[2] : 0) + 1;
// src/twind/serialize.ts
var stringifyBlock = (body, selector) => selector + "{" + body + "}";
var serialize = (prefix, variants, context) => {
const {theme: theme2, tag} = context;
const tagVar = (_4, property2) => "--" + tag(property2);
const tagVars = (value) => `${value}`.replace(/--(tw-[\w-]+)\b/g, tagVar);
const stringifyDeclaration = (property2, value, important) => {
property2 = tagVars(property2);
return Array.isArray(value) ? join(value.filter(Boolean).map((value2) => prefix(property2, tagVars(value2), important)), ";") : prefix(property2, tagVars(value), important);
};
let rules2;
const stringify2 = (atRules, selector, presedence, css, important) => {
if (Array.isArray(css)) {
css.forEach((css2) => css2 && stringify2(atRules, selector, presedence, css2, important));
return;
}
let declarations = "";
let maxPropertyPresedence = 0;
let numberOfDeclarations = 0;
if (css["@apply"]) {
css = merge(evalThunk(apply(css["@apply"]), context), {...css, "@apply": void 0}, context);
}
Object.keys(css).forEach((key) => {
const value = evalThunk(css[key], context);
if (isCSSProperty(key, value)) {
if (value !== "" && key.length > 1) {
const property2 = hyphenate(key);
numberOfDeclarations += 1;
maxPropertyPresedence = Math.max(maxPropertyPresedence, declarationPropertyPrecedence(property2));
declarations = (declarations && declarations + ";") + stringifyDeclaration(property2, value, important);
}
} else if (value) {
if (key == ":global") {
key = "@global";
}
if (key[0] == "@") {
if (key[1] == "g") {
stringify2([], "", 0, value, important);
} else if (key[1] == "f") {
stringify2([], key, 0, value, important);
} else if (key[1] == "k") {
const currentSize = rules2.length;
stringify2([], "", 0, value, important);
const waypoints = rules2.splice(currentSize, rules2.length - currentSize);
rules2.push({
r: stringifyBlock(join(waypoints.map((p) => p.r), ""), key),
p: waypoints.reduce((sum, p) => sum + p.p, 0)
});
} else if (key[1] == "i") {
;
(Array.isArray(value) ? value : [value]).forEach((value2) => value2 && rules2.push({p: 0, r: `${key} ${value2};`}));
} else {
if (key[2] == "c") {
key = buildMediaQuery(context.theme("screens", tail(key, 8).trim()));
}
stringify2([...atRules, key], selector, presedence | responsivePrecedence(key) | atRulePresedence(key), value, important);
}
} else {
stringify2(atRules, selector ? selector.replace(/ *((?:\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g, (_4, selectorPart, comma) => key.replace(/ *((?:\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g, (_5, keyPart, comma2) => (includes(keyPart, "&") ? keyPart.replace(/&/g, selectorPart) : (selectorPart && selectorPart + " ") + keyPart) + comma2) + comma) : key, presedence, value, important);
}
}
});
if (numberOfDeclarations) {
rules2.push({
r: atRules.reduceRight(stringifyBlock, stringifyBlock(declarations, selector)),
p: presedence * (1 << 8) + ((Math.max(0, 15 - numberOfDeclarations) & 15) << 4 | (maxPropertyPresedence || 15) & 15)
});
}
};
const variantPresedence = makeVariantPresedenceCalculator(theme2, variants);
return (css, className, rule, layer = 0) => {
layer <<= 28;
rules2 = [];
stringify2([], className ? "." + escape(className) : "", rule ? rule.v.reduceRight(variantPresedence, layer) : layer, css, rule && rule.i);
return rules2;
};
};
// src/twind/inject.ts
var inject = (sheet, mode2, init, context) => {
let sortedPrecedences;
init((value = []) => sortedPrecedences = value);
let insertedRules;
init((value = new Set()) => insertedRules = value);
return ({r: css, p: presedence}) => {
if (!insertedRules.has(css)) {
insertedRules.add(css);
const index = sortedInsertionIndex(sortedPrecedences, presedence);
try {
sheet.insert(css, index);
sortedPrecedences.splice(index, 0, presedence);
} catch (error) {
if (!/:-[mwo]/.test(css)) {
mode2.report({id: "INJECT_CSS_ERROR", css, error}, context);
}
}
}
};
};
// src/twind/configure.ts
var sanitize = (value, defaultValue, disabled, enabled = defaultValue) => value === false ? disabled : value === true ? enabled : value || defaultValue;
var loadMode = (mode2) => (typeof mode2 == "string" ? {t: strict, a: warn, i: silent}[mode2[1]] : mode2) || warn;
var COMPONENT_PROPS = {_: {value: "", writable: true}};
var configure = (config = {}) => {
const theme2 = makeThemeResolver(config.theme);
const mode2 = loadMode(config.mode);
const hash = sanitize(config.hash, false, false, cyrb32);
const important = config.important;
let activeRule = {v: []};
let translateDepth = 0;
const lastTranslations = [];
const context = {
tw: (...tokens) => process(tokens),
theme: (section, key, defaultValue) => {
var _a;
const value = (_a = theme2(section, key, defaultValue)) != null ? _a : mode2.unknown(section, key == null || Array.isArray(key) ? key : key.split("."), defaultValue != null, context);
return activeRule.n && value && includes("rg", (typeof value)[5]) ? `calc(${value} * -1)` : value;
},
tag: (value) => hash ? hash(value) : value,
css: (rules2) => {
translateDepth++;
const lastTranslationsIndex = lastTranslations.length;
try {
;
(typeof rules2 == "string" ? parse([rules2]) : rules2).forEach(convert);
const css = Object.create(null, COMPONENT_PROPS);
for (let index = lastTranslationsIndex; index < lastTranslations.length; index++) {
const translation = lastTranslations[index];
if (translation) {
switch (typeof translation) {
case "object":
merge(css, translation, context);
break;
case "string":
css._ += (css._ && " ") + translation;
}
}
}
return css;
} finally {
lastTranslations.length = lastTranslationsIndex;
translateDepth--;
}
}
};
const translate2 = translate({...corePlugins, ...config.plugins}, context);
const doTranslate = (rule) => {
const parentRule = activeRule;
activeRule = rule;
try {
return evalThunk(translate2(rule), context);
} finally {
activeRule = parentRule;
}
};
const variants = {...coreVariants, ...config.variants};
const decorate2 = decorate(config.darkMode || "media", variants, context);
const serialize2 = serialize(sanitize(config.prefix, autoprefix, noprefix), variants, context);
const sheet = config.sheet || (typeof window == "undefined" ? voidSheet() : cssomSheet(config));
const {init = (callback) => callback()} = sheet;
const inject2 = inject(sheet, mode2, init, context);
let idToClassName;
init((value = new Map()) => idToClassName = value);
const inlineDirectiveName = new WeakMap();
const evaluateFunctions = (key, value) => key == "_" ? void 0 : typeof value == "function" ? JSON.stringify(evalThunk(value, context), evaluateFunctions) : value;
const convert = (rule) => {
if (!translateDepth && activeRule.v.length) {
rule = {...rule, v: [...activeRule.v, ...rule.v], $: ""};
}
if (!rule.$) {
rule.$ = stringifyRule(rule, inlineDirectiveName.get(rule.d));
}
let className = translateDepth ? null : idToClassName.get(rule.$);
if (className == null) {
let translation = doTranslate(rule);
if (!rule.$) {
rule.$ = cyrb32(JSON.stringify(translation, evaluateFunctions));
inlineDirectiveName.set(rule.d, rule.$);
rule.$ = stringifyRule(rule, rule.$);
}
if (translation && typeof translation == "object") {
rule.v = rule.v.map(prepareVariantSelector);
if (important)
rule.i = important;
translation = decorate2(translation, rule);
if (translateDepth) {
lastTranslations.push(translation);
} else {
const layer = typeof rule.d == "function" ? typeof translation._ == "string" ? 1 : 3 : 2;
className = hash || typeof rule.d == "function" ? (hash || cyrb32)(layer + rule.$) : rule.$;
serialize2(translation, className, rule, layer).forEach(inject2);
if (translation._) {
className += " " + translation._;
}
}
} else {
if (typeof translation == "string") {
className = translation;
} else {
className = rule.$;
mode2.report({id: "UNKNOWN_DIRECTIVE", rule: className}, context);
}
if (translateDepth && typeof rule.d !== "function") {
lastTranslations.push(className);
}
}
if (!translateDepth) {
idToClassName.set(rule.$, className);
ensureMaxSize(idToClassName, 3e4);
}
}
return className;
};
const process = (tokens) => join(parse(tokens).map(convert).filter(Boolean), " ");
const preflight = sanitize(config.preflight, identity, false);
if (preflight) {
const css = createPreflight(theme2);
const styles = serialize2(typeof preflight == "function" ? evalThunk(preflight(css, context), context) || css : {...css, ...preflight});
init((injected = (styles.forEach(inject2), true)) => injected);
}
return {
init: () => mode2.report({id: "LATE_SETUP_CALL"}, context),
process
};
};
// src/twind/instance.ts
var create = (config) => {
let process = (tokens) => {
init();
return process(tokens);
};
let init = (config2) => {
;
({process, init} = configure(config2));
};
if (config)
init(config);
let context;
const fromContext = (key) => () => {
if (!context) {
process([
(_4) => {
context = _4;
return "";
}
]);
}
return context[key];
};
return {
tw: Object.defineProperties((...tokens) => process(tokens), {
theme: {
get: fromContext("theme")
}
}),
setup: (config2) => init(config2)
};
};
// src/twind/default.ts
var {tw, setup} = /* @__PURE__ */ create();
// src/twind/expand.ts
var expandGroups = (classNames) => parse(classNames).map((rule) => stringifyRule(rule)).join(" ");
export {
apply,
autoprefix,
create,
cssomSheet,
directive,
expandGroups,
cyrb32 as hash,
mode,
noprefix,
setup,
silent,
strict,
theme,
tw,
voidSheet,
warn
};
//# sourceMappingURL=twind.js.map